@hitsoft/e-donusum 1.0.8 → 1.0.10

package/_metronic/partials/layout/extras/dropdown-inner/notifications-inner/notifications-inner.component.html

@@ -0,0 +1,176 @@
+<div
+  class="d-flex flex-column bgi-no-repeat rounded-top"
+  [style.background-image]="'url(./assets/media/misc/menu-header-bg.jpg)'"
+>
+  <h3 class="text-white fw-bold px-9 mt-10 mb-6">
+    Notifications <span class="fs-8 opacity-75 ps-3">24 reports</span>
+  </h3>
+
+  <ul class="nav nav-line-tabs nav-line-tabs-2x nav-stretch fw-bold px-9">
+    <li class ="nav-item">
+      <a
+        class="
+          nav-link
+          text-white
+          opacity-75 opacity-state-100
+          pb-4
+          cursor-pointer
+        "
+        data-bs-toggle="tab"
+        [ngClass]="activeTabId === 'kt_topbar_notifications_1' ? 'active' : ''"
+        (click)="setActiveTabId('kt_topbar_notifications_1')"
+      >
+        Alerts
+      </a>
+    </li>
+
+    <li class="nav-item">
+      <a
+        class="
+          nav-link
+          text-white
+          opacity-75 opacity-state-100
+          pb-4
+          cursor-pointer
+        "
+        data-bs-toggle="tab"
+        [ngClass]="activeTabId === 'kt_topbar_notifications_2' ? 'active' : ''"
+        (click)="setActiveTabId('kt_topbar_notifications_2')"
+      >
+        Updates
+      </a>
+    </li>
+
+    <li class="nav-item">
+      <a
+        class="
+          nav-link
+          text-white
+          opacity-75 opacity-state-100
+          pb-4
+          cursor-pointer
+        "
+        data-bs-toggle="tab"
+        [ngClass]="activeTabId === 'kt_topbar_notifications_3' ? 'active' : ''"
+        (click)="setActiveTabId('kt_topbar_notifications_3')"
+      >
+        Logs
+      </a>
+    </li>
+  </ul>
+</div>
+
+<div class="tab-content">
+  <div
+    class="tab-pane fade"
+    id="kt_topbar_notifications_1"
+    role="tabpanel"
+    [ngClass]="activeTabId === 'kt_topbar_notifications_1' ? 'show active' : ''"
+  >
+    <div class="scroll-y mh-325px my-5 px-8">
+      <div *ngFor="let alert of alerts" class="d-flex flex-stack py-4">
+        <div class="d-flex align-items-center">
+          <div class="symbol symbol-35px me-4">
+            <span class="symbol-label" [ngClass]="'bg-light-' + alert.state">
+              <span
+                [inlineSVG]="'./assets/media/' + alert.icon"
+                class="svg-icon fs-2"
+                [ngClass]="'svg-icon-' + alert.state"
+              ></span>
+            </span>
+          </div>
+
+          <div class="mb-0 me-2">
+            <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bolder">
+              {{ alert.title }}
+            </a>
+            <div class="text-gray-500 fs-7">{{ alert.description }}</div>
+          </div>
+        </div>
+
+        <span class="badge badge-light fs-8">{{ alert.time }}</span>
+      </div>
+    </div>
+
+    <div class="py-3 text-center border-top">
+      <a
+        routerLink="/crafted/pages/profile"
+        class="btn btn-color-gray-600 btn-active-color-primary"
+      >
+        View All
+        <app-keenicon name="arrow-right" class="fs-5"></app-keenicon>
+      </a>
+    </div>
+  </div>
+
+  <div
+    class="tab-pane fade"
+    id="kt_topbar_notifications_2"
+    role="tabpanel"
+    [ngClass]="activeTabId === 'kt_topbar_notifications_2' ? 'show active' : ''"
+  >
+    <div class="d-flex flex-column px-9">
+      <div class="pt-10 pb-0">
+        <h3 class="text-gray-900 text-center fw-bolder">Get Pro Access</h3>
+
+        <div class="text-center text-gray-600 fw-bold pt-1">
+          Outlines keep you honest. They stoping you from amazing poorly about
+          drive
+        </div>
+
+        <div class="text-center mt-5 mb-9">
+          <a
+            class="btn btn-sm btn-primary px-6 cursor-pointer"
+            data-bs-toggle="modal"
+            data-bs-target="#kt_modal_upgrade_plan"
+          >
+            Upgrade
+          </a>
+        </div>
+      </div>
+
+      <div class="text-center px-4">
+        <img
+          class="mw-100 mh-200px"
+          alt="metronic"
+          src="./assets/media/illustrations/sketchy-1/1.png"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="tab-pane fade"
+    id="kt_topbar_notifications_3"
+    role="tabpanel"
+    [ngClass]="activeTabId === 'kt_topbar_notifications_3' ? 'show active' : ''"
+  >
+    <div class="scroll-y mh-325px my-5 px-8">
+      <div *ngFor="let log of logs" class="d-flex flex-stack py-4">
+        <div class="d-flex align-items-center me-2">
+          <span
+            class="w-70px badge"
+            [ngClass]="'badge-light-' + log.state + ' me-4'"
+          >
+            {{ log.code }}
+          </span>
+
+          <a class="text-gray-800 text-hover-primary fw-bold cursor-pointer">
+            {{ log.message }}
+          </a>
+
+          <span class="badge badge-light fs-8">{{ log.time }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="py-3 text-center border-top">
+      <a
+        routerLink="/crafted/pages/profile"
+        class="btn btn-color-gray-600 btn-active-color-primary"
+      >
+        View All
+        <app-keenicon name="arrow-right" class="fs-5"></app-keenicon>
+      </a>
+    </div>
+  </div>
+</div>

package/_metronic/partials/layout/extras/dropdown-inner/notifications-inner/notifications-inner.component.ts

@@ -0,0 +1,155 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { LayoutService } from '../../../../../layout';
+
+export type NotificationsTabsType =
+  | 'kt_topbar_notifications_1'
+  | 'kt_topbar_notifications_2'
+  | 'kt_topbar_notifications_3';
+
+@Component({
+  selector: 'app-notifications-inner',
+  templateUrl: './notifications-inner.component.html',
+})
+export class NotificationsInnerComponent implements OnInit {
+  @HostBinding('class') class =
+    'menu menu-sub menu-sub-dropdown menu-column w-350px w-lg-375px';
+  @HostBinding('attr.data-kt-menu') dataKtMenu = 'true';
+
+  activeTabId: NotificationsTabsType = 'kt_topbar_notifications_2';
+  alerts: Array<AlertModel> = defaultAlerts;
+  logs: Array<LogModel> = defaultLogs;
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  setActiveTabId(tabId: NotificationsTabsType) {
+    this.activeTabId = tabId;
+  }
+}
+
+interface AlertModel {
+  title: string;
+  description: string;
+  time: string;
+  icon: string;
+  state: 'primary' | 'danger' | 'warning' | 'success' | 'info';
+}
+
+const defaultAlerts: Array<AlertModel> = [
+  {
+    title: 'Project Alice',
+    description: 'Phase 1 development',
+    time: '1 hr',
+    icon: 'icons/duotune/technology/teh008.svg',
+    state: 'primary',
+  },
+  {
+    title: 'HR Confidential',
+    description: 'Confidential staff documents',
+    time: '2 hrs',
+    icon: 'icons/duotune/general/gen044.svg',
+    state: 'danger',
+  },
+  {
+    title: 'Company HR',
+    description: 'Corporeate staff profiles',
+    time: '5 hrs',
+    icon: 'icons/duotune/finance/fin006.svg',
+    state: 'warning',
+  },
+  {
+    title: 'Project Redux',
+    description: 'New frontend admin theme',
+    time: '2 days',
+    icon: 'icons/duotune/files/fil023.svg',
+    state: 'success',
+  },
+  {
+    title: 'Project Breafing',
+    description: 'Product launch status update',
+    time: '21 Jan',
+    icon: 'icons/duotune/maps/map001.svg',
+    state: 'primary',
+  },
+  {
+    title: 'Banner Assets',
+    description: 'Collection of banner images',
+    time: '21 Jan',
+    icon: 'icons/duotune/general/gen006.svg',
+    state: 'info',
+  },
+  {
+    title: 'Icon Assets',
+    description: 'Collection of SVG icons',
+    time: '20 March',
+    icon: 'icons/duotune/art/art002.svg',
+    state: 'warning',
+  },
+];
+
+interface LogModel {
+  code: string;
+  state: 'success' | 'danger' | 'warning';
+  message: string;
+  time: string;
+}
+
+const defaultLogs: Array<LogModel> = [
+  { code: '200 OK', state: 'success', message: 'New order', time: 'Just now' },
+  { code: '500 ERR', state: 'danger', message: 'New customer', time: '2 hrs' },
+  {
+    code: '200 OK',
+    state: 'success',
+    message: 'Payment process',
+    time: '5 hrs',
+  },
+  {
+    code: '300 WRN',
+    state: 'warning',
+    message: 'Search query',
+    time: '2 days',
+  },
+  {
+    code: '200 OK',
+    state: 'success',
+    message: 'API connection',
+    time: '1 week',
+  },
+  {
+    code: '200 OK',
+    state: 'success',
+    message: 'Database restore',
+    time: 'Mar 5',
+  },
+  {
+    code: '300 WRN',
+    state: 'warning',
+    message: 'System update',
+    time: 'May 15',
+  },
+  {
+    code: '300 WRN',
+    state: 'warning',
+    message: 'Server OS update',
+    time: 'Apr 3',
+  },
+  {
+    code: '300 WRN',
+    state: 'warning',
+    message: 'API rollback',
+    time: 'Jun 30',
+  },
+  {
+    code: '500 ERR',
+    state: 'danger',
+    message: 'Refund process',
+    time: 'Jul 10',
+  },
+  {
+    code: '500 ERR',
+    state: 'danger',
+    message: 'Withdrawal process',
+    time: 'Sep 10',
+  },
+  { code: '500 ERR', state: 'danger', message: 'Mail tasks', time: 'Dec 10' },
+];

package/_metronic/partials/layout/extras/dropdown-inner/quick-links-inner/quick-links-inner.component.html

@@ -0,0 +1,77 @@
+<div class="d-flex flex-column flex-center bgi-no-repeat rounded-top px-9 py-10"
+  [style.background-image]="'url(./assets/media/misc/menu-header-bg.jpg)'">
+  <h3 class="text-white fw-bold mb-3">Quick Links</h3>
+  <span class="badge bg-primary py-2 px-3">25 pending tasks</span>
+</div>
+
+<div class="row g-0">
+  <div class="col-6">
+    <a class="
+        d-flex
+        flex-column flex-center
+        h-100
+        p-6
+        bg-hover-light
+        border-end border-bottom
+        cursor-pointer
+      ">
+      <app-keenicon name="euro" class="fs-3x text-primary mb-2"></app-keenicon>
+      <span class="fs-5 fw-bold text-gray-800 mb-0">Accounting</span>
+      <span class="fs-7 text-gray-500">eCommerce</span>
+    </a>
+  </div>
+
+  <div class="col-6">
+    <a class="
+        d-flex
+        flex-column flex-center
+        h-100
+        p-6
+        bg-hover-light
+        border-bottom
+        cursor-pointer
+      ">
+      <app-keenicon name="sms" class="fs-3x text-primary mb-2"></app-keenicon>
+      <span class="fs-5 fw-bold text-gray-800 mb-0">Administration</span>
+      <span class="fs-7 text-gray-500">Console</span>
+    </a>
+  </div>
+
+  <div class="col-6">
+    <a class="
+        d-flex
+        flex-column flex-center
+        h-100
+        p-6
+        bg-hover-light
+        border-end
+        cursor-pointer
+      ">
+      <app-keenicon name="abstract-41" class="fs-3x text-primary mb-2"></app-keenicon>
+      <span class="fs-5 fw-bold text-gray-800 mb-0">Projects</span>
+      <span class="fs-7 text-gray-500">Pending Tasks</span>
+    </a>
+  </div>
+
+  <div class="col-6">
+    <a class="
+        d-flex
+        flex-column flex-center
+        h-100
+        p-6
+        bg-hover-light
+        cursor-pointer
+      ">
+      <app-keenicon name="briefcase" class="fs-3x text-primary mb-2"></app-keenicon>
+      <span class="fs-5 fw-bold text-gray-800 mb-0">Customers</span>
+      <span class="fs-7 text-gray-500">Latest cases</span>
+    </a>
+  </div>
+</div>
+
+<div class="py-2 text-center border-top">
+  <a routerLink="/crafted/pages/profile" class="btn btn-color-gray-600 btn-active-color-primary">
+    View All
+    <app-keenicon name="arrow-right" class="fs-5"></app-keenicon>
+  </a>
+</div>

package/_metronic/partials/layout/extras/dropdown-inner/quick-links-inner/quick-links-inner.component.ts

@@ -0,0 +1,13 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'app-quick-links-inner',
+  templateUrl: './quick-links-inner.component.html',
+})
+export class QuickLinksInnerComponent {
+  @HostBinding('class') class =
+    'menu menu-sub menu-sub-dropdown menu-column w-250px w-lg-325px';
+  @HostBinding('attr.data-kt-menu') dataKtMenu = 'true';
+
+  constructor() {}
+}

package/_metronic/partials/layout/extras/dropdown-inner/search-result-inner/search-result-inner.component.html

@@ -0,0 +1,120 @@
+<!--begin::Wrapper-->
+<div data-kt-search-element="wrapper">
+
+  <!--begin::Form-->
+  <form data-kt-search-element="form" class="w-100 position-relative mb-3" autocomplete="off">
+    <!--begin::Icon-->
+    <app-keenicon name="magnifier" class="fs-2 fs-lg-1 text-gray500 position-absolute top-50 translate-middle-y ms-0"></app-keenicon>
+    <!--end::Icon-->
+
+    <!--begin::Input-->
+    <input type="text" class="form-control form-control-flush ps-10" name="search" value="" placeholder="Search..." data-kt-search-element="input" [ngModel]="keyword" (ngModelChange)="search($event)"/>
+    <!--end::Input-->
+
+    <!--begin::Spinner-->
+    <span class="position-absolute top-50 end-0 translate-middle-y lh-0 me-1" data-kt-search-element="spinner" [ngClass]="searching ? '' : 'd-none'">
+        <span class="spinner-border h-15px w-15px align-middle text-gray-500"></span>
+    </span>
+    <!--end::Spinner-->
+
+    <!--begin::Reset-->
+    <span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0" data-kt-search-element="clear" [ngClass]="searching || keyword.length === 0 ? 'd-none' : ''" (click)="clearSearch()">
+        <app-keenicon name="cross" class="fs-2 fs-lg-1 me-0"></app-keenicon>
+    </span>
+    <!--end::Reset-->
+
+    <!--begin::Toolbar-->
+    <div class="position-absolute top-50 end-0 translate-middle-y" data-kt-search-element="toolbar" [ngClass]="searching || keyword.length > 0 ? 'd-none' : ''">
+      <!--begin::Preferences toggle-->
+      <div data-kt-search-element="preferences-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary me-1" data-bs-toggle="tooltip" title="Show search preferences">
+          <app-keenicon name="setting-2" class="fs-1"></app-keenicon>
+      </div>
+      <!--end::Preferences toggle-->
+
+      <!--begin::Advanced search toggle-->
+      <div data-kt-search-element="advanced-options-form-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary" data-bs-toggle="tooltip" title="Show more search options">
+          <app-keenicon name="down" class="fs-2"></app-keenicon>
+      </div>
+      <!--end::Advanced search toggle-->
+    </div>
+    <!--end::Toolbar-->
+  </form>
+  <!--end::Form-->
+
+  <!--begin::Separator-->
+  <div class="separator border-gray-200 mb-6"></div>
+  <!--end::Separator-->
+
+
+  <!--begin::Recently viewed-->
+  <div data-kt-search-element="results" [ngClass]="searching || keyword.length === 0 ? 'd-none' : ''">
+    <!--begin::Items-->
+    <div class="scroll-y mh-200px mh-lg-325px">
+      <!--begin::Category title-->
+      <h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">
+        Users
+      </h3>
+      <!--end::Category title-->
+
+      <!--begin::Item-->
+      <a href="#" *ngFor="let item of resultModels" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
+        <!--begin::Symbol-->
+        <div class="symbol symbol-40px me-4">
+          <img src="{{ item.image }}" alt=""/>
+        </div>
+        <!--end::Symbol-->
+
+        <!--begin::Title-->
+        <div class="d-flex flex-column justify-content-start fw-bold">
+          <span class="fs-6 fw-bold">{{ item.title }}</span>
+          <span class="fs-7 fw-bold text-muted">{{ item.description }}</span>
+        </div>
+        <!--end::Title-->
+      </a>
+      <!--end::Item-->
+    </div>
+    <!--end::Items-->
+  </div>
+  <!--end::Recently viewed-->
+
+  <!--begin::Recently viewed-->
+  <div data-kt-search-element="results" [ngClass]="keyword.length > 0 ? 'd-none' : ''">
+    <!--begin::Items-->
+    <div class="scroll-y mh-200px mh-lg-325px">
+      <!--begin::Category title-->
+      <h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">
+        Recently Searched
+      </h3>
+      <!--end::Category title-->
+
+      <!--begin::Item-->
+      <a href="#" *ngFor="let item of recentlySearchedModels" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
+        <!--begin::Symbol-->
+        <div class="symbol symbol-40px me-4">
+          <img *ngIf="item.image" src="{{ item.image }}" alt=""/>
+
+          <span class="symbol-label bg-light">
+            <span
+              *ngIf="item.icon"
+              [inlineSVG]="item.icon"
+              class="svg-icon fs-2 text-primary"
+            ></span>
+          </span>
+        </div>
+        <!--end::Symbol-->
+
+        <!--begin::Title-->
+        <div class="d-flex flex-column justify-content-start fw-bold">
+          <span class="fs-6 fw-bold">{{ item.title }}</span>
+          <span class="fs-7 fw-bold text-muted">{{ item.description }}</span>
+        </div>
+        <!--end::Title-->
+      </a>
+      <!--end::Item-->
+    </div>
+    <!--end::Items-->
+  </div>
+  <!--end::Recently viewed-->
+
+</div>
+<!--end::Wrapper-->

package/_metronic/partials/layout/extras/dropdown-inner/search-result-inner/search-result-inner.component.ts

@@ -0,0 +1,104 @@
+import {ChangeDetectorRef, Component, HostBinding, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-search-result-inner',
+  templateUrl: './search-result-inner.component.html',
+})
+export class SearchResultInnerComponent implements OnInit {
+  @HostBinding('class') class = 'menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px';
+  @HostBinding('attr.data-kt-menu') dataKtMenu = 'true';
+  @HostBinding('attr.data-kt-search-element') dataKtSearch = 'content';
+
+  resultModels: Array<ResultModel> = resultModels;
+  recentlySearchedModels: Array<ResultModel> = recentlySearchedModels;
+
+  keyword: string = '';
+  searching: boolean = false;
+
+  constructor(private cdr: ChangeDetectorRef) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  search(keyword: string) {
+    this.keyword = keyword;
+    this.searching = true;
+
+    setTimeout(() => {
+      this.searching = false;
+      this.cdr.detectChanges();
+    }, 1000);
+  }
+
+  clearSearch() {
+    this.keyword = '';
+  }
+}
+
+interface ResultModel {
+  icon?: string;
+  image?: string;
+  title: string;
+  description: string;
+}
+
+const resultModels: Array<ResultModel> = [
+  {
+    'image': './assets/media/avatars/300-6.jpg',
+    'title': 'Karina Clark',
+    'description': 'Marketing Manager'
+  },
+  {
+    'image': './assets/media/avatars/300-2.jpg',
+    'title': 'Olivia Bold',
+    'description': 'Software Engineer'
+  },
+  {
+    'image': './assets/media/avatars/300-9.jpg',
+    'title': 'Ana Clark',
+    'description': 'UI/UX Designer'
+  },
+  {
+    'image': './assets/media/avatars/300-14.jpg',
+    'title': 'Nick Pitola',
+    'description': 'Art Director'
+  },
+  {
+    'image': './assets/media/avatars/300-11.jpg',
+    'title': 'Edward Kulnic',
+    'description': 'System Administrator'
+  }
+];
+
+const recentlySearchedModels: Array<ResultModel> = [
+  {
+    'icon': './assets/media/icons/duotune/electronics/elc004.svg',
+    'title': 'BoomApp by Keenthemes',
+    'description': '#45789'
+  }, {
+    'icon': './assets/media/icons/duotune/graphs/gra001.svg',
+    'title': '"Kept API Project Meeting',
+    'description': '#84050'
+  }, {
+    'icon': './assets/media/icons/duotune/graphs/gra006.svg',
+    'title': '"KPI Monitoring App Launch',
+    'description': '#84250'
+  }, {
+    'icon': './assets/media/icons/duotune/graphs/gra002.svg',
+    'title': 'Project Reference FAQ',
+    'description': '#67945'
+  }, {
+    'icon': './assets/media/icons/duotune/communication/com010.svg',
+    'title': '"FitPro App Development',
+    'description': '#84250'
+  }, {
+    'icon': './assets/media/icons/duotune/finance/fin001.svg',
+    'title': 'Shopix Mobile App',
+    'description': '#45690'
+  }, {
+    'icon': './assets/media/icons/duotune/graphs/gra002.svg',
+    'title': '"Landing UI Design" Launch',
+    'description': '#24005'
+  }
+];