优化打包，调整菜单映射文件位置

components.d.ts

@@ -10,34 +10,17 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BaseChart: typeof import('./src/components/charts/BaseChart.vue')['default']
-    CalendarApp1: typeof import('./src/components/calendar/CalendarApp1.vue')['default']
-    Card: typeof import('./src/components/cards/Card.vue')['default']
-    Card1: typeof import('./src/components/cards/Card1.vue')['default']
-    Card2: typeof import('./src/components/cards/Card2.vue')['default']
-    Card3: typeof import('./src/components/cards/Card3.vue')['default']
-    Card4: typeof import('./src/components/cards/Card4.vue')['default']
     CodeHighlighter: typeof import('./src/components/highlighters/CodeHighlighter.vue')['default']
     CodeHighlighter2: typeof import('./src/components/highlighters/CodeHighlighter2.vue')['default']
-    copy: typeof import('./src/components/select/DySelect copy.vue')['default']
-    CreditBalance: typeof import('./src/components/customers/cards/overview/CreditBalance.vue')['default']
     DateRangeSelect: typeof import('./src/components/select/DateRangeSelect.vue')['default']
-    DateSelect: typeof import('./src/components/select/DateSelect.vue')['default']
-    Dropdown1: typeof import('./src/components/dropdown/Dropdown1.vue')['default']
-    Dropdown2: typeof import('./src/components/dropdown/Dropdown2.vue')['default']
-    Dropdown3: typeof import('./src/components/dropdown/Dropdown3.vue')['default']
-    Dropdown4: typeof import('./src/components/dropdown/Dropdown4.vue')['default']
     DynamicTreeSelect: typeof import('./src/components/select/DynamicTreeSelect.vue')['default']
     DySearchSelect: typeof import('./src/components/select/DySearchSelect.vue')['default']
     DySelect: typeof import('./src/components/select/DySelect.vue')['default']
     DySelectTree: typeof import('./src/components/select/DySelectTree.vue')['default']
-    DySelectTree2: typeof import('./src/components/select/DySelectTree2.vue')['default']
-    Earnings: typeof import('./src/components/customers/cards/statments/Earnings.vue')['default']
-    ElA: typeof import('element-plus/es')['ElA']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElElFormItem: typeof import('element-plus/es')['ElElFormItem']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -46,24 +29,12 @@ declare module '@vue/runtime-core' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTree: typeof import('element-plus/es')['ElTree']
-    Events: typeof import('./src/components/customers/cards/events-and-logs/Events.vue')['default']
-    File: typeof import('./src/components/files/File.vue')['default']
-    Folder: typeof import('./src/components/files/Folder.vue')['default']
-    Invoices: typeof import('./src/components/customers/cards/overview/Invoices.vue')['default']
     Loading: typeof import('./src/components/Table/table-partials/Loading.vue')['default']
-    Logs: typeof import('./src/components/customers/cards/events-and-logs/Logs.vue')['default']
     MenuComponent: typeof import('./src/components/menu/MenuComponent.vue')['default']
-    Notice: typeof import('./src/components/Notice.vue')['default']
     OrgCompany: typeof import('./src/components/Tree/OrgCompany.vue')['default']
-    PaymentMethods: typeof import('./src/components/customers/cards/overview/PaymentMethods.vue')['default']
-    PaymentRecords: typeof import('./src/components/customers/cards/overview/PaymentRecords.vue')['default']
     'PreviewCode ': typeof import('./src/components/prismjs/PreviewCode .vue')['default']
-    Profile: typeof import('./src/components/page-layouts/Profile.vue')['default']
-    Questions: typeof import('./src/components/devs/Questions.vue')['default']
-    Replies: typeof import('./src/components/devs/Replies.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    Statement: typeof import('./src/components/customers/cards/statments/Statement.vue')['default']
     TableBodyRow: typeof import('./src/components/Table/table-partials/table-content/table-body/TableBodyRow.vue')['default']
     TableContent: typeof import('./src/components/Table/table-partials/table-content/TableContent.vue')['default']
     TableFixed: typeof import('./src/components/Table/table-partials/table-content/table-fixed/TableFixed.vue')['default']
@@ -72,9 +43,7 @@ declare module '@vue/runtime-core' {
     TableItemsPerPageSelect: typeof import('./src/components/Table/table-partials/table-content/table-footer/TableItemsPerPageSelect.vue')['default']
     TablePagination: typeof import('./src/components/Table/table-partials/table-content/table-footer/TablePagination.vue')['default']
     TableRightFixed: typeof import('./src/components/Table/table-partials/table-content/table-fixed/TableRightFixed.vue')['default']
-    TableTreeChildrenRow: typeof import('./src/components/Table/table-partials/table-content/table-body/TableTreeChildrenRow.vue')['default']
     TableTreeRow: typeof import('./src/components/Table/table-partials/table-content/table-body/TableTreeRow.vue')['default']
-    TextFormatting: typeof import('./src/components/devs/TextFormatting.vue')['default']
     VbDataTable: typeof import('./src/components/Table/VbDataTable.vue')['default']
     VbTreeTable: typeof import('./src/components/Table/VbTreeTable.vue')['default']
   }

package.json

@@ -47,6 +47,7 @@
     "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
     "vee-validate": "^4.5.11",
+    "vite-plugin-compression": "^0.5.1",
     "vue": "^3.2.41",
     "vue-axios": "^3.5.0",
     "vue-currency-input": "^2.1.0",
@@ -54,7 +55,7 @@
     "vue-inline-svg": "^3.1.0",
     "vue-router": "^4.1.5",
     "vue3-apexcharts": "^1.4.1",
-    "vue3-treeselect": "^0.1.10",
+    "vue3-treeselect-ts": "^0.0.4",
     "yup": "^0.32.8"
   },
   "devDependencies": {

src/App.vue

@@ -59,7 +59,7 @@ export default defineComponent({
 //@import "line-awesome/dist/line-awesome/css/line-awesome.css";
 //@import "dropzone/dist/dropzone.css";
 //@import "@vueform/multiselect/themes/default.css";
-@import "prism-themes/themes/prism-shades-of-purple.css";
+//@import "prism-themes/themes/prism-shades-of-purple.css";
 //@import "element-plus/dist/index.css";
 
 // Main demo style scss

src/components/Notice.vue

@@ -1,66 +0,0 @@
-<template>
-  <!--begin::Notice-->
-  <div
-    :class="`notice
-      d-flex
-      bg-light-${color}
-      rounded
-      border-${color}
-      border
-      border-dashed
-      ${classes}
-     ${padding}`"
-  >
-    <!--begin::Icon-->
-    <span v-if="icon" :class="`svg-icon svg-icon-2tx svg-icon-${color} me-4 ms-15 ms-lg-15`">
-      <inline-svg :src="icon" />
-    </span>
-    <!--end::Icon-->
-
-    <!--begin::Wrapper-->
-    <div class="d-flex flex-stack flex-grow-1">
-      <!--begin::Content-->
-      <div v-if="body || title" :class="`fw-semobold ${button}`">
-        <h4 v-if="title" class="text-gray-900 fw-bold">{{ title }}</h4>
-
-        <div v-if="body" v-html="body" :class="`fs-6 text-gray-700 pe-7`"></div>
-      </div>
-      <!--end::Content-->
-
-      <!--begin::Action-->
-      <a
-        v-if="button"
-        :href="buttonUrl"
-        :class="`btn btn-${color} px-6 align-self-center text-nowrap`"
-        :data-bs-toggle="buttonModalId ? 'modal' : false"
-        :data-bs-target="buttonModalId ? buttonModalId : false"
-      >
-        {{ buttonLabel }}
-      </a>
-      <!--end::Action-->
-    </div>
-    <!--end::Wrapper-->
-  </div>
-  <!--end::Notice-->
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "kt-notify",
-  props: {
-    classes: { type: String },
-    icon: { type: String },
-    title: { type: String },
-    body: { type: String },
-    button: { type: String },
-    buttonLabel: { type: String, default: "Button" },
-    buttonUrl: { type: String, default: "#" },
-    buttonModalId: { type: String },
-    color: { type: String, default: "primary" },
-    padding: { type: String, default: "p-6" },
-  },
-  components: {},
-})
-</script>

src/components/Table/table-partials/table-content/table-body/TableTreeRow.vue

@@ -157,8 +157,8 @@ onMounted(() => {
       :parent-field="parentField"
       :children-field="childrenField"
     >
-      <template v-for="(_, name) in $slots" #[name]="{ row: item }">
-        <slot :name="name" :row="item" />
+      <template v-for="(_, name) in $slots" #[name]="">
+        <slot :name="name" :row="child" />
       </template>
     </TableTreeRow>
   </template>

src/components/Table/table-partials/table-content/table-fixed/TableRightFixed.vue

@@ -60,7 +60,7 @@ watch(
       const trLength = tr.children.length
       let width = 0
 
-      for (let i = trLength; i >= trLength - fixedNum.value; i--) {
+      for (let i = trLength - 1; i >= trLength - fixedNum.value; i--) {
         width += tr.children[i]?.clientWidth ?? 0
         //console.log(width)
       }

src/components/Table/table-partials/table-content/table-head/TableHeadRow.vue

@@ -90,6 +90,9 @@ const thClass = (column: Header) => {
 
   return classStr
 }
+const convertHeader = (col: Header): any => {
+  return col
+}
 </script>
 
 <template>
@@ -108,7 +111,7 @@ const thClass = (column: Header) => {
       </th>
       <template v-for="(column, i) in header" :key="i">
         <th @click="onSort(column.field, column.isSort)" :class="thClass(column)" :style="thStyle(column)">
-          <slot v-if="$slots[column.field + '_header']" :name="`${column.field}_header`" :row="{ column }">
+          <slot v-if="$slots[column.field + '_header']" :name="`${column.field}_header`" :row="convertHeader(column)">
             {{ column }}
           </slot>
           <span v-else>{{ column.name }}</span>

src/components/calendar/CalendarApp1.vue

@@ -1,103 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div class="card">
-    <!--begin::Card header-->
-    <div class="card-header">
-      <h2 class="card-title fw-bold">Calendar</h2>
-
-      <div class="card-toolbar">
-        <button class="btn btn-flex btn-primary" @click="newEvent()">
-          <span class="svg-icon svg-icon-2">
-            <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr075.svg')" />
-          </span>
-          Add Event
-        </button>
-      </div>
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body">
-      <!--begin::Calendar-->
-      <FullCalendar class="demo-app-calendar" :options="calendarOptions"></FullCalendar>
-      <!--end::Calendar-->
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-
-  <NewEventModal></NewEventModal>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import "@fullcalendar/core/vdom"
-import { defineComponent } from "vue"
-import FullCalendar from "@fullcalendar/vue3"
-import dayGridPlugin from "@fullcalendar/daygrid"
-import timeGridPlugin from "@fullcalendar/timegrid"
-import listPlugin from "@fullcalendar/list"
-import interactionPlugin from "@fullcalendar/interaction"
-import type { CalendarOptions } from "@fullcalendar/core"
-import events from "@/core/data/events"
-import { TODAY } from "@/core/data/events"
-import NewEventModal from "@/components/modals/forms/NewEventModal.vue"
-import { Modal } from "bootstrap"
-
-export default defineComponent({
-  name: "calendar-app-1",
-  components: {
-    FullCalendar,
-    NewEventModal,
-  },
-  setup() {
-    const newEvent = () => {
-      const modal = new Modal(document.getElementById("kt_modal_add_event") as Element)
-      modal.show()
-    }
-
-    const calendarOptions: CalendarOptions = {
-      plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
-      headerToolbar: {
-        left: "prev,next today",
-        center: "title",
-        right: "dayGridMonth,timeGridWeek,timeGridDay",
-      },
-      initialDate: TODAY,
-      navLinks: true, // can click day/week names to navigate views
-      selectable: true,
-      selectMirror: true,
-
-      views: {
-        dayGridMonth: { buttonText: "month" },
-        timeGridWeek: { buttonText: "week" },
-        timeGridDay: { buttonText: "day" },
-      },
-
-      editable: true,
-      dayMaxEvents: true, // allow "more" link when too many events
-      events: events,
-      dateClick: newEvent,
-      eventClick: newEvent,
-    }
-
-    return {
-      calendarOptions,
-      newEvent,
-      getAssetPath,
-    }
-  },
-})
-</script>
-
-<style lang="scss">
-.fc .fc-button {
-  padding: 0.75rem 1.25rem;
-  box-shadow: none !important;
-  border: 0 !important;
-  border-radius: 0.475rem;
-  vertical-align: middle;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-</style>

src/components/cards/Card.vue

@@ -1,56 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div class="card">
-    <!--begin::Card body-->
-    <div class="card-body p-0">
-      <!--begin::Heading-->
-      <div class="card-px text-center py-20 my-10">
-        <!--begin::Title-->
-        <h2 class="fs-2x fw-bold mb-10">{{ title }}</h2>
-        <!--end::Title-->
-
-        <!--begin::Description-->
-        <p class="text-gray-400 fs-5 fw-semobold mb-13">
-          <span v-html="description"></span>
-        </p>
-        <!--end::Description-->
-
-        <!--begin::Action-->
-        <button
-          type="button"
-          class="btn btn-primary er fs-6 px-8 py-4"
-          data-bs-toggle="modal"
-          :data-bs-target="`#${modalId}`"
-        >
-          {{ buttonText }}
-        </button>
-        <!--end::Action-->
-      </div>
-      <!--end::Heading-->
-
-      <!--begin::Illustration-->
-      <div class="text-center px-5">
-        <img :src="image" alt="" class="mw-100 mh-300px" />
-      </div>
-      <!--end::Illustration-->
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "modal-card",
-  props: {
-    title: String,
-    description: String,
-    buttonText: String,
-    image: String,
-    modalId: String,
-  },
-  components: {},
-})
-</script>

src/components/cards/Card1.vue

@@ -1,154 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <a href="#" class="card border border-2 border-gray-300 border-hover">
-    <!--begin::Card header-->
-    <div class="card-header border-0 pt-9">
-      <!--begin::Card Title-->
-      <div class="card-title m-0">
-        <!--begin::Avatar-->
-        <div class="symbol symbol-50px w-50px bg-light">
-          <img :src="icon" alt="image" class="p-3" />
-        </div>
-        <!--end::Avatar-->
-      </div>
-      <!--end::Car Title-->
-
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar">
-        <span :class="getStatusDataBadgeColor" class="badge fw-bold me-auto px-4 py-3">{{ getStatus }}</span>
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end:: Card header-->
-
-    <!--begin:: Card body-->
-    <div class="card-body p-9">
-      <!--begin::Name-->
-      <div class="fs-3 fw-bold text-dark">
-        {{ title }}
-      </div>
-      <!--end::Name-->
-
-      <!--begin::Description-->
-      <p class="text-gray-400 fw-semobold fs-5 mt-1 mb-7">
-        {{ getDescription }}
-      </p>
-      <!--end::Description-->
-
-      <!--begin::Info-->
-      <div class="d-flex flex-wrap mb-5">
-        <!--begin::Due-->
-        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-7 mb-3">
-          <div class="fs-6 text-gray-800 fw-bold">{{ getDate }}</div>
-          <div class="fw-semobold text-gray-400">Due Date</div>
-        </div>
-        <!--end::Due-->
-
-        <!--begin::Budget-->
-        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 mb-3">
-          <div class="fs-6 text-gray-800 fw-bold">{{ getBudget }}</div>
-          <div class="fw-semobold text-gray-400">Budget</div>
-        </div>
-        <!--end::Budget-->
-      </div>
-      <!--end::Info-->
-
-      <!--begin::Progress-->
-      <div class="h-4px w-100 bg-light mb-5" data-bs-toggle="tooltip" :title="`This project ${progress}% completed`">
-        <div
-          :class="getStatusDataColor"
-          class="rounded h-4px"
-          role="progressbar"
-          :style="{ width: progress + `%` }"
-          :aria-valuenow="progress"
-          aria-valuemin="0"
-          aria-valuemax="100"
-        ></div>
-      </div>
-      <!--end::Progress-->
-
-      <template v-if="users">
-        <!--begin::Users-->
-        <div class="symbol-group symbol-hover">
-          <template v-for="(user, index) in users" :key="index">
-            <!--begin::User-->
-            <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip" :title="user.title">
-              <img v-if="user.src" alt="Pic" :src="user.src" />
-              <span v-else class="symbol-label fw-bold" :class="`bg-${user.state} text-inverse-${user.state}`">
-                {{ user.initials }}
-              </span>
-            </div>
-            <!--begin::User-->
-          </template>
-        </div>
-        <!--end::Users-->
-      </template>
-    </div>
-    <!--end:: Card body-->
-  </a>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from "vue"
-
-export default defineComponent({
-  name: "card-1",
-  components: {},
-  props: {
-    progress: Number,
-
-    statusDataBadgeColor: String,
-
-    statusDataColor: String,
-
-    status: String,
-
-    icon: String,
-
-    title: String,
-
-    description: String,
-
-    date: String,
-
-    budget: String,
-
-    users: Array as () => Array<any>,
-  },
-  setup(props) {
-    const getDescription = computed(() => {
-      return props.description ? props.description : "CRM App application to HR efficiency"
-    })
-
-    const getDate = computed(() => {
-      return props.date ? props.date : "Feb 21, 2021"
-    })
-
-    const getBudget = computed(() => {
-      return props.budget ? props.budget : "$284,900.00"
-    })
-
-    const getStatus = computed(() => {
-      return props.status ? props.status : "In Progress"
-    })
-
-    const getStatusDataBadgeColor = computed(() => {
-      return props.statusDataBadgeColor ? props.statusDataBadgeColor : "badge-light-primary"
-    })
-
-    const getStatusDataColor = computed(() => {
-      return props.statusDataColor ? props.statusDataColor : "bg-primary"
-    })
-
-    return {
-      getDescription,
-      getDate,
-      getBudget,
-      getStatus,
-      getStatusDataBadgeColor,
-      getStatusDataColor,
-    }
-  },
-})
-</script>

src/components/cards/Card2.vue

@@ -1,124 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div class="card h-100" :class="cardClasses">
-    <!--begin::Card header-->
-    <div class="card-header flex-nowrap border-0 pt-9">
-      <!--begin::Card title-->
-      <div class="card-title m-0">
-        <!--begin::Icon-->
-        <div class="symbol symbol-45px w-45px bg-light me-5">
-          <img :src="icon" alt="image" class="p-3" />
-        </div>
-        <!--end::Icon-->
-
-        <!--begin::Title-->
-        <a href="#" class="fs-4 fw-semobold text-hover-primary text-gray-600 m-0">
-          {{ title }}
-        </a>
-        <!--end::Title-->
-      </div>
-      <!--end::Card title-->
-
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar m-0">
-        <!--begin::Menu-->
-        <button
-          type="button"
-          class="btn btn-clean btn-sm btn-icon btn-icon-primary btn-active-light-primary me-n3"
-          data-kt-menu-trigger="click"
-          data-kt-menu-placement="bottom-end"
-          data-kt-menu-flip="top-end"
-        >
-          <span class="svg-icon svg-icon-3 svg-icon-primary">
-            <inline-svg :src="getAssetPath('media/icons/duotune/general/gen024.svg')" />
-          </span>
-        </button>
-
-        <Dropdown3></Dropdown3>
-        <!--end::Menu-->
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body d-flex flex-column px-9 pt-6 pb-8">
-      <!--begin::Heading-->
-      <div class="fs-2tx fw-bold mb-3">
-        {{ content }}
-      </div>
-      <!--end::Heading-->
-
-      <!--begin::Stats-->
-      <div class="d-flex align-items-center flex-wrap mb-5 mt-auto fs-6">
-        <span :class="`svg-icon-${color}`" class="svg-icon svg-icon-3 me-1">
-          <inline-svg :src="arrow" />
-        </span>
-
-        <!--begin::Number-->
-        <div :class="`text-${color}`" class="fw-bold me-2">
-          {{ footerData }}
-        </div>
-        <!--end::Number-->
-
-        <!--begin::Label-->
-        <div class="fw-semobold text-gray-400">
-          {{ footerText }}
-        </div>
-        <!--end::Label-->
-      </div>
-      <!--end::Stats-->
-
-      <!--begin::Indicator-->
-      <div class="d-flex align-items-center fw-semobold">
-        <span class="badge bg-light text-gray-700 px-3 py-2 me-2">
-          {{ indicatorValue }}
-        </span>
-
-        <span class="text-gray-400 fs-7">{{ indicatorLabel }}</span>
-      </div>
-      <!--end::Indicator-->
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-import Dropdown3 from "@/components/dropdown/Dropdown3.vue"
-
-export default defineComponent({
-  name: "card-2",
-  components: {
-    Dropdown3,
-  },
-  props: {
-    cardClasses: String,
-
-    icon: String,
-
-    title: String,
-
-    content: String,
-
-    color: String,
-
-    arrow: String,
-
-    footerData: String,
-
-    footerText: String,
-
-    indicatorValue: String,
-
-    indicatorLabel: String,
-  },
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/cards/Card3.vue

@@ -1,107 +0,0 @@
-<template>
-  <!--begin::Col-->
-  <div class="col-md-6 col-xxl-4">
-    <!--begin::Card-->
-    <div class="card" :class="cardClasses">
-      <!--begin::Card body-->
-      <div class="card-body d-flex flex-center flex-column p-9">
-        <!--begin::Avatar-->
-        <div v-if="avatar" class="symbol symbol-65px symbol-circle mb-5">
-          <img :src="avatar" alt="image" />
-          <div
-            v-if="online"
-            class="bg-success position-absolute rounded-circle translate-middle start-100 top-100 border border-4 border-white h-15px w-15px ms-n3 mt-n3"
-          ></div>
-        </div>
-        <div v-else class="symbol symbol-65px symbol-circle mb-5">
-          <span :class="`text-${color} bg-light-${color}`" class="symbol-label fs-2x fw-semobold">{{ initials }}</span>
-          <div
-            v-if="online"
-            class="bg-success position-absolute rounded-circle translate-middle start-100 top-100 border border-4 border-white h-15px w-15px ms-n3 mt-n3"
-          ></div>
-        </div>
-        <!--end::Avatar-->
-
-        <!--begin::Name-->
-        <a href="#" class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0">{{ name }}</a>
-        <!--end::Name-->
-
-        <!--begin::Position-->
-        <div class="fw-semobold text-gray-400 mb-6">{{ position }}</div>
-        <!--end::Position-->
-
-        <!--begin::Info-->
-        <div class="d-flex flex-center flex-wrap mb-5">
-          <!--begin::Stats-->
-          <div class="border border-dashed rounded min-w-125px py-3 px-4 mx-3 mb-3">
-            <div class="fs-6 fw-bold text-gray-700">{{ avgEarnings }}</div>
-            <div class="fw-semobold text-gray-400">Avg. Earnings</div>
-          </div>
-          <!--end::Stats-->
-
-          <!--begin::Stats-->
-          <div class="border border-dashed rounded min-w-125px py-3 px-4 mx-3 mb-3">
-            <div class="fs-6 fw-bold text-gray-700">{{ totalSales }}</div>
-            <div class="fw-semobold text-gray-400">Total Sales</div>
-          </div>
-          <!--end::Stats-->
-        </div>
-        <!--end::Info-->
-
-        <!--begin::Follow-->
-        <a v-if="connected" href="#" class="btn btn-sm btn-light-primary">
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr012.svg')" />
-          </span>
-          Connected
-        </a>
-        <a v-else href="#" class="btn btn-sm btn-light">
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr075.svg')" />
-          </span>
-          Connect
-        </a>
-        <!--end::Follow-->
-      </div>
-      <!--begin::Card body-->
-    </div>
-    <!--begin::Card-->
-  </div>
-  <!--end::Col-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "card-3",
-  components: {},
-  props: {
-    cardClasses: String,
-
-    avatar: String,
-
-    online: Boolean,
-
-    initials: String,
-
-    color: String,
-
-    name: String,
-
-    position: String,
-
-    avgEarnings: String,
-
-    totalSales: String,
-
-    connected: Boolean,
-  },
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/cards/Card4.vue

@@ -1,103 +0,0 @@
-<template>
-  <!--begin::Col-->
-  <div class="col-md-6 col-xxl-4">
-    <!--begin::Card-->
-    <div class="card">
-      <!--begin::Card body-->
-      <div class="card-body d-flex flex-center flex-column p-9">
-        <!--begin::Wrapper-->
-        <div class="mb-5">
-          <div class="symbol symbol-75px symbol-circle">
-            <img v-if="avatar" :src="avatar" alt="" />
-            <span v-else :class="`bg-light-${color} text-${color}`" class="symbol-label fs-5 fw-bold">
-              {{ initials }}
-            </span>
-            <div
-              v-if="online"
-              class="symbol-badge bg-success start-100 top-100 border-4 h-15px w-15px ms-n3 mt-n3"
-            ></div>
-          </div>
-        </div>
-        <!--end::Wrapper-->
-
-        <!--begin::Name-->
-        <a href="#" class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0">{{ name }}</a>
-        <!--end::Name-->
-
-        <!--begin::Position-->
-        <div class="fw-semobold text-gray-400 mb-6">{{ position }}</div>
-        <!--end::Position-->
-
-        <!--begin::Info-->
-        <div class="d-flex flex-center flex-wrap mb-5">
-          <!--begin::Stats-->
-          <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 mx-3 mb-3">
-            <div class="fs-6 fw-bold text-gray-700">{{ avgEarnings }}</div>
-            <div class="fw-semobold text-gray-400">Avg. Earnings</div>
-          </div>
-          <!--end::Stats-->
-
-          <!--begin::Stats-->
-          <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 mx-3 px-4 mb-3">
-            <div class="fs-6 fw-bold text-gray-700">{{ totalSales }}</div>
-            <div class="fw-semobold text-gray-400">Total Sales</div>
-          </div>
-          <!--end::Stats-->
-        </div>
-        <!--end::Info-->
-
-        <!--begin::Link-->
-        <button
-          class="btn btn-sm btn-light-primary fw-bold"
-          data-kt-drawer-toggle="true"
-          data-kt-drawer-target="#kt_drawer_chat"
-          @click="openDrawer()"
-        >
-          Send Message
-        </button>
-        <!--end::Link-->
-      </div>
-      <!--begin::Card body-->
-    </div>
-    <!--begin::Card-->
-  </div>
-  <!--end::Col-->
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-import { DrawerComponent } from "@/assets/ts/components/_DrawerComponent"
-
-export default defineComponent({
-  name: "card-4",
-  components: {},
-  props: {
-    cardClasses: String,
-
-    avatar: String,
-
-    online: Boolean,
-
-    initials: String,
-
-    color: String,
-
-    name: String,
-
-    position: String,
-
-    avgEarnings: String,
-
-    totalSales: String,
-  },
-  setup() {
-    const openDrawer = () => {
-      DrawerComponent?.getInstance("kt_drawer_chat")?.toggle()
-    }
-
-    return {
-      openDrawer,
-    }
-  },
-})
-</script>

src/components/customers/cards/events-and-logs/Events.vue

@@ -1,127 +0,0 @@
-<template>
-  <div :class="`card pt-4 ${cardClasses}`">
-    <!--begin::Card header-->
-    <div class="card-header border-0">
-      <!--begin::Card title-->
-      <div class="card-title">
-        <h2>Events</h2>
-      </div>
-      <!--end::Card title-->
-
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar">
-        <!--begin::Button-->
-        <button type="button" class="btn btn-sm btn-light-primary">
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/files/fil021.svg')" />
-          </span>
-          Download Report
-        </button>
-        <!--end::Button-->
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body py-0">
-      <!--begin::Table-->
-      <table
-        class="table align-middle table-row-dashed fs-6 text-gray-600 fw-semobold gy-5"
-        id="kt_table_customers_events"
-      >
-        <!--begin::Table body-->
-        <tbody>
-          <template v-for="(event, i) in events" :key="i">
-            <tr>
-              <!--begin::Event--->
-              <td class="min-w-400px" v-html="event.event"></td>
-              <!--end::Event--->
-
-              <!--begin::Timestamp--->
-              <td class="pe-0 text-gray-600 text-end min-w-200px">
-                {{ event.date }}
-              </td>
-              <!--end::Timestamp--->
-            </tr>
-          </template>
-        </tbody>
-        <!--end::Table body-->
-      </table>
-      <!--end::Table-->
-    </div>
-    <!--end::Card body-->
-  </div>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-
-export default defineComponent({
-  name: "events-card",
-  props: {
-    cardClasses: String,
-  },
-  components: {},
-  setup() {
-    const events = ref([
-      {
-        event:
-          'Invoice <a href="#" class="fw-bold text-gray-900 text-hover-primary me-1">#LOP-45640</a> has been <span class="badge badge-light-danger">Declined</span>',
-        date: "20 Dec 2021, 5:30 pm",
-      },
-      {
-        event:
-          'Invoice <a href="#" class="fw-bold text-gray-900 text-hover-primary me-1">#DER-45645</a> status has changed from <span class="badge badge-light-info me-1">In Progress</span> to <span class="badge badge-light-primary">In Transit</span>',
-        date: "24 Jun 2021, 5:20 pm",
-      },
-      {
-        event:
-          '<a href="#" class="text-gray-600 text-hover-primary me-1">Melody Macy</a> has made payment to <a href="#" class="fw-bold text-gray-900 text-hover-primary">#XRS-45670</a>',
-        date: "05 May 2021, 11:05 am",
-      },
-      {
-        event:
-          'Invoice <a href="#" class="fw-bold text-gray-900 text-hover-primary me-1">#KIO-45656</a> status has changed from <span class="badge badge-light-succees me-1">In Transit</span> to <span class="badge badge-light-success">Approved</span>',
-        date: "20 Dec 2021, 6:43 am",
-      },
-      {
-        event:
-          '<a href="#" class="text-gray-600 text-hover-primary me-1">Max Smith</a> has made payment to <a href="#" class="fw-bold text-gray-900 text-hover-primary">#XRS-45670</a>',
-        date: "10 Nov 2021, 9:23 pm",
-      },
-      {
-        event:
-          'Invoice <a href="#" class="fw-bold text-gray-900 text-hover-primary me-1">#SEP-45656</a> status has changed from <span class="badge badge-light-warning me-1">Pending</span> to <span class="badge badge-light-info">In Progress</span>',
-        date: "22 Sep 2021, 5:30 pm",
-      },
-      {
-        event:
-          '<a href="#" class="text-gray-600 text-hover-primary me-1">Emma Smith</a> has made payment to <a href="#" class="fw-bold text-gray-900 text-hover-primary">#SDK-45670</a>',
-        date: "25 Jul 2021, 8:43 pm",
-      },
-      {
-        event:
-          '<a href="#" class="text-gray-600 text-hover-primary me-1">Melody Macy</a> has made payment to <a href="#" class="fw-bold text-gray-900 text-hover-primary">#XRS-45670</a>',
-        date: "05 May 2021, 2:40 pm",
-      },
-      {
-        event:
-          '<a href="#" class="text-gray-600 text-hover-primary me-1">Emma Smith</a> has made payment to <a href="#" class="fw-bold text-gray-900 text-hover-primary">#OLP-45690</a>',
-        date: "25 Oct 2021, 10:30 am",
-      },
-      {
-        event:
-          'Invoice <a href="#" class="fw-bold text-gray-900 text-hover-primary me-1">#WER-45670</a> is <span class="badge badge-light-info">In Progress</span>',
-        date: "10 Mar 2021, 9:23 pm",
-      },
-    ])
-
-    return {
-      events,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/customers/cards/events-and-logs/Logs.vue

@@ -1,165 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div :class="`card pt-4 ${cardClasses}`">
-    <!--begin::Card header-->
-    <div class="card-header border-0">
-      <!--begin::Card title-->
-      <div class="card-title">
-        <h2>Logs</h2>
-      </div>
-      <!--end::Card title-->
-
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar">
-        <!--begin::Button-->
-        <button type="button" class="btn btn-sm btn-light-primary">
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/files/fil021.svg')" />
-          </span>
-          Download Report
-        </button>
-        <!--end::Button-->
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body py-0">
-      <!--begin::Table wrapper-->
-      <div class="table-responsive">
-        <!--begin::Table-->
-        <table
-          class="table align-middle table-row-dashed fw-semobold text-gray-600 fs-6 gy-5"
-          id="kt_table_customers_logs"
-        >
-          <!--begin::Table body-->
-          <tbody>
-            <template v-for="(log, i) in logs" :key="i">
-              <tr>
-                <!--begin::Badge--->
-                <td class="min-w-70px">
-                  <div :class="`badge badge-light-${log.color}`">
-                    {{ log.code }}
-                  </div>
-                </td>
-                <!--end::Badge--->
-
-                <!--begin::Status--->
-                <td>
-                  {{ log.message }}
-                </td>
-                <!--end::Status--->
-
-                <!--begin::Timestamp--->
-                <td class="pe-0 text-end min-w-200px">
-                  {{ log.date }}
-                </td>
-                <!--end::Timestamp--->
-              </tr>
-            </template>
-          </tbody>
-          <!--end::Table body-->
-        </table>
-        <!--end::Table-->
-      </div>
-      <!--end::Table wrapper-->
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-
-export default defineComponent({
-  name: "logs-card",
-  components: {},
-  props: {
-    cardClasses: String,
-  },
-  setup() {
-    const logs = ref([
-      {
-        code: "200 OK",
-        color: "success",
-        message: "POST /v1/invoices/in_5806_7068/payment",
-        date: "10 Mar 2021, 11:05 am",
-      },
-      {
-        code: "404 WRN",
-        color: "warning",
-        message: "POST /v1/customer/in_9092_7391/not_found",
-        date: "15 Apr 2021, 6:43 am",
-      },
-      {
-        code: "200 OK",
-        color: "success",
-        message: "POST /v1/invoices/in_9757_6897/payment",
-        date: "15 Apr 2021, 6:43 am",
-      },
-      {
-        code: "500 ERR",
-        color: "danger",
-        message: "POST /v1/invoice/c_6140090460c97/invalid",
-        date: "10 Nov 2021, 2:40 pm",
-      },
-      {
-        code: "200 OK",
-        color: "success",
-        message: "POST /v1/invoices/c_6140090460c99/payment",
-        date: "05 May 2021, 10:10 pm",
-      },
-      {
-        code: "500 ERR",
-        color: "danger",
-        message: "POST /v1/invoice/c_6140090460c97/invalid",
-        date: "20 Dec 2021, 11:05 am",
-      },
-      {
-        code: "200 OK",
-        color: "success",
-        message: "POST /v1/invoices/in_5806_7068/payment",
-        date: "10 Mar 2021, 8:43 pm",
-      },
-      {
-        code: "404 WRN",
-        color: "warning",
-        message: "POST /v1/customer/c_6140090460c99/not_found",
-        date: "20 Dec 2021, 2:40 pm",
-      },
-      {
-        code: "200 OK",
-        color: "success",
-        message: "POST /v1/invoices/c_6140090460c97/payment",
-        date: "25 Oct 2021, 11:05 am",
-      },
-      {
-        code: "404 WRN",
-        color: "warning",
-        message: "POST /v1/customer/in_8377_7366/not_found",
-        date: "19 Aug 2021, 6:43 am",
-      },
-      {
-        code: "200 OK",
-        color: "success",
-        message: "POST /v1/invoices/in_6370_5796/payment",
-        date: "25 Oct 2021, 11:05 am",
-      },
-      {
-        code: "500 ERR",
-        color: "danger",
-        message: "POST /v1/invoice/in_9092_7391/invalid",
-        date: "20 Dec 2021, 11:05 am",
-      },
-    ])
-
-    return {
-      logs,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/customers/cards/overview/CreditBalance.vue

@@ -1,61 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div :class="`card pt-4 ${cardClasses}`">
-    <!--begin::Card header-->
-    <div class="card-header border-0">
-      <!--begin::Card title-->
-      <div class="card-title">
-        <h2 class="fw-bold">Credit Balance</h2>
-      </div>
-      <!--end::Card title-->
-
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar">
-        <a
-          href="#"
-          class="btn btn-sm btn-flex btn-light-primary"
-          data-bs-toggle="modal"
-          data-bs-target="#kt_modal_adjust_balance"
-        >
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/art/art005.svg')" />
-          </span>
-          Adjust Balance
-        </a>
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body pt-0">
-      <div class="fw-bold fs-2">
-        $32,487.57
-        <span class="text-muted fs-4 fw-semobold">USD</span>
-        <div class="fs-7 fw-normal text-muted">
-          Balance will increase the amount due on the customer's next invoice.
-        </div>
-      </div>
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "credit-bilance",
-  props: {
-    cardClasses: String,
-  },
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/customers/cards/overview/Invoices.vue

@@ -1,635 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div :class="`card pt-2 ${cardClasses}`">
-    <!--begin::Card header-->
-    <div class="card-header border-0">
-      <!--begin::Card title-->
-      <div class="card-title">
-        <h2>Invoices</h2>
-      </div>
-      <!--end::Card title-->
-
-      <!--begin::Toolbar-->
-      <div class="card-toolbar m-0">
-        <!--begin::Tab nav-->
-        <ul class="nav nav-stretch fs-5 fw-semobold nav-line-tabs nav-line-tabs-2x border-transparent" role="tablist">
-          <li class="nav-item" role="presentation">
-            <a
-              id="kt_referrals_year_tab"
-              class="nav-link text-active-primary active"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_details_invoices_1"
-            >
-              This Year
-            </a>
-          </li>
-
-          <li class="nav-item" role="presentation">
-            <a
-              id="kt_referrals_2019_tab"
-              class="nav-link text-active-primary ms-3"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_details_invoices_2"
-            >
-              2020
-            </a>
-          </li>
-
-          <li class="nav-item" role="presentation">
-            <a
-              id="kt_referrals_2018_tab"
-              class="nav-link text-active-primary ms-3"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_details_invoices_3"
-            >
-              2019
-            </a>
-          </li>
-
-          <li class="nav-item" role="presentation">
-            <a
-              id="kt_referrals_2017_tab"
-              class="nav-link text-active-primary ms-3"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_details_invoices_4"
-            >
-              2018
-            </a>
-          </li>
-        </ul>
-        <!--end::Tab nav-->
-      </div>
-      <!--end::Toolbar-->
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body pt-0">
-      <!--begin::Tab Content-->
-      <div id="kt_referred_users_tab_content" class="tab-content">
-        <div id="kt_customer_details_invoices_1" class="py-0 tab-pane fade active show" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData1"
-            :items-per-page="5"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:status="{ row: invoice }">
-              <span :class="`badge badge-light-${invoice.status.state}`">{{ invoice.status.label }}</span>
-            </template>
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-        <div id="kt_customer_details_invoices_2" class="py-0 tab-pane fade" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData2"
-            :items-per-page="5"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:status="{ row: invoice }">
-              <span :class="`badge badge-light-${invoice.status.state}`">{{ invoice.status.label }}</span>
-            </template>
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-        <div id="kt_customer_details_invoices_3" class="py-0 tab-pane fade" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData3"
-            :items-per-page="5"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:status="{ row: invoice }">
-              <span :class="`badge badge-light-${invoice.status.state}`">{{ invoice.status.label }}</span>
-            </template>
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-        <div id="kt_customer_details_invoices_4" class="py-0 tab-pane fade" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData4"
-            :items-per-page="5"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:status="{ row: invoice }">
-              <span :class="`badge badge-light-${invoice.status.state}`">{{ invoice.status.label }}</span>
-            </template>
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-      </div>
-      <!--end::Tab Content-->
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue"
-import Datatable from "@/components/kt-datatable/KTDataTable.vue"
-
-export default defineComponent({
-  name: "invoices-card",
-  props: {
-    cardClasses: String,
-  },
-  components: {
-    Datatable,
-  },
-  setup() {
-    const tableHeader = ref([
-      {
-        columnName: "Order id",
-        columnLabel: "order",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Amount",
-        columnLabel: "amount",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Status",
-        columnLabel: "status",
-        sortingField: "status.label",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Date",
-        columnLabel: "date",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Invoice",
-        columnLabel: "invoice",
-        sortEnabled: false,
-      },
-    ])
-    const tableData1 = ref([
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Sep 15, 2020",
-        order: "312445984",
-        details: "Iphone 12 Pro Mockup  Mega Bundle",
-        color: "success",
-        amount: "$5.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "May 30, 2020",
-        order: "523445943",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-1.30",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Apr 22, 2020",
-        order: "231445943",
-        details: "Parcel Shipping / Delivery Service App",
-        color: "success",
-        amount: "$204.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-    const tableData2 = ref([
-      {
-        date: "May 30, 2020",
-        order: "523445943",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-1.30",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Apr 22, 2020",
-        order: "231445943",
-        details: "Parcel Shipping / Delivery Service App",
-        color: "success",
-        amount: "$204.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Sep 15, 2020",
-        order: "312445984",
-        details: "Iphone 12 Pro Mockup  Mega Bundle",
-        color: "success",
-        amount: "$5.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-    const tableData3 = ref([
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Sep 15, 2020",
-        order: "312445984",
-        details: "Iphone 12 Pro Mockup  Mega Bundle",
-        color: "success",
-        amount: "$5.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "May 30, 2020",
-        order: "523445943",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-1.30",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Apr 22, 2020",
-        order: "231445943",
-        details: "Parcel Shipping / Delivery Service App",
-        color: "success",
-        amount: "$204.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-    const tableData4 = ref([
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-
-    return { tableHeader, tableData1, tableData2, tableData3, tableData4 }
-  },
-})
-</script>

src/components/customers/cards/overview/PaymentMethods.vue

@@ -1,599 +0,0 @@
-<template>
-  <div :class="`card pt-4 ${cardClasses}`">
-    <!--begin::Card header-->
-    <div class="card-header border-0">
-      <!--begin::Card title-->
-      <div class="card-title">
-        <h2 class="fw-bold mb-0">Payment Methods</h2>
-      </div>
-      <!--end::Card title-->
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar">
-        <a
-          href="#"
-          class="btn btn-sm btn-flex btn-light-primary"
-          data-bs-toggle="modal"
-          data-bs-target="#kt_modal_new_card"
-        >
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/general/gen035.svg')" />
-          </span>
-          Add new method
-        </a>
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end::Card header-->
-    <!--begin::Card body-->
-    <div id="kt_customer_view_payment_method" class="card-body pt-0">
-      <!--begin::Option-->
-      <div class="py-0" data-kt-customer-payment-method="row">
-        <!--begin::Header-->
-        <div class="py-3 d-flex flex-stack flex-wrap">
-          <!--begin::Toggle-->
-          <div
-            class="d-flex align-items-center collapsible rotate collapsed"
-            data-bs-toggle="collapse"
-            href="#kt_customer_view_payment_method_1"
-            role="button"
-            aria-expanded="false"
-            aria-controls="kt_customer_view_payment_method_1"
-          >
-            <!--begin::Arrow-->
-            <div class="me-3 rotate-90">
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr071.svg')" />
-              </span>
-            </div>
-            <!--end::Arrow-->
-            <!--begin::Logo-->
-            <img :src="getAssetPath('media/svg/card-logos/mastercard.svg')" class="w-40px me-3" alt="" />
-            <!--end::Logo-->
-            <!--begin::Summary-->
-            <div class="me-3">
-              <div class="d-flex align-items-center">
-                <div class="text-gray-800 fw-bold">Mastercard</div>
-                <div class="badge badge-light-primary ms-5">Primary</div>
-              </div>
-              <div class="text-muted">Expires Dec 2024</div>
-            </div>
-            <!--end::Summary-->
-          </div>
-          <!--end::Toggle-->
-          <!--begin::Toolbar-->
-          <div class="d-flex my-3 ms-9">
-            <!--begin::Edit-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
-              data-bs-toggle="modal"
-              data-bs-target="#kt_modal_new_card"
-            >
-              <span data-bs-toggle="tooltip" data-bs-trigger="hover" title="" data-bs-original-title="Edit">
-                <span class="svg-icon svg-icon-3">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/art/art005.svg')" />
-                </span>
-              </span>
-            </a>
-            <!--end::Edit-->
-            <!--begin::Delete-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
-              data-bs-toggle="tooltip"
-              title=""
-              data-kt-customer-payment-method="delete"
-              data-bs-original-title="Delete"
-            >
-              <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/general/gen027.svg')" />
-              </span>
-            </a>
-            <!--end::Delete-->
-            <!--begin::More-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px"
-              data-bs-toggle="tooltip"
-              title=""
-              data-kt-menu-trigger="click"
-              data-kt-menu-placement="bottom-end"
-              data-bs-original-title="More Options"
-            >
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/general/gen019.svg')" />
-              </span>
-            </a>
-            <!--begin::Menu-->
-            <div
-              class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold w-150px py-3"
-              data-kt-menu="true"
-            >
-              <!--begin::Menu item-->
-              <div class="menu-item px-3">
-                <a href="#" class="menu-link px-3" data-kt-payment-mehtod-action="set_as_primary">Set as Primary</a>
-              </div>
-              <!--end::Menu item-->
-            </div>
-            <!--end::Menu-->
-            <!--end::More-->
-          </div>
-          <!--end::Toolbar-->
-        </div>
-        <!--end::Header-->
-        <!--begin::Body-->
-        <div
-          id="kt_customer_view_payment_method_1"
-          class="fs-6 ps-10 collapse"
-          data-bs-parent="#kt_customer_view_payment_method"
-          style=""
-        >
-          <!--begin::Details-->
-          <div class="d-flex flex-wrap py-5">
-            <!--begin::Col-->
-            <div class="flex-equal me-5">
-              <table class="table table-flush fw-semobold gy-1">
-                <tbody>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Name</td>
-                    <td class="text-gray-800">Emma Smith</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Number</td>
-                    <td class="text-gray-800">**** 9916</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Expires</td>
-                    <td class="text-gray-800">12/2024</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Type</td>
-                    <td class="text-gray-800">Mastercard credit card</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Issuer</td>
-                    <td class="text-gray-800">VICBANK</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">ID</td>
-                    <td class="text-gray-800">id_4325df90sdf8</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!--end::Col-->
-            <!--begin::Col-->
-            <div class="flex-equal">
-              <table class="table table-flush fw-semobold gy-1">
-                <tbody>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Billing address</td>
-                    <td class="text-gray-800">AU</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Phone</td>
-                    <td class="text-gray-800">No phone provided</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Email</td>
-                    <td class="text-gray-800">
-                      <a href="#" class="text-gray-900 text-hover-primary">e.smith@kpmg.com.au</a>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Origin</td>
-                    <td class="text-gray-800">
-                      Australia
-                      <div class="symbol symbol-20px symbol-circle ms-2">
-                        <img :src="getAssetPath('media/flags/australia.svg')" />
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">CVC check</td>
-                    <td class="text-gray-800">
-                      Passed
-                      <span class="svg-icon svg-icon-2 svg-icon-success">
-                        <inline-svg :src="getAssetPath('/media/icons/duotune/general/gen043.svg')" />
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!--end::Col-->
-          </div>
-          <!--end::Details-->
-        </div>
-        <!--end::Body-->
-      </div>
-      <!--end::Option-->
-      <div class="separator separator-dashed"></div>
-      <!--begin::Option-->
-      <div class="py-0" data-kt-customer-payment-method="row">
-        <!--begin::Header-->
-        <div class="py-3 d-flex flex-stack flex-wrap">
-          <!--begin::Toggle-->
-          <div
-            class="d-flex align-items-center collapsible rotate collapsed"
-            data-bs-toggle="collapse"
-            href="#kt_customer_view_payment_method_2"
-            role="button"
-            aria-expanded="false"
-            aria-controls="kt_customer_view_payment_method_2"
-          >
-            <!--begin::Arrow-->
-            <div class="me-3 rotate-90">
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr071.svg')" />
-              </span>
-            </div>
-            <!--end::Arrow-->
-            <!--begin::Logo-->
-            <img :src="getAssetPath('media/svg/card-logos/visa.svg')" class="w-40px me-3" alt="" />
-            <!--end::Logo-->
-            <!--begin::Summary-->
-            <div class="me-3">
-              <div class="d-flex align-items-center">
-                <div class="text-gray-800 fw-bold">Visa</div>
-              </div>
-              <div class="text-muted">Expires Feb 2022</div>
-            </div>
-            <!--end::Summary-->
-          </div>
-          <!--end::Toggle-->
-          <!--begin::Toolbar-->
-          <div class="d-flex my-3 ms-9">
-            <!--begin::Edit-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
-              data-bs-toggle="modal"
-              data-bs-target="#kt_modal_new_card"
-            >
-              <span data-bs-toggle="tooltip" data-bs-trigger="hover" title="" data-bs-original-title="Edit">
-                <span class="svg-icon svg-icon-3">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/art/art005.svg')" />
-                </span>
-              </span>
-            </a>
-            <!--end::Edit-->
-            <!--begin::Delete-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
-              data-bs-toggle="tooltip"
-              title=""
-              data-kt-customer-payment-method="delete"
-              data-bs-original-title="Delete"
-            >
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/general/gen027.svg')" />
-              </span>
-            </a>
-            <!--end::Delete-->
-            <!--begin::More-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px"
-              data-bs-toggle="tooltip"
-              title=""
-              data-kt-menu-trigger="click"
-              data-kt-menu-placement="bottom-end"
-              data-bs-original-title="More Options"
-            >
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/general/gen019.svg')" />
-              </span>
-            </a>
-            <!--begin::Menu-->
-            <div
-              class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold w-150px py-3"
-              data-kt-menu="true"
-            >
-              <!--begin::Menu item-->
-              <div class="menu-item px-3">
-                <a href="#" class="menu-link px-3" data-kt-payment-mehtod-action="set_as_primary">Set as Primary</a>
-              </div>
-              <!--end::Menu item-->
-            </div>
-            <!--end::Menu-->
-            <!--end::More-->
-          </div>
-          <!--end::Toolbar-->
-        </div>
-        <!--end::Header-->
-        <!--begin::Body-->
-        <div
-          id="kt_customer_view_payment_method_2"
-          class="fs-6 ps-10 collapse"
-          data-bs-parent="#kt_customer_view_payment_method"
-          style=""
-        >
-          <!--begin::Details-->
-          <div class="d-flex flex-wrap py-5">
-            <!--begin::Col-->
-            <div class="flex-equal me-5">
-              <table class="table table-flush fw-semobold gy-1">
-                <tbody>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Name</td>
-                    <td class="text-gray-800">Melody Macy</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Number</td>
-                    <td class="text-gray-800">**** 5459</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Expires</td>
-                    <td class="text-gray-800">02/2022</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Type</td>
-                    <td class="text-gray-800">Visa credit card</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Issuer</td>
-                    <td class="text-gray-800">ENBANK</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">ID</td>
-                    <td class="text-gray-800">id_w2r84jdy723</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!--end::Col-->
-            <!--begin::Col-->
-            <div class="flex-equal">
-              <table class="table table-flush fw-semobold gy-1">
-                <tbody>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Billing address</td>
-                    <td class="text-gray-800">UK</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Phone</td>
-                    <td class="text-gray-800">No phone provided</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Email</td>
-                    <td class="text-gray-800">
-                      <a href="#" class="text-gray-900 text-hover-primary">melody@altbox.com</a>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Origin</td>
-                    <td class="text-gray-800">
-                      United Kingdom
-                      <div class="symbol symbol-20px symbol-circle ms-2">
-                        <img :src="getAssetPath('media/flags/united-kingdom.svg')" />
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">CVC check</td>
-                    <td class="text-gray-800">
-                      Passed
-
-                      <span class="svg-icon svg-icon-2 svg-icon-success">
-                        <inline-svg :src="getAssetPath('/media/icons/duotune/arrows/arr012.svg')" />
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!--end::Col-->
-          </div>
-          <!--end::Details-->
-        </div>
-        <!--end::Body-->
-      </div>
-      <!--end::Option-->
-      <div class="separator separator-dashed"></div>
-      <!--begin::Option-->
-      <div class="py-0" data-kt-customer-payment-method="row">
-        <!--begin::Header-->
-        <div class="py-3 d-flex flex-stack flex-wrap">
-          <!--begin::Toggle-->
-          <div
-            class="d-flex align-items-center collapsible collapsed rotate"
-            data-bs-toggle="collapse"
-            href="#kt_customer_view_payment_method_3"
-            role="button"
-            aria-expanded="false"
-            aria-controls="kt_customer_view_payment_method_3"
-          >
-            <!--begin::Arrow-->
-            <div class="me-3 rotate-90">
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr071.svg')" />
-              </span>
-            </div>
-            <!--end::Arrow-->
-            <!--begin::Logo-->
-            <img :src="getAssetPath('media/svg/card-logos/american-express.svg')" class="w-40px me-3" alt="" />
-            <!--end::Logo-->
-            <!--begin::Summary-->
-            <div class="me-3">
-              <div class="d-flex align-items-center">
-                <div class="text-gray-800 fw-bold">American Express</div>
-                <div class="badge badge-light-danger ms-5">Expired</div>
-              </div>
-              <div class="text-muted">Expires Aug 2021</div>
-            </div>
-            <!--end::Summary-->
-          </div>
-          <!--end::Toggle-->
-          <!--begin::Toolbar-->
-          <div class="d-flex my-3 ms-9">
-            <!--begin::Edit-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
-              data-bs-toggle="modal"
-              data-bs-target="#kt_modal_new_card"
-            >
-              <span data-bs-toggle="tooltip" data-bs-trigger="hover" title="" data-bs-original-title="Edit">
-                <span class="svg-icon svg-icon-3">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/art/art005.svg')" />
-                </span>
-              </span>
-            </a>
-            <!--end::Edit-->
-            <!--begin::Delete-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px me-3"
-              data-bs-toggle="tooltip"
-              title=""
-              data-kt-customer-payment-method="delete"
-              data-bs-original-title="Delete"
-            >
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/general/gen027.svg')" />
-              </span>
-            </a>
-            <!--end::Delete-->
-            <!--begin::More-->
-            <a
-              href="#"
-              class="btn btn-icon btn-active-light-primary w-30px h-30px"
-              data-bs-toggle="tooltip"
-              title=""
-              data-kt-menu-trigger="click"
-              data-kt-menu-placement="bottom-end"
-              data-bs-original-title="More Options"
-            >
-              <span class="svg-icon svg-icon-3">
-                <inline-svg :src="getAssetPath('media/icons/duotune/general/gen019.svg')" />
-              </span>
-            </a>
-            <!--begin::Menu-->
-            <div
-              class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold w-150px py-3"
-              data-kt-menu="true"
-            >
-              <!--begin::Menu item-->
-              <div class="menu-item px-3">
-                <a href="#" class="menu-link px-3" data-kt-payment-mehtod-action="set_as_primary">Set as Primary</a>
-              </div>
-              <!--end::Menu item-->
-            </div>
-            <!--end::Menu-->
-            <!--end::More-->
-          </div>
-          <!--end::Toolbar-->
-        </div>
-        <!--end::Header-->
-        <!--begin::Body-->
-        <div
-          id="kt_customer_view_payment_method_3"
-          class="collapse fs-6 ps-10"
-          data-bs-parent="#kt_customer_view_payment_method"
-        >
-          <!--begin::Details-->
-          <div class="d-flex flex-wrap py-5">
-            <!--begin::Col-->
-            <div class="flex-equal me-5">
-              <table class="table table-flush fw-semobold gy-1">
-                <tbody>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Name</td>
-                    <td class="text-gray-800">Max Smith</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Number</td>
-                    <td class="text-gray-800">**** 5029</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Expires</td>
-                    <td class="text-gray-800">08/2021</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Type</td>
-                    <td class="text-gray-800">American express credit card</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Issuer</td>
-                    <td class="text-gray-800">USABANK</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">ID</td>
-                    <td class="text-gray-800">id_89457jcje63</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!--end::Col-->
-            <!--begin::Col-->
-            <div class="flex-equal">
-              <table class="table table-flush fw-semobold gy-1">
-                <tbody>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Billing address</td>
-                    <td class="text-gray-800">US</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Phone</td>
-                    <td class="text-gray-800">No phone provided</td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Email</td>
-                    <td class="text-gray-800">
-                      <a href="#" class="text-gray-900 text-hover-primary">max@kt.com</a>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">Origin</td>
-                    <td class="text-gray-800">
-                      United States of America
-                      <div class="symbol symbol-20px symbol-circle ms-2">
-                        <img :src="getAssetPath('media/flags/united-states.svg')" />
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td class="text-muted min-w-125px w-125px">CVC check</td>
-                    <td class="text-gray-800">
-                      Failed
-
-                      <span class="svg-icon svg-icon-2 svg-icon-danger">
-                        <inline-svg :src="getAssetPath('/media/icons/duotune/arrows/arr061.svg')" />
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <!--end::Col-->
-          </div>
-          <!--end::Details-->
-        </div>
-        <!--end::Body-->
-      </div>
-      <!--end::Option-->
-    </div>
-    <!--end::Card body-->
-  </div>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "payment-methods",
-  props: {
-    cardClasses: String,
-  },
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/customers/cards/overview/PaymentRecords.vue

@@ -1,336 +0,0 @@
-<template>
-  <!--begin::Card-->
-  <div :class="`card pt-4 ${cardClasses}`">
-    <!--begin::Card header-->
-    <div class="card-header border-0">
-      <!--begin::Card title-->
-      <div class="card-title">
-        <h2>Payment Records</h2>
-      </div>
-      <!--end::Card title-->
-
-      <!--begin::Card toolbar-->
-      <div class="card-toolbar">
-        <!--begin::Filter-->
-        <button
-          type="button"
-          class="btn btn-sm btn-flex btn-light-primary"
-          data-bs-toggle="modal"
-          data-bs-target="#kt_modal_add_payment"
-        >
-          <span class="svg-icon svg-icon-3">
-            <inline-svg :src="getAssetPath('media/icons/duotune/general/gen035.svg')" />
-          </span>
-          Add payment
-        </button>
-        <!--end::Filter-->
-      </div>
-      <!--end::Card toolbar-->
-    </div>
-    <!--end::Card header-->
-
-    <!--begin::Card body-->
-    <div class="card-body pt-0 pb-5">
-      <Datatable :header="tableHeader" :data="tableData" :items-per-page="5" :items-per-page-dropdown-enabled="false">
-        <template v-slot:invoice="{ row: payment }">
-          {{ payment.invoice }}
-        </template>
-        <template v-slot:status="{ row: payment }">
-          <span :class="`badge badge-light-${payment.status.state}`">{{ payment.status.label }}</span>
-        </template>
-        <template v-slot:amount="{ row: payment }">
-          {{ payment.amount }}
-        </template>
-        <template v-slot:date="{ row: payment }">
-          {{ payment.date }}
-        </template>
-        <template v-slot:actions="{ row: payment }">
-          <a
-            href="#"
-            class="btn btn-sm btn-light btn-active-light-primary"
-            data-kt-menu-trigger="click"
-            data-kt-menu-placement="bottom-end"
-            data-kt-menu-flip="top-end"
-          >
-            Actions
-            <span class="svg-icon svg-icon-5 m-0">
-              <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr072.svg')" />
-            </span>
-          </a>
-          <!--begin::Menu-->
-          <div
-            class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold fs-7 w-125px py-4"
-            data-kt-menu="true"
-          >
-            <!--begin::Menu item-->
-            <div class="menu-item px-3">
-              <router-link to="/apps/customers/customer-details" class="menu-link px-3">View</router-link>
-            </div>
-            <!--end::Menu item-->
-            <!--begin::Menu item-->
-            <div class="menu-item px-3">
-              <a @click="deleteRecord(payment.invoice)" class="menu-link px-3">Delete</a>
-            </div>
-            <!--end::Menu item-->
-          </div>
-          <!--end::Menu-->
-        </template>
-      </Datatable>
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Card-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-import Datatable from "@/components/kt-datatable/KTDataTable.vue"
-
-export default defineComponent({
-  name: "payment-records",
-  props: {
-    cardClasses: String,
-  },
-  components: {
-    Datatable,
-  },
-  setup() {
-    const tableHeader = ref([
-      {
-        columnName: "Invoice No.",
-        columnLabel: "invoice",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Status",
-        columnLabel: "status",
-        sortingField: "status.label",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Amount",
-        columnLabel: "amount",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Date",
-        columnLabel: "date",
-        sortEnabled: false,
-      },
-      {
-        columnName: "Actions",
-        columnLabel: "actions",
-        sortEnabled: false,
-      },
-    ])
-    const tableData = ref([
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Payment for invoice",
-        amount: "$880.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-        date: "21 Oct 2020, 5:54 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Monthly utilites",
-        amount: "$7,650.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "19 Oct 2020, 7:32 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Payment for invoice",
-        amount: "$375.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "23 Sep 2020, 12:38 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Hosting Fees",
-        amount: "$129.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "11 Sep 2020, 3:18 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Marketing automation",
-        amount: "$450.00",
-        status: {
-          label: "Rejected",
-          state: "danger",
-        },
-        date: "03 Sep 2020, 1:08 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Sales injection",
-        amount: "$8,700.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-        date: "01 Sep 2020, 4:58 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Payment for invoice",
-        amount: "$1,200.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "14 Dec 2020, 8:43 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Google cloud subscription",
-        amount: "$79.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "01 Dec 2020, 10:12 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Capital investment",
-        amount: "$5,500.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "12 Nov 2020, 2:01 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Payment for invoice",
-        amount: "$880.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-        date: "21 Oct 2020, 5:54 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Monthly utilites",
-        amount: "$7,650.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "19 Oct 2020, 7:32 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Payment for invoice",
-        amount: "$375.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "23 Sep 2020, 12:38 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Hosting Fees",
-        amount: "$129.00",
-        status: {
-          label: "Successful",
-          state: "success",
-        },
-        date: "11 Sep 2020, 3:18 pm",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Marketing automation",
-        amount: "$450.00",
-        status: {
-          label: "Rejected",
-          state: "danger",
-        },
-        date: "03 Sep 2020, 1:08 am",
-      },
-      {
-        invoice:
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000) +
-          "-" +
-          Math.floor(Math.random() * (9999 - 1000 + 1) + 1000),
-        description: "Sales injection",
-        amount: "$8,700.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-        date: "01 Sep 2020, 4:58 pm",
-      },
-    ])
-
-    const deleteRecord = (invoice: string) => {
-      for (let i = 0; i < tableData.value.length; i++) {
-        if (tableData.value[i].invoice === invoice) {
-          tableData.value.splice(i, 1)
-        }
-      }
-    }
-
-    return { tableHeader, tableData, deleteRecord, getAssetPath }
-  },
-})
-</script>

src/components/customers/cards/statments/Earnings.vue

@@ -1,84 +0,0 @@
-<template>
-  <!--begin::Earnings-->
-  <div :class="`card ${cardClasses}`">
-    <!--begin::Header-->
-    <div class="card-header border-0">
-      <div class="card-title">
-        <h2>Earnings</h2>
-      </div>
-    </div>
-    <!--end::Header-->
-
-    <!--begin::Body-->
-    <div class="card-body py-0">
-      <div class="fs-5 fw-semobold text-gray-500 mb-4">
-        Last 30 day earnings calculated. Apart from arranging the order of topics.
-      </div>
-
-      <!--begin::Left Section-->
-      <div class="d-flex flex-wrap flex-stack mb-5">
-        <!--begin::Row-->
-        <div class="d-flex flex-wrap">
-          <!--begin::Col-->
-          <div class="border border-dashed border-gray-300 w-150px rounded my-3 p-4 me-6">
-            <span class="fs-1 fw-bold text-gray-800 lh-1">
-              <span data-kt-countup="true" data-kt-countup-value="6,840" data-kt-countup-prefix="$">6,840$</span>
-              <span class="svg-icon svg-icon-1 svg-icon-success">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr066.svg')" />
-              </span>
-            </span>
-            <span class="fs-6 fw-semobold text-muted d-block lh-1 pt-2">Net Earnings</span>
-          </div>
-          <!--end::Col-->
-
-          <!--begin::Col-->
-          <div class="border border-dashed border-gray-300 w-125px rounded my-3 p-4 me-6">
-            <span class="fs-1 fw-bold text-gray-800 lh-1">
-              <span class="" data-kt-countup="true" data-kt-countup-value="16">16</span>
-              %
-              <span class="svg-icon svg-icon-1 svg-icon-danger">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr065.svg')" />
-              </span>
-            </span>
-            <span class="fs-6 fw-semobold text-muted d-block lh-1 pt-2">Change</span>
-          </div>
-          <!--end::Col-->
-
-          <!--begin::Col-->
-          <div class="border border-dashed border-gray-300 w-150px rounded my-3 p-4 me-6">
-            <span class="fs-1 fw-bold text-gray-800 lh-1">
-              <span data-kt-countup="true" data-kt-countup-value="1,240" data-kt-countup-prefix="$">1,240$</span>
-              <span class="text-primary">--</span>
-            </span>
-            <span class="fs-6 fw-semobold text-muted d-block lh-1 pt-2">Fees</span>
-          </div>
-          <!--end::Col-->
-        </div>
-        <!--end::Row-->
-
-        <a href="#" class="btn btn-sm btn-light-primary flex-shrink-0">Withdraw Earnings</a>
-      </div>
-      <!--end::Left Section-->
-    </div>
-    <!--end::Body-->
-  </div>
-  <!--end::Earnings-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "earnings-card",
-  props: {
-    cardClasses: String,
-  },
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/customers/cards/statments/Statement.vue

@@ -1,630 +0,0 @@
-<template>
-  <!--begin::Statements-->
-  <div :class="`card ${cardClasses}`">
-    <!--begin::Header-->
-    <div class="card-header">
-      <!--begin::Title-->
-      <div class="card-title">
-        <h2>Statement</h2>
-      </div>
-      <!--end::Title-->
-
-      <!--begin::Toolbar-->
-      <div class="card-toolbar">
-        <!--begin::Tab nav-->
-        <ul class="nav nav-stretch fs-5 fw-semobold nav-line-tabs nav-line-tabs-2x border-transparent" role="tablist">
-          <li class="nav-item" role="presentation">
-            <a
-              class="nav-link text-active-primary active"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_view_statement_1"
-            >
-              This Year
-            </a>
-          </li>
-
-          <li class="nav-item" role="presentation">
-            <a
-              class="nav-link text-active-primary ms-3"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_view_statement_2"
-            >
-              2020
-            </a>
-          </li>
-
-          <li class="nav-item" role="presentation">
-            <a
-              class="nav-link text-active-primary ms-3"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_view_statement_3"
-            >
-              2019
-            </a>
-          </li>
-
-          <li class="nav-item" role="presentation">
-            <a
-              class="nav-link text-active-primary ms-3"
-              data-bs-toggle="tab"
-              role="tab"
-              href="#kt_customer_view_statement_4"
-            >
-              2018
-            </a>
-          </li>
-        </ul>
-        <!--end::Tab nav-->
-      </div>
-      <!--end::Toolbar-->
-    </div>
-    <!--end::Header-->
-
-    <!--begin::Card body-->
-    <div class="card-body pb-5">
-      <!--begin::Tab Content-->
-      <div id="kt_customer_view_statement_tab_content" class="tab-content">
-        <div id="kt_customer_view_statement_1" class="py-0 tab-pane fade active show" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData1"
-            :items-per-page="10"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:details="{ row: invoice }">
-              {{ invoice.details }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-        <div id="kt_customer_view_statement_2" class="py-0 tab-pane fade" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData2"
-            :items-per-page="10"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:details="{ row: invoice }">
-              {{ invoice.details }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-        <div id="kt_customer_view_statement_3" class="py-0 tab-pane fade" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData3"
-            :items-per-page="10"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:details="{ row: invoice }">
-              {{ invoice.details }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-        <div id="kt_customer_view_statement_4" class="py-0 tab-pane fade" role="tabpanel">
-          <Datatable
-            :header="tableHeader"
-            :data="tableData4"
-            :items-per-page="10"
-            :items-per-page-dropdown-enabled="false"
-          >
-            <template v-slot:date="{ row: invoice }">
-              {{ invoice.date }}
-            </template>
-            <template v-slot:order="{ row: invoice }">
-              {{ invoice.order }}
-            </template>
-            <template v-slot:details="{ row: invoice }">
-              {{ invoice.details }}
-            </template>
-            <template v-slot:amount="{ row: invoice }">
-              <span :class="`text-${invoice.color}`">
-                {{ invoice.amount }}
-              </span>
-            </template>
-            <template v-slot:invoice>
-              <button class="btn btn-sm btn-light btn-active-light-primary">Download</button>
-            </template>
-          </Datatable>
-        </div>
-      </div>
-      <!--end::Tab Content-->
-    </div>
-    <!--end::Card body-->
-  </div>
-  <!--end::Statements-->
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue"
-import Datatable from "@/components/kt-datatable/KTDataTable.vue"
-
-export default defineComponent({
-  name: "statement-card",
-  props: {
-    cardClasses: String,
-  },
-  components: {
-    Datatable,
-  },
-  setup() {
-    const tableHeader = ref([
-      {
-        columnName: "Date",
-        columnLabel: "date",
-        sortEnabled: true,
-      },
-      {
-        columnName: "Order id",
-        columnLabel: "order",
-        sortEnabled: true,
-      },
-      {
-        columnName: "Details",
-        columnLabel: "details",
-        sortEnabled: true,
-      },
-      {
-        columnName: "Amount",
-        columnLabel: "amount",
-        sortEnabled: true,
-      },
-      {
-        columnName: "Invoice",
-        columnLabel: "invoice",
-        sortEnabled: false,
-      },
-    ])
-    const tableData1 = ref([
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Sep 15, 2020",
-        order: "312445984",
-        details: "Iphone 12 Pro Mockup  Mega Bundle",
-        color: "success",
-        amount: "$5.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "May 30, 2020",
-        order: "523445943",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-1.30",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Apr 22, 2020",
-        order: "231445943",
-        details: "Parcel Shipping / Delivery Service App",
-        color: "success",
-        amount: "$204.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-    const tableData2 = ref([
-      {
-        date: "May 30, 2020",
-        order: "523445943",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-1.30",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Apr 22, 2020",
-        order: "231445943",
-        details: "Parcel Shipping / Delivery Service App",
-        color: "success",
-        amount: "$204.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Sep 15, 2020",
-        order: "312445984",
-        details: "Iphone 12 Pro Mockup  Mega Bundle",
-        color: "success",
-        amount: "$5.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-    const tableData3 = ref([
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Sep 15, 2020",
-        order: "312445984",
-        details: "Iphone 12 Pro Mockup  Mega Bundle",
-        color: "success",
-        amount: "$5.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "May 30, 2020",
-        order: "523445943",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-1.30",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Apr 22, 2020",
-        order: "231445943",
-        details: "Parcel Shipping / Delivery Service App",
-        color: "success",
-        amount: "$204.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-    const tableData4 = ref([
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "102445788",
-        details: "Darknight transparency  36 Icons Pack",
-        color: "success",
-        amount: "$38.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 24, 2020",
-        order: "423445721",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-2.60",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Feb 09, 2020",
-        order: "426445943",
-        details: "Visual Design Illustration",
-        color: "success",
-        amount: "$31.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Nov 01, 2020",
-        order: "984445943",
-        details: "Abstract Vusial Pack",
-        color: "success",
-        amount: "$52.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Jan 04, 2020",
-        order: "324442313",
-        details: "Seller Fee",
-        color: "danger",
-        amount: "$-0.80",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-      {
-        date: "Oct 08, 2020",
-        order: "312445984",
-        details: "Cartoon Mobile Emoji Phone Pack",
-        color: "success",
-        amount: "$76.00",
-        status: {
-          label: "Pending",
-          state: "warning",
-        },
-      },
-    ])
-
-    return { tableHeader, tableData1, tableData2, tableData3, tableData4 }
-  },
-})
-</script>

src/components/devs/Questions.vue

@@ -1,264 +0,0 @@
-<template>
-  <!--begin::Questions-->
-  <div class="mb-10">
-    <template v-for="(question, i) in questions" :key="i">
-      <!--begin::Question-->
-      <div class="mb-0">
-        <!--begin::Head-->
-        <div class="d-flex align-items-center mb-4">
-          <!--begin::Title-->
-          <router-link to="/apps/devs/question" class="fs-2 fw-bold text-gray-900 text-hover-primary me-1">
-            {{ question.title }}
-          </router-link>
-          <!--end::Title-->
-
-          <!--begin::Icons-->
-          <div class="d-flex align-items-center">
-            <template v-for="(icon, i) in question.icons" :key="i">
-              <span class="ms-1" data-bs-toggle="tooltip" :title="icon.tooltip">
-                <span :class="`svg-icon svg-icon-1 ${icon.class}`">
-                  <inline-svg :src="icon.path" />
-                </span>
-              </span>
-            </template>
-          </div>
-          <!--end::Icons-->
-        </div>
-        <!--end::Head-->
-
-        <!--begin::Summary-->
-        <div class="fs-base fw-normal text-gray-700 mb-4">
-          {{ question.summary }}
-        </div>
-        <!--end::Summary-->
-
-        <!--begin::Foot-->
-        <div class="d-flex flex-stack flex-wrap">
-          <!--begin::Author-->
-          <div class="d-flex align-items-center py-1">
-            <!--begin::Symbol-->
-            <div class="symbol symbol-35px me-2">
-              <img v-if="question.avatar" :src="question.avatar" alt="user" />
-              <div v-else class="symbol-label bg-light-success fs-3 fw-semobold text-success text-uppercase">
-                {{ question.author[0] }}
-              </div>
-            </div>
-            <!--end::Symbol-->
-
-            <!--begin::Name-->
-            <div class="d-flex flex-column align-items-start justify-content-center">
-              <span class="text-gray-900 fs-7 fw-semobold lh-1 mb-2">{{ question.author }}</span>
-              <span class="text-muted fs-8 fw-semobold lh-1">{{ question.date }}</span>
-            </div>
-            <!--end::Name-->
-          </div>
-          <!--end::Author-->
-
-          <!--begin::Info-->
-          <div class="d-flex align-items-center py-1">
-            <!--begin::Answers-->
-            <a to="/apps/devs/question" class="btn btn-sm btn-outline btn-outline-dashed btn-outline-default px-4 me-2">
-              {{ question.answers }}
-              Answers
-            </a>
-            <!--end::Answers-->
-
-            <!--begin::Tags-->
-            <template v-for="(tag, i) in question.tags" :key="i">
-              <a href="#" class="btn btn-sm btn-light px-4 me-2">
-                {{ tag }}
-              </a>
-            </template>
-            <!--end::Tags-->
-
-            <!--begin::Upvote-->
-            <a
-              href="#"
-              class="btn btn-sm btn-flex btn-light"
-              :class="`${question.upvotes ? 'btn-icons' : 'px-3'}`"
-              data-bs-toggle="tooltip"
-              title="Upvote this question"
-              data-bs-dismiss="click"
-            >
-              {{ question.upvotes }}
-              <span class="svg-icon svg-icon-7" :class="`${question.upvotes ? '' : 'ms-2 me-0'}`">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr062.svg')" />
-              </span>
-            </a>
-            <!--end::Upvote-->
-          </div>
-          <!--end::Info-->
-        </div>
-        <!--end::Foot-->
-      </div>
-      <!--end::Question-->
-
-      <!--begin::Separator-->
-      <div class="separator separator-dashed border-gray-300 my-8"></div>
-      <!--end::Separator-->
-    </template>
-
-    <div class="d-flex flex-center mb-0">
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">1</a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2 active">
-        2
-      </a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">3</a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">4</a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">5</a>
-      <span class="text-muted fw-semobold fs-6 mx-2">..</span>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">19</a>
-    </div>
-  </div>
-  <!--end::Questions-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-
-interface IIcon {
-  path: string
-  class: string
-  tooltip: string
-}
-
-interface IQuestion {
-  title: string
-  summary: string
-  author: string
-  date: string
-  avatar: string | undefined
-  answers: string
-  upvotes: string
-  icons: Array<IIcon>
-  tags: Array<string>
-}
-
-export default defineComponent({
-  name: "dev-questions",
-  components: {},
-  setup() {
-    const questions = ref<Array<IQuestion>>([
-      {
-        title: "How to use Metronic with Django Framework ?",
-        summary:
-          "I’ve been doing some ajax request, to populate a inside drawer, the content of that drawer has a sub menu, that you are using in list and all card toolbar.",
-        author: "James Hunt",
-        date: "24 minutes ago",
-        avatar: undefined,
-        answers: "16",
-        upvotes: "23",
-        icons: [
-          {
-            path: getAssetPath("media/icons/duotune/general/gen045.svg"),
-            class: "svg-icon-primary",
-            tooltip: "New question",
-          },
-          {
-            path: getAssetPath("media/icons/duotune/communication/com010.svg"),
-            class: "svg-icon-danger",
-            tooltip: "User replied",
-          },
-        ],
-        tags: ["Metronic"],
-      },
-      {
-        title: "When to expect new version of Laravel ?",
-        summary:
-          "When approx. is the next update for the Laravel version planned? Waiting for the CRUD, 2nd factor etc. features before starting my project. Also can we expect the Laravel + Vue version in the next update ?",
-        author: "Sandra Piquet",
-        date: "1 day ago",
-        avatar: getAssetPath("media/avatars/300-2.jpg"),
-        answers: "2",
-        upvotes: "4",
-        icons: [
-          {
-            path: getAssetPath("media/icons/duotune/general/gen044.svg"),
-            class: "svg-icon-warning",
-            tooltip: "In-process",
-          },
-        ],
-        tags: ["Pre-sale"],
-      },
-      {
-        title: "Could not get Demo 7 working",
-        summary:
-          "could not get demo7 working from latest metronic version. Had a lot of issues installing, I had to downgrade my npm to 6.14.4 as someone else recommended here in the comments, this goot it to compile but when I ran it, the browser showed errors TypeErr..",
-        author: "Niko Roseberg",
-        date: "2 days ago",
-        avatar: undefined,
-        answers: "4",
-        upvotes: "",
-        icons: [
-          {
-            path: getAssetPath("media/icons/duotune/general/gen044.svg"),
-            class: "svg-icon-warning",
-            tooltip: "In-process",
-          },
-        ],
-        tags: ["Angular"],
-      },
-      {
-        title: "I want to get refund",
-        summary:
-          "Your Metronic theme is so good but the reactjs version is typescript only. The description did not write any warn about it. Since I only know javascript, I can not do anything with your theme. I want to refund.",
-        author: "Alex Bold",
-        date: "1 day ago",
-        avatar: getAssetPath("media/avatars/300-23.jpg"),
-        answers: "22",
-        upvotes: "11",
-        icons: [
-          {
-            path: getAssetPath("media/icons/duotune/general/gen043.svg"),
-            class: "svg-icon-success",
-            tooltip: "Resolved",
-          },
-        ],
-        tags: ["React", "Demo 1"],
-      },
-      {
-        title: "How to integrate Metronic with Blazor Server Side ?",
-        summary:
-          "could not get demo7 working from latest metronic version. Had a lot of issues installing, I had to downgrade my npm to 6.14.4 as someone else recommended here in the comments, this goot it to compile but when I ran it, the browser showed errors TypeErr..",
-        author: "Tim Nilson",
-        date: "3 days ago",
-        avatar: undefined,
-        answers: "44",
-        upvotes: "3",
-        icons: [
-          {
-            path: getAssetPath("media/icons/duotune/general/gen043.svg"),
-            class: "svg-icon-success",
-            tooltip: "In-process",
-          },
-        ],
-        tags: ["Blazor"],
-      },
-      {
-        title: "Using Metronic with .NET multi tenant application",
-        summary:
-          "When approx. is the next update for the Laravel version planned? Waiting for the CRUD, 2nd factor etc. features before starting my project. Also can we expect the Laravel + Vue version in the next update ?",
-        author: "Ana Quil",
-        date: "5 days ago",
-        avatar: getAssetPath("media/avatars/300-10.jpg"),
-        answers: "2",
-        upvotes: "4",
-        icons: [
-          {
-            path: getAssetPath("media/icons/duotune/general/gen043.svg"),
-            class: "svg-icon-success",
-            tooltip: "Resolved",
-          },
-        ],
-        tags: ["Aspdotnet"],
-      },
-    ])
-
-    return {
-      questions,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/devs/Replies.vue

@@ -1,153 +0,0 @@
-<template>
-  <!--begin::Heading-->
-  <a id="answers" data-kt-scroll-offset="{default: 100, lg: 125}"></a>
-  <h2 class="fw-bold text-gray-900 mb-10">Replies(14)</h2>
-  <!--end::Heading-->
-
-  <!--begin::Replies-->
-  <div class="mb-10">
-    <template v-for="(reply, i) in replies" :key="i">
-      <!--begin::Reply-->
-      <div :class="`border rounded p-2 p-lg-6 mb-10 ${reply.indent}`">
-        <!--begin::Wrapper-->
-        <div class="mb-0">
-          <!--begin::Foot-->
-          <div class="d-flex flex-stack flex-wrap mb-5">
-            <!--begin::Author-->
-            <div class="d-flex align-items-center py-1">
-              <!--begin::Symbol-->
-              <div class="symbol symbol-35px me-2">
-                <img v-if="reply.avatar" :src="reply.avatar" alt="user" />
-                <div v-else class="symbol-label bg-light-success fs-3 fw-semobold text-success text-uppercase">
-                  {{ reply.author[0] }}
-                </div>
-              </div>
-              <!--end::Symbol-->
-
-              <!--begin::Name-->
-              <div class="d-flex flex-column align-items-start justify-content-center">
-                <span class="text-gray-800 fs-7 fw-semobold lh-1 mb-2">{{ reply.author }}</span>
-                <span class="text-muted fs-8 fw-semobold lh-1">{{ reply.date }}</span>
-              </div>
-              <!--end::Name-->
-            </div>
-            <!--end::Author-->
-
-            <!--begin::Info-->
-            <div class="d-flex align-items-center py-1">
-              <!--begin::Reply-->
-              <a href="#" class="btn btn-sm btn-flex btn-color-gray-500 btn-active-light me-1">Reply</a>
-              <!--end::Reply-->
-
-              <!--begin::Upvote-->
-              <a
-                href="#"
-                :class="`btn btn-sm btn-flex btn-light ${reply.upvotes ? 'btn-icon' : 'px-3'}`"
-                data-bs-toggle="tooltip"
-                title="Upvote"
-                data-bs-dismiss="click"
-              >
-                {{ reply.upvotes }}
-                <span :class="`svg-icon svg-icon-7 ${reply.upvotes ? '' : 'mx-2 me-0'}`">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr062.svg')" />
-                </span>
-              </a>
-              <!--end::Upvote-->
-            </div>
-            <!--end::Info-->
-          </div>
-          <!--end::Foot-->
-
-          <!--begin::Message-->
-          <div class="fs-5 fw-normal text-gray-800">
-            {{ reply.message }}
-          </div>
-          <!--end::Message-->
-        </div>
-        <!--end::Wrapper-->
-
-        <!--begin::Replies-->
-        <div class="ps-10 mb-0"></div>
-        <!--end::Replies-->
-      </div>
-      <!--end::Reply-->
-    </template>
-
-    <div class="d-flex flex-center mb-0">
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">1</a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2 active">
-        2
-      </a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">3</a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">4</a>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">5</a>
-      <span class="text-muted fw-semobold fs-6 mx-2">..</span>
-      <a href="#" class="btn btn-icon btn-light btn-active-light-primary h-30px w-30px fw-semobold fs-6 mx-2">19</a>
-    </div>
-  </div>
-  <!--end::Replies-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-
-export default defineComponent({
-  name: "dev-replies",
-  components: {},
-  setup() {
-    const replies = ref([
-      {
-        message:
-          "I’ve been doing some ajax request, to populate a inside drawer, the content of that drawer has a sub menu, that you are using in list and all card toolbar.",
-        author: "Sandra Piquet",
-        date: "24 minutes ago",
-        avatar: getAssetPath("media/avatars/300-2.jpg"),
-        upvotes: "",
-        indent: "",
-      },
-      {
-        message:
-          "I’ve been doing some ajax request, to populate a inside drawer, the content of that drawer has a sub menu, that you are using in list and all card toolbar.",
-        author: "Niko Roseberg",
-        date: "1 day ago",
-        avatar: undefined,
-        upvotes: "2",
-        indent: "ms-5 ms-lg-10",
-      },
-      {
-        message:
-          "I’ve been doing some ajax request, to populate a inside drawer, the content of that drawer has a sub menu, that you are using in list and all card toolbar.",
-        author: "Sandra Piquet",
-        date: "24 minutes ago",
-        avatar: getAssetPath("media/avatars/300-12.jpg"),
-        upvotes: "6",
-        indent: "",
-      },
-      {
-        message:
-          "I’ve been doing some ajax request, to populate a inside drawer, the content of that drawer has a sub menu, that you are using in list and all card toolbar.",
-        author: "Sandra Piquet",
-        date: "24 minutes ago",
-        avatar: undefined,
-        upvotes: "4",
-        indent: "",
-      },
-      {
-        message:
-          "I’ve been doing some ajax request, to populate a inside drawer, the content of that drawer has a sub menu, that you are using in list and all card toolbar.",
-        author: "Niko Roseberg",
-        date: "1 day ago",
-        avatar: getAssetPath("media/avatars/300-20.jpg"),
-        upvotes: "",
-        indent: "",
-      },
-    ])
-
-    return {
-      replies,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/devs/TextFormatting.vue

@@ -1,77 +0,0 @@
-<template>
-  <!--begin::Formating info-->
-  <div class="collapse" id="kt_devs_ask_formatting">
-    <div class="pt-3 mb-5 fs-6">Here's a how to add some HTML formatting to your comment:</div>
-
-    <ul class="list-unstyled p-0 mb-10">
-      <li class="py-1 fs-6">
-        <b>&lt;strong&gt;&lt;/strong&gt;</b>
-        &nbsp;to make things bold
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;em&gt;&lt;/em&gt;</b>
-        &nbsp;to emphasize
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;ul&gt;&lt;li&gt;</b>
-        &nbsp;or
-        <b>&lt;ol&gt;&lt;li&gt;</b>
-        &nbsp; to make lists
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;h3&gt;</b>
-        &nbsp;or
-        <b>&lt;h4&gt;</b>
-        &nbsp;to make headings
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;pre&gt;&lt;/pre&gt;</b>
-        &nbsp;for code blocks
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;code&gt;&lt;/code&gt;</b>
-        &nbsp;for a few words of code
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;a&gt;&lt;/a&gt;</b>
-        &nbsp;for links
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;img&gt;</b>
-        &nbsp;to paste in an image
-      </li>
-      <li class="py-1 fs-6">
-        <b>&lt;blockquote&gt;&lt;/blockquote&gt;</b>
-        &nbsp;to quote somebody
-      </li>
-      <li class="py-1 fs-6">
-        <img alt="happy" :src="getAssetPath('media/smiles/happy.png')" />
-        &nbsp;&nbsp;:)
-      </li>
-      <li class="py-1 fs-6">
-        <img alt="shocked" :src="getAssetPath('media/smiles/shocked.png')" />
-        &nbsp;&nbsp;:|
-      </li>
-      <li class="py-1 fs-6">
-        <img alt="sad" :src="getAssetPath('media/smiles/sad.png')" />
-        &nbsp;&nbsp;:(
-      </li>
-    </ul>
-  </div>
-  <!--end::Formating info-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "text-formatting",
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/dropdown/Dropdown1.vue

@@ -1,119 +0,0 @@
-<template>
-  <!--begin::Menu 1-->
-  <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true">
-    <!--begin::Header-->
-    <div class="px-7 py-5">
-      <div class="fs-5 text-dark fw-bold">Filter Options</div>
-    </div>
-    <!--end::Header-->
-
-    <!--begin::Menu separator-->
-    <div class="separator border-gray-200"></div>
-    <!--end::Menu separator-->
-
-    <!--begin::Form-->
-    <div class="px-7 py-5">
-      <!--begin::Input group-->
-      <div class="mb-10">
-        <!--begin::Label-->
-        <label class="form-label fw-semobold">Status:</label>
-        <!--end::Label-->
-
-        <!--begin::Input-->
-        <div>
-          <select class="form-select form-select-solid select2-hidden-accessible" v-model="data.status">
-            <option label="Approved" value="1">Approved</option>
-            <option label="Pending" value="2">Pending</option>
-            <option label="In Process" value="3">In Process</option>
-            <option label="Rejected" value="4">Rejected</option>
-          </select>
-        </div>
-        <!--end::Input-->
-      </div>
-      <!--end::Input group-->
-
-      <!--begin::Input group-->
-      <div class="mb-10">
-        <!--begin::Label-->
-        <label class="form-label fw-semobold">Member Type:</label>
-        <!--end::Label-->
-
-        <!--begin::Options-->
-        <div class="d-flex">
-          <!--begin::Options-->
-          <label class="form-check form-check-sm form-check-custom form-check-solid me-5">
-            <input class="form-check-input" type="checkbox" value="1" v-model="data.author" />
-            <span class="form-check-label user-select-none">Author</span>
-          </label>
-          <!--end::Options-->
-
-          <!--begin::Options-->
-          <label class="form-check form-check-sm form-check-custom form-check-solid">
-            <input class="form-check-input" type="checkbox" value="2" v-model="data.customer" />
-            <span class="form-check-label user-select-none">Customer</span>
-          </label>
-          <!--end::Options-->
-        </div>
-        <!--end::Options-->
-      </div>
-      <!--end::Input group-->
-
-      <!--begin::Input group-->
-      <div class="mb-10">
-        <!--begin::Label-->
-        <label class="form-label fw-semobold">Notifications:</label>
-        <!--end::Label-->
-
-        <!--begin::Switch-->
-        <div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
-          <label class="form-check-label">
-            <input class="form-check-input" type="checkbox" name="notifications" v-model="data.notifications" />
-            <span class="form-check-label user-select-none">Enabled</span>
-          </label>
-        </div>
-        <!--end::Switch-->
-      </div>
-      <!--end::Input group-->
-
-      <!--begin::Actions-->
-      <div class="d-flex justify-content-end">
-        <button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">
-          Reset
-        </button>
-
-        <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
-      </div>
-      <!--end::Actions-->
-    </div>
-    <!--end::Form-->
-  </div>
-  <!--end::Menu 1-->
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue"
-
-interface Filter {
-  status: string
-  author: boolean
-  customer: boolean
-  notifications: boolean
-}
-
-export default defineComponent({
-  name: "dropdown-1",
-  components: {},
-  setup() {
-    const data = ref<Filter>({
-      status: "1",
-      author: true,
-      customer: true,
-      notifications: true,
-    })
-
-    return {
-      data,
-    }
-  },
-})
-</script>

src/components/dropdown/Dropdown2.vue

@@ -1,95 +0,0 @@
-<template>
-  <!--begin::Menu 2-->
-  <div
-    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semobold w-200px"
-    data-kt-menu="true"
-  >
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu separator-->
-    <div class="separator mb-3 opacity-75"></div>
-    <!--end::Menu separator-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <a href="#" class="menu-link px-3">New Ticket</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <a href="#" class="menu-link px-3">New Customer</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div
-      class="menu-item px-3"
-      data-kt-menu-trigger="hover"
-      data-kt-menu-placement="right-start"
-      data-kt-menu-flip="left-start, top"
-    >
-      <!--begin::Menu item-->
-      <a href="#" class="menu-link px-3">
-        <span class="menu-title">New Group</span>
-        <span class="menu-arrow"></span>
-      </a>
-      <!--end::Menu item-->
-
-      <!--begin::Menu sub-->
-      <div class="menu-sub menu-sub-dropdown w-175px py-4">
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-3">Admin Group</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-3">Staff Group</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-3">Member Group</a>
-        </div>
-        <!--end::Menu item-->
-      </div>
-      <!--end::Menu sub-->
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <a href="#" class="menu-link px-3">New Contact</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu separator-->
-    <div class="separator mt-3 opacity-75"></div>
-    <!--end::Menu separator-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <div class="menu-content px-3 py-3">
-        <a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
-      </div>
-    </div>
-    <!--end::Menu item-->
-  </div>
-  <!--end::Menu 2-->
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "dropdown-2",
-  components: {},
-})
-</script>

src/components/dropdown/Dropdown3.vue

@@ -1,124 +0,0 @@
-<template>
-  <!--begin::Menu-->
-  <div
-    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semobold py-4 w-250px fs-6"
-    data-kt-menu="true"
-  >
-    <!--begin::Menu item-->
-    <div class="menu-item px-5">
-      <div class="menu-content text-muted pb-2 px-5 fs-7 text-uppercase">Payments</div>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5">
-      <a href="#" class="menu-link px-5">Create invoice</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5">
-      <a href="#" class="menu-link flex-stack px-5">
-        Create payments
-
-        <i
-          class="fas fa-exclamation-circle ms-2 fs-7"
-          data-bs-toggle="tooltip"
-          title="Specify a target name for future usage and reference"
-        ></i>
-      </a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5" data-kt-menu-trigger="hover" data-kt-menu-placement="left-start">
-      <a href="#" class="menu-link px-5">
-        <span class="menu-title">Subscription</span>
-        <span class="menu-arrow"></span>
-      </a>
-
-      <!--begin::Menu sub-->
-      <div class="menu-sub menu-sub-dropdown w-175px py-4">
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-5">Apps</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-5">Billing</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-5">Statements</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu separator-->
-        <div class="separator my-2"></div>
-        <!--end::Menu separator-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <div class="menu-content px-3">
-            <label class="form-check form-switch form-check-custom form-check-solid">
-              <input
-                class="form-check-input w-30px h-20px"
-                type="checkbox"
-                value=""
-                name="notifications"
-                checked
-                id="kt_user_menu_notifications"
-              />
-              <span class="form-check-label text-muted fs-6" for="kt_user_menu_notifications">Notifications</span>
-            </label>
-          </div>
-        </div>
-        <!--end::Menu item-->
-      </div>
-      <!--end::Menu sub-->
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu separator-->
-    <div class="separator my-3"></div>
-    <!--end::Menu separator-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5">
-      <div class="menu-content text-muted pb-2 px-5 fs-7 text-uppercase">Account</div>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5">
-      <a href="#" class="menu-link px-5">Reports</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5 my-1">
-      <a href="#" class="menu-link px-5">Account Settings</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-5">
-      <a href="#" class="menu-link text-danger px-5">Delete customer</a>
-    </div>
-    <!--end::Menu item-->
-  </div>
-  <!--end::Menu-->
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "dropdown-3",
-  components: {},
-})
-</script>

src/components/dropdown/Dropdown4.vue

@@ -1,85 +0,0 @@
-<template>
-  <!--begin::Menu 3-->
-  <div
-    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semobold w-200px py-3"
-    data-kt-menu="true"
-  >
-    <!--begin::Heading-->
-    <div class="menu-item px-3">
-      <div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Contacts</div>
-    </div>
-    <!--end::Heading-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_users_search">Add Contact</a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3">
-      <a href="#" class="menu-link flex-stack px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_invite_friends">
-        Invite Contacts
-
-        <i
-          class="fas fa-exclamation-circle ms-2 fs-7"
-          data-bs-toggle="tooltip"
-          title="Specify a contact email to send an invitation"
-        ></i>
-      </a>
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div
-      class="menu-item px-3"
-      data-kt-menu-trigger="hover"
-      data-kt-menu-placement="right-start"
-      data-kt-menu-flip="left, center, top"
-    >
-      <a href="#" class="menu-link px-3">
-        <span class="menu-title">Groups</span>
-        <span class="menu-arrow"></span>
-      </a>
-
-      <!--begin::Menu sub-->
-      <div class="menu-sub menu-sub-dropdown w-175px py-4">
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Create Group</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Invite Members</a>
-        </div>
-        <!--end::Menu item-->
-
-        <!--begin::Menu item-->
-        <div class="menu-item px-3">
-          <a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Settings</a>
-        </div>
-        <!--end::Menu item-->
-      </div>
-      <!--end::Menu sub-->
-    </div>
-    <!--end::Menu item-->
-
-    <!--begin::Menu item-->
-    <div class="menu-item px-3 my-1">
-      <a href="#" class="menu-link px-3" data-bs-toggle="tooltip" title="Coming soon">Settings</a>
-    </div>
-    <!--end::Menu item-->
-  </div>
-  <!--end::Menu 3-->
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "dropdown-5",
-  components: {},
-})
-</script>

src/components/files/File.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="col-12 col-sm-12 col-xl">
-    <!--begin::Card-->
-    <div class="card h-100">
-      <!--begin::Card body-->
-      <div class="card-body d-flex justify-content-center text-center flex-column p-8">
-        <!--begin::Name-->
-        <a href="#" class="text-gray-800 text-hover-primary d-flex flex-column">
-          <!--begin::Image-->
-          <div class="symbol symbol-60px mb-6">
-            <img :src="`media/svg/files/${fileType}.svg`" alt="" />
-          </div>
-          <!--end::Image-->
-
-          <!--begin::Title-->
-          <div class="fs-5 fw-bold mb-2">
-            {{ fileTitle }}
-          </div>
-          <!--end::Title-->
-        </a>
-        <!--end::Name-->
-
-        <!--begin::Description-->
-        <div class="fs-7 fw-semobold text-gray-400 mt-auto">
-          {{ createdAt }}
-        </div>
-        <!--end::Description-->
-      </div>
-      <!--end::Card body-->
-    </div>
-    <!--end::Card-->
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "file-component",
-  props: {
-    fileTitle: String,
-
-    createdAt: String,
-
-    fileType: String,
-  },
-  components: {},
-})
-</script>

src/components/files/Folder.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="col-12 col-sm-12 col-xl">
-    <!--begin::Card-->
-    <div class="card h-100">
-      <!--begin::Card body-->
-      <div class="card-body d-flex justify-content-center text-center flex-column p-8">
-        <!--begin::Name-->
-        <a href="#" class="text-gray-800 text-hover-primary d-flex flex-column">
-          <!--begin::Image-->
-          <div class="symbol symbol-75px mb-6">
-            <img :src="getAssetPath('media/svg/files/folder-document.svg')" alt="" />
-          </div>
-          <!--end::Image-->
-
-          <!--begin::Title-->
-          <div class="fs-5 fw-bold mb-2">Finance</div>
-          <!--end::Title-->
-        </a>
-        <!--end::Name-->
-
-        <!--begin::Description-->
-        <div class="fs-7 fw-semobold text-gray-400 mt-auto">7 files</div>
-        <!--end::Description-->
-      </div>
-      <!--end::Card body-->
-    </div>
-    <!--end::Card-->
-  </div>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "files-component",
-  props: {
-    folderName: String,
-
-    files: String,
-  },
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/page-layouts/Profile.vue

@@ -1,291 +0,0 @@
-<template>
-  <!--begin::Navbar-->
-  <div class="card mb-5 mb-xxl-8">
-    <div class="card-body pt-9 pb-0">
-      <!--begin::Details-->
-      <div class="d-flex flex-wrap flex-sm-nowrap mb-3">
-        <!--begin: Pic-->
-        <div class="me-7 mb-4">
-          <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative">
-            <img :src="getAssetPath('media/avatars/300-1.jpg')" alt="image" />
-            <div
-              class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-white h-20px w-20px"
-            ></div>
-          </div>
-        </div>
-        <!--end::Pic-->
-
-        <!--begin::Info-->
-        <div class="flex-grow-1">
-          <!--begin::Title-->
-          <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
-            <!--begin::User-->
-            <div class="d-flex flex-column">
-              <!--begin::Name-->
-              <div class="d-flex align-items-center mb-2">
-                <a href="#" class="text-gray-800 text-hover-primary fs-2 fw-bold me-1">Max Smith</a>
-                <a href="#">
-                  <span class="svg-icon svg-icon-1 svg-icon-primary">
-                    <inline-svg :src="getAssetPath('media/icons/duotune/general/gen026.svg')" />
-                  </span>
-                </a>
-              </div>
-              <!--end::Name-->
-
-              <!--begin::Info-->
-              <div class="d-flex flex-wrap fw-semobold fs-6 mb-4 pe-2">
-                <a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
-                  <span class="svg-icon svg-icon-4 me-1">
-                    <inline-svg :src="getAssetPath('/media/icons/duotune/communication/com006.svg')" />
-                  </span>
-                  Developer
-                </a>
-                <a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
-                  <span class="svg-icon svg-icon-4 me-1">
-                    <inline-svg :src="getAssetPath('media/icons/duotune/general/gen018.svg')" />
-                  </span>
-                  SF, Bay Area
-                </a>
-                <a href="#" class="d-flex align-items-center text-gray-400 text-hover-primary mb-2">
-                  <span class="svg-icon svg-icon-4 me-1">
-                    <inline-svg :src="getAssetPath('/media/icons/duotune/communication/com011.svg')" />
-                  </span>
-                  max@kt.com
-                </a>
-              </div>
-              <!--end::Info-->
-            </div>
-            <!--end::User-->
-
-            <!--begin::Actions-->
-            <div class="d-flex my-4">
-              <a href="#" class="btn btn-sm btn-light me-2" id="kt_user_follow_button">
-                <span class="svg-icon svg-icon-3 d-none">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr012.svg')" />
-                </span>
-                Follow
-              </a>
-
-              <a
-                href="#"
-                class="btn btn-sm btn-primary me-3"
-                data-bs-toggle="modal"
-                data-bs-target="#kt_modal_offer_a_deal"
-              >
-                Hire Me
-              </a>
-
-              <!--begin::Menu-->
-              <div class="me-0">
-                <button
-                  class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary"
-                  data-kt-menu-trigger="click"
-                  data-kt-menu-placement="bottom-end"
-                  data-kt-menu-flip="top-end"
-                >
-                  <i class="bi bi-three-dots fs-3"></i>
-                </button>
-                <Dropdown3></Dropdown3>
-              </div>
-              <!--end::Menu-->
-            </div>
-            <!--end::Actions-->
-          </div>
-          <!--end::Title-->
-
-          <!--begin::Stats-->
-          <div class="d-flex flex-wrap flex-stack">
-            <!--begin::Wrapper-->
-            <div class="d-flex flex-column flex-grow-1 pe-8">
-              <!--begin::Stats-->
-              <div class="d-flex flex-wrap">
-                <!--begin::Stat-->
-                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
-                  <!--begin::Number-->
-                  <div class="d-flex align-items-center">
-                    <span class="svg-icon svg-icon-3 svg-icon-success me-2">
-                      <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr066.svg')" />
-                    </span>
-                    <div
-                      class="fs-2 fw-bold"
-                      data-kt-countup="true"
-                      data-kt-countup-value="4500"
-                      data-kt-countup-prefix="$"
-                    >
-                      4,500$
-                    </div>
-                  </div>
-                  <!--end::Number-->
-
-                  <!--begin::Label-->
-                  <div class="fw-semobold fs-6 text-gray-400">Earnings</div>
-                  <!--end::Label-->
-                </div>
-                <!--end::Stat-->
-
-                <!--begin::Stat-->
-                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
-                  <!--begin::Number-->
-                  <div class="d-flex align-items-center">
-                    <span class="svg-icon svg-icon-3 svg-icon-danger me-2">
-                      <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr065.svg')" />
-                    </span>
-                    <div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="75">75</div>
-                  </div>
-                  <!--end::Number-->
-
-                  <!--begin::Label-->
-                  <div class="fw-semobold fs-6 text-gray-400">Projects</div>
-                  <!--end::Label-->
-                </div>
-                <!--end::Stat-->
-
-                <!--begin::Stat-->
-                <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
-                  <!--begin::Number-->
-                  <div class="d-flex align-items-center">
-                    <span class="svg-icon svg-icon-3 svg-icon-success me-2">
-                      <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr066.svg')" />
-                    </span>
-                    <div
-                      class="fs-2 fw-bold"
-                      data-kt-countup="true"
-                      data-kt-countup-value="60"
-                      data-kt-countup-prefix="%"
-                    >
-                      60%
-                    </div>
-                  </div>
-                  <!--end::Number-->
-
-                  <!--begin::Label-->
-                  <div class="fw-semobold fs-6 text-gray-400">Success Rate</div>
-                  <!--end::Label-->
-                </div>
-                <!--end::Stat-->
-              </div>
-              <!--end::Stats-->
-            </div>
-            <!--end::Wrapper-->
-
-            <!--begin::Progress-->
-            <div class="d-flex align-items-center w-200px w-sm-300px flex-column mt-3">
-              <div class="d-flex justify-content-between w-100 mt-auto mb-2">
-                <span class="fw-semobold fs-6 text-gray-400">Profile Compleation</span>
-                <span class="fw-bold fs-6">50%</span>
-              </div>
-
-              <div class="h-5px mx-3 w-100 bg-light mb-3">
-                <div
-                  class="bg-success rounded h-5px"
-                  role="progressbar"
-                  style="width: 50%"
-                  aria-valuenow="50"
-                  aria-valuemin="0"
-                  aria-valuemax="100"
-                ></div>
-              </div>
-            </div>
-            <!--end::Progress-->
-          </div>
-          <!--end::Stats-->
-        </div>
-        <!--end::Info-->
-      </div>
-      <!--end::Details-->
-
-      <!--begin::Navs-->
-      <div class="d-flex overflow-auto h-55px">
-        <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold flex-nowrap">
-          <!--begin::Nav item-->
-          <li class="nav-item">
-            <router-link
-              to="/crafted/pages/profile/overview"
-              class="nav-link text-active-primary me-6"
-              active-class="active"
-            >
-              Overview
-            </router-link>
-          </li>
-          <!--end::Nav item-->
-          <!--begin::Nav item-->
-          <li class="nav-item">
-            <router-link
-              class="nav-link text-active-primary me-6"
-              to="/crafted/pages/profile/projects"
-              active-class="active"
-            >
-              Projects
-            </router-link>
-          </li>
-          <!--end::Nav item-->
-          <!--begin::Nav item-->
-          <li class="nav-item">
-            <router-link
-              class="nav-link text-active-primary me-6"
-              to="/crafted/pages/profile/campaigns"
-              active-class="active"
-            >
-              Campaigns
-            </router-link>
-          </li>
-          <!--end::Nav item-->
-          <!--begin::Nav item-->
-          <li class="nav-item">
-            <router-link
-              class="nav-link text-active-primary me-6"
-              to="/crafted/pages/profile/documents"
-              active-class="active"
-            >
-              Documents
-            </router-link>
-          </li>
-          <!--end::Nav item-->
-          <!--begin::Nav item-->
-          <li class="nav-item">
-            <router-link
-              class="nav-link text-active-primary me-6"
-              to="/crafted/pages/profile/connections"
-              active-class="active"
-            >
-              Connections
-            </router-link>
-          </li>
-          <!--end::Nav item-->
-          <!--begin::Nav item-->
-          <li class="nav-item">
-            <router-link
-              class="nav-link text-active-primary me-6"
-              to="/crafted/pages/profile/activity"
-              active-class="active"
-            >
-              Activity
-            </router-link>
-          </li>
-          <!--end::Nav item-->
-        </ul>
-      </div>
-      <!--begin::Navs-->
-    </div>
-  </div>
-  <!--end::Navbar-->
-  <router-view></router-view>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-import Dropdown3 from "@/components/dropdown/Dropdown3.vue"
-
-export default defineComponent({
-  name: "profile-page-layout",
-  components: {
-    Dropdown3,
-  },
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/components/select/DySelectTree.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, toRefs, defineProps, withDefaults, defineEmits, onMounted } from "vue"
-import Treeselect from "vue3-treeselect"
-import "vue3-treeselect/dist/vue3-treeselect.css"
+import Treeselect from "vue3-treeselect-ts"
+import "vue3-treeselect-ts/dist/style.css"
 import type { AxiosRequestConfig } from "axios"
 import Rs from "@/core/services/RequestService"
 interface TreeOption {

src/components/select/DySelectTree2.vue

@@ -1,246 +0,0 @@
-<script setup lang="ts">
-import { ref, toRefs, defineProps, withDefaults, defineEmits, onMounted } from "vue"
-import type { SelectOptionProp, SelectProp } from "@/components/select/DySelect.vue"
-import type { AxiosRequestConfig } from "axios"
-import Rs from "@/core/services/RequestService"
-import type { TreeNode, CheckedInfo } from "element-plus/es/components/tree-v2/src/types"
-export interface TreeSelectOptionProp extends SelectOptionProp {
-  children?: Array<TreeSelectOptionProp>
-}
-export interface TreeSelectProp extends SelectProp {
-  defaultCheckNodes: Array<TreeSelectOptionProp>
-  formatFunction?: (data: any) => TreeSelectOptionProp
-  staticOptions?: Array<TreeSelectOptionProp>
-  filterMethod?: (v: string, o: Array<TreeSelectOptionProp>) => any //自定义筛选方法
-  remoteMethod?: (v: string, o: Array<TreeSelectOptionProp>) => any //远程搜索方法显示后缀图标
-  highlightCurrent?: boolean
-  accordion?: boolean
-  defaultProps?: { value: string; label: string; children: string }
-}
-const props = withDefaults(defineProps<TreeSelectProp>(), {
-  value: "",
-  url: "",
-  configs: undefined,
-  highlightCurrent: true,
-  accordion: true,
-  defaultProps: () => {
-    return {
-      value: "value", // 值字段名
-      label: "label", // 显示名称字段名
-      children: "children", // 子级字段名
-    }
-  },
-  multiple: false,
-  multipleLimit: 0,
-  filterable: false,
-  remote: false,
-  loading: false,
-  loadingText: "加载中...",
-  noMatchText: "没有匹配项",
-  noDataText: "未查询到数据",
-  disabled: false,
-  clearable: false,
-  clearIcon: "CircleClose",
-  effect: "light",
-  size: "default",
-  placement: "bottom-start",
-  autocomplete: "off",
-  placeholder: "请选择",
-  popperClass: "",
-  suffixIcon: "ArrowDown",
-  defaultFirstOption: false,
-  reserveKeyword: true,
-  popperAppendToBody: true,
-  teleported: true,
-  persistent: true,
-  automatiDropdown: false,
-  fitInputWidth: false,
-  validateEvent: false,
-})
-const emits = defineEmits<{
-  (e: "update:value", v: string | number | Array<string> | Array<number>): void
-  (e: "change", v: string | number | Array<string> | Array<number>): void
-  (e: "visible-change", v: boolean): void //下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
-  (e: "remove-tag", v: string | number | Array<string> | Array<number>): void
-  (e: "clear"): void
-  (e: "blur", v: FocusEvent): void
-  (e: "focus", v: FocusEvent): void
-  (e: "node-click", data: any): void
-  (e: "check-change", data: any, isCheck: boolean, halfChecked: boolean): void
-  (e: "check", data: any, checkInfo: CheckedInfo): void
-  (e: "current-change", data: any, node: TreeNode): void
-  (e: "input", v: string | number | Array<string> | Array<number>): void
-}>()
-const { value, url, remote, filterable, loading } = toRefs(props)
-const selectTree = ref<any>(null)
-const treeOption = ref<any>(null)
-const staticOptions = ref<Array<TreeSelectOptionProp>>()
-const options = ref<Array<TreeSelectOptionProp>>(staticOptions.value ?? [])
-let remoteFunction: (v: string) => void
-
-function init() {
-  staticOptions.value = Object.assign([], props.staticOptions || [], formatSelectData(props.data) ?? [])
-  if (props.remoteMethod) {
-    filterable.value = true
-    remote.value = true
-    remoteFunction = (v: string) => {
-      props.remoteMethod && props.remoteMethod(v, options.value)
-      loading.value = false
-    }
-  } else if (props.url) {
-    filterable.value = true
-    remote.value = true
-    const configs = Object.assign({}, { url: url.value, method: "get", successAlert: false }, props.configs)
-    remoteFunction = (query: string) => {
-      if (query) {
-        loading.value = true
-        Rs.request(configs).then((res: any) => {
-          options.value = staticOptions.value ?? []
-          const result = formatSelectData(res.data)
-          result.filter((v: SelectOptionProp) => {
-            return (
-              (v.label as string).toLowerCase().includes(query.toLowerCase()) ||
-              (v.value as string).toLowerCase().includes(query.toLowerCase())
-            )
-          })
-          options.value.push(...result)
-          loading.value = false
-        })
-      } else {
-        options.value = []
-      }
-    }
-  }
-}
-
-function formatSelectData(data: any) {
-  const result: Array<TreeSelectOptionProp> = []
-  data.forEach((v: any) => {
-    let item = {} as TreeSelectOptionProp
-    item = Object.assign({}, v)
-    if (props.formatFunction) {
-      item = props.formatFunction(v)
-    } else if (props.defaultProps) {
-      item.key = v[props.defaultProps.value] + ""
-      item.value = v[props.defaultProps.value] + ""
-      item.label = v[props.defaultProps.label] + ""
-      item.children = v[props.defaultProps.children]
-    } else {
-      if ("value" in v) {
-        item.key = v.value + ""
-        item.value = v.value + ""
-      } else if ("code" in v) {
-        item.key = v.code + ""
-        item.value = v.code + ""
-      }
-      if ("label" in v) {
-        item.label = v.label + ""
-      } else if ("name" in v) {
-        item.label = v.name + ""
-      } else if ("title" in v) {
-        item.label = v.title + ""
-      }
-    }
-    result.push(item)
-  })
-  return result
-}
-function onChange(val: string | number | Array<string> | Array<number>) {
-  emits("update:value", val)
-  emits("change", val)
-}
-function onRemoveTag(val: string | number | Array<string> | Array<number>) {
-  if (props.multiple) {
-    treeOption.value?.setChecked(val, false, false)
-  }
-  emits("remove-tag", val)
-}
-function onVisibleChange(val: boolean) {
-  //下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
-  emits("visible-change", val)
-}
-function onBlur(v: FocusEvent) {
-  emits("blur", v)
-}
-function onFocus(v: FocusEvent) {
-  emits("focus", v)
-}
-function onClear() {
-  emits("clear")
-}
-
-function onCheckNode(node: any) {
-  //node.value = node.id
-  node.currentLabel = node.label
-  selectTree.value.cachedOptions.push(node)
-  selectTree.value.handleOptionSelect(node, true)
-  emits("input", node.value)
-  emits("update:value", node.value)
-}
-onMounted(() => {
-  init()
-})
-</script>
-<template>
-  <el-select
-    ref="selectTree"
-    v-model="value"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :multiple="multiple"
-    :multiple-limit="multipleLimit"
-    :clearable="clearable"
-    :clear-icon="clearIcon"
-    :suffix-icon="suffixIcon"
-    :popper-class="popperClass"
-    :autocomplete="autocomplete"
-    :size="size"
-    :effect="effect"
-    :placement="placement"
-    :filterable="filterable"
-    :remote="remote"
-    :remote-method="remoteFunction"
-    :remote-show-suffix="remoteShowSuffix"
-    :loading="loading"
-    :loading-text="loadingText"
-    :no-match-text="noMatchText"
-    :no-data-text="noDataText"
-    :default-first-option="defaultFirstOption"
-    :popper-append-to-body="popperAppendToBody"
-    :reserve-keyword="reserveKeyword"
-    :teleported="teleported"
-    :persistent="persistent"
-    :automati-dropdown="automatiDropdown"
-    :fit-input-width="fitInputWidth"
-    :validate-event="validateEvent"
-    @change="onChange"
-    @remove-tag="onRemoveTag"
-    @visible-change="onVisibleChange"
-    @blur="onBlur"
-    @focus="onFocus"
-    @clear="onClear"
-  >
-    <el-option>
-      <el-tree
-        ref="treeOption"
-        :show-checkbox="multiple"
-        :default-expanded-keys="defaultCheckNodes"
-        :highlight-current="highlightCurrent"
-        :accordion="accordion"
-        node-key="value"
-        check-on-click-node
-        :data="options"
-        :props="{ value: 'value', label: 'label', children: 'children' }"
-        @check="onCheckNode"
-      />
-    </el-option>
-  </el-select>
-</template>
-
-<style scoped>
-/* 去除tree上面的一行高度 */
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  height: auto;
-  padding: 0;
-}
-</style>

src/core/config/MainMenuConfig.ts

@@ -27,98 +27,3 @@ export interface MenuRouteMap {
   component?: any
   auth?: boolean
 }
-export const MainMenuConfig: Array<MenuRouteMap> = [
-  {
-    path: "/DataBoard",
-    icon: "far fa-window-maximize",
-  },
-  {
-    path: "/DataBoard/index",
-    component: () => import("@/views/dashboard/Index.vue"),
-  },
-  //overAnalysis 告警
-  {
-    path: "/overAnalysis",
-    icon: "fas fa-bell",
-  },
-  {
-    path: "/overAnalysis/overMerchants",
-    component: () => import("@/views/overAnalysis/overMerchants.vue"),
-  },
-  {
-    path: "/overAnalysis/overParam",
-    component: () => import("@/views/overAnalysis/overParam.vue"),
-  },
-  {
-    path: "/overAnalysis/overTime",
-    component: () => import("@/views/overAnalysis/overTime.vue"),
-  },
-  //AnalysisInfo 综合分析
-  {
-    path: "/AnalysisInfo",
-    icon: "far fa-chart-bar",
-  },
-  {
-    path: "/AnalysisInfo/clean",
-    component: () => import("@/views/analysisInfo/clean.vue"),
-  },
-  //purify 清洗管理
-  {
-    path: "/purify",
-    icon: "fas fa-shower",
-  },
-  {
-    path: "/purify/washInfo",
-    component: () => import("@/views/purify/washInfo.vue"),
-  },
-  //goLineData 监测列表
-  {
-    path: "/goLineData",
-    icon: "fas fa-rss-square",
-  },
-  {
-    path: "/goLineData/timeData",
-    component: () => import("@/views/goLineData/timeData.vue"),
-  },
-  {
-    path: "/goLineData/oilFumeConcentration",
-    component: () => import("@/views/goLineData/oilFumeConcentration.vue"),
-  },
-  //mobile 移动督查
-  {
-    path: "/mobile",
-    icon: "fas fa-mobile-alt",
-  },
-  {
-    path: "/mobile/supervision",
-    component: () => import("@/views/mobile/supervision.vue"),
-  },
-  //examApproval 审核审批
-  {
-    path: "/examApproval",
-    icon: "fas fa-edit",
-  },
-  {
-    path: "/examApproval/appReview",
-    component: () => import("@/views/examApproval/appReview.vue"),
-  },
-  {
-    path: "/examApproval/reptNotice",
-    component: () => import("@/views/examApproval/reptNotice.vue"),
-  },
-  //warn 告警管理
-  {
-    path: "/warn",
-    icon: "fas fa-exclamation-triangle",
-  },
-  {
-    path: "/warn/warnList",
-    component: () => import("@/views/warn/warnList.vue"),
-  },
-  {
-    path: "/warn/ouput",
-    component: () => import("@/views/warn/ouput.vue"),
-  },
-]
-
-export default MainMenuConfig

src/core/services/RequestService.ts

@@ -5,7 +5,7 @@ import VueAxios from "vue-axios"
 import JwtService from "@/core/services/JwtService"
 import configs from "@/core/config/Index"
 import { dialog, toast } from "@/core/utils/message"
-import router from "@/router/Index"
+import router from "@/router"
 
 export interface errorObj {
   message: string

src/layouts/main-layout/drawers/Drawers.vue

@@ -1,27 +0,0 @@
-<template>
-  <KTMessengerDrawer />
-  <KTActivityDrawer />
-  <KTToolButtons />
-  <KTDemosDrawer />
-  <KTHelpDrawer />
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-import KTMessengerDrawer from "@/layouts/main-layout/extras/MessengerDrawer.vue"
-import KTActivityDrawer from "@/layouts/main-layout/drawers/ActivityDrawer.vue"
-import KTDemosDrawer from "@/layouts/main-layout/extras/DemosDrawer.vue"
-import KTHelpDrawer from "@/layouts/main-layout/extras/HelpDrawer.vue"
-import KTToolButtons from "@/layouts/main-layout/extras/ToolButtons.vue"
-
-export default defineComponent({
-  name: "global-drawers",
-  components: {
-    KTMessengerDrawer,
-    KTActivityDrawer,
-    KTDemosDrawer,
-    KTHelpDrawer,
-    KTToolButtons,
-  },
-})
-</script>

src/layouts/main-layout/extras/DemosDrawer.vue

@@ -1,255 +0,0 @@
-<template>
-  <!--begin::Demos drawer-->
-  <div
-    id="kt_engage_demos_label"
-    class="bg-body"
-    data-kt-drawer="true"
-    data-kt-drawer-name="explore"
-    data-kt-drawer-activate="true"
-    data-kt-drawer-overlay="true"
-    data-kt-drawer-width="{default:'350px', 'lg': '475px'}"
-    data-kt-drawer-direction="end"
-    data-kt-drawer-toggle="#kt_engage_demos_toggle"
-    data-kt-drawer-close="#kt_engage_demos_close"
-  >
-    <!--begin::Card-->
-    <div class="card shadow-none w-100">
-      <!--begin::Header-->
-      <div class="card-header" id="kt_explore_header">
-        <h3 class="card-title fw-bold text-gray-700">Explore {{ themeName }}</h3>
-
-        <div class="card-toolbar">
-          <button type="button" class="btn btn-sm btn-icon btn-active-light-primary me-n5" id="kt_engage_demos_close">
-            <span class="svg-icon svg-icon-2">
-              <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr061.svg')" />
-            </span>
-          </button>
-        </div>
-      </div>
-      <!--end::Header-->
-
-      <!--begin::Body-->
-      <div class="card-body" id="kt_explore_body">
-        <!--begin::Content-->
-        <div
-          id="kt_explore_scroll"
-          class="scroll-y me-n5 pe-5"
-          data-kt-scroll="true"
-          data-kt-scroll-height="auto"
-          data-kt-scroll-wrappers="#kt_explore_body"
-          data-kt-scroll-dependencies="#kt_explore_header"
-          data-kt-scroll-offset="5px"
-        >
-          <!--begin::Wrapper-->
-          <div class="mb-0">
-            <!--begin::Header-->
-            <div class="mb-7">
-              <div class="d-flex flex-stack">
-                <h3 class="mb-0">Metronic Licenses</h3>
-
-                <a href="https://themeforest.net/licenses/standard" class="fw-semobold" target="_blank">License FAQs</a>
-              </div>
-            </div>
-            <!--end::Header-->
-
-            <!--begin::License-->
-            <div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
-              <div class="d-flex flex-stack">
-                <div class="d-flex flex-column">
-                  <div class="d-flex align-items-center mb-1">
-                    <div class="fs-6 fw-semobold text-gray-800 fw-semobold mb-0 me-1">Regular License</div>
-
-                    <i
-                      class="text-gray-400 fas fa-exclamation-circle ms-1 fs-7"
-                      data-bs-toggle="popover"
-                      data-bs-custom-class="popover-dark"
-                      data-bs-trigger="hover"
-                      data-bs-placement="top"
-                      data-bs-content="Use, by you or one client in a single end product which end users are not charged for."
-                    ></i>
-                  </div>
-                  <div class="fs-7 text-muted">For single end product used by you or one client</div>
-                </div>
-
-                <div class="text-nowrap">
-                  <span class="text-muted fs-7 fw-semobold">$</span>
-                  <span class="text-dark fs-1 fw-bold">39</span>
-                </div>
-              </div>
-            </div>
-            <!--end::License-->
-
-            <!--begin::License-->
-            <div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
-              <div class="d-flex flex-stack">
-                <div class="d-flex flex-column">
-                  <div class="d-flex align-items-center mb-1">
-                    <div class="fs-6 fw-semobold text-gray-800 fw-semobold mb-0 me-1">Extended License</div>
-
-                    <i
-                      class="text-gray-400 fas fa-exclamation-circle ms-1 fs-7"
-                      data-bs-toggle="popover"
-                      data-bs-custom-class="popover-dark"
-                      data-bs-trigger="hover"
-                      data-bs-placement="top"
-                      data-bs-content="Use, by you or one client, in a single end product which end users can be charged for."
-                    ></i>
-                  </div>
-                  <div class="fs-7 text-muted">For single end product with paying users.</div>
-                </div>
-
-                <div class="text-nowrap">
-                  <span class="text-muted fs-7 fw-semobold">$</span>
-                  <span class="text-dark fs-1 fw-bold">939</span>
-                </div>
-              </div>
-            </div>
-            <!--end::License-->
-
-            <!--begin::License-->
-            <div class="rounded border border-dashed border-gray-300 py-4 px-6 mb-5">
-              <div class="d-flex flex-stack">
-                <div class="d-flex flex-column">
-                  <div class="d-flex align-items-center mb-1">
-                    <div class="fs-6 fw-semobold text-gray-800 fw-semobold mb-0 me-1">Custom License</div>
-                  </div>
-                  <div class="fs-7 text-muted">Reach us for custom license offers.</div>
-                </div>
-
-                <div class="text-nowrap">
-                  <a href="https://keenthemes.com/contact/" class="btn btn-sm btn-success" target="_blank">
-                    Contact Us
-                  </a>
-                </div>
-              </div>
-            </div>
-            <!--end::License-->
-
-            <!--begin::Purchase-->
-            <a
-              href="https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469"
-              class="btn btn-primary mb-15 w-100"
-            >
-              Buy Now
-            </a>
-            <!--end::Purchase-->
-
-            <!--begin::Demos-->
-            <div class="mb-0">
-              <h3 class="fw-bold text-center mb-6">{{ themeName }} Vue Demos</h3>
-
-              <!--begin::Row-->
-              <div class="row g-5">
-                <template v-for="(item, i) in demos" :key="i">
-                  <div class="col-6">
-                    <!--begin::Demo-->
-                    <div
-                      :class="`overlay overflow-hidden position-relative ${
-                        demo === item.name ? 'border border-4 border-success' : 'border border-4 border-gray-200'
-                      } rounded`"
-                    >
-                      <div class="overlay-wrapper">
-                        <img
-                          :src="`media/demos/${item.name}.png`"
-                          alt="demo"
-                          :class="`w-100 ${!item.available && 'opacity-75'}`"
-                        />
-                      </div>
-
-                      <div class="overlay-layer bg-dark bg-opacity-10">
-                        <a
-                          v-if="item.available"
-                          :href="`https://preview.keenthemes.com/metronic8/vue/${item.name}`"
-                          class="btn btn-sm btn-success shadow"
-                        >
-                          {{ item.name.charAt(0).toUpperCase() + item.name.slice(1) }}
-                        </a>
-                        <div v-else class="badge badge-white px-6 py-4 fw-semobold fs-base shadow">Coming soon</div>
-                      </div>
-                    </div>
-                    <!--end::Demo-->
-                  </div>
-                </template>
-              </div>
-              <!--end::Row-->
-            </div>
-            <!--end::Demos-->
-          </div>
-          <!--end::Wrapper-->
-        </div>
-        <!--end::Content-->
-      </div>
-      <!--end::Body-->
-    </div>
-    <!--end::Card-->
-  </div>
-  <!--end::Demos drawer-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-import { themeName, demo } from "@/core/helpers/documentation"
-
-export default defineComponent({
-  name: "kt-explore",
-  setup() {
-    const demos = [
-      {
-        name: "demo1",
-        available: true,
-      },
-      {
-        name: "demo2",
-        available: true,
-      },
-      {
-        name: "demo3",
-        available: true,
-      },
-      {
-        name: "demo4",
-        available: true,
-      },
-      {
-        name: "demo5",
-        available: true,
-      },
-      {
-        name: "demo6",
-        available: true,
-      },
-      {
-        name: "demo7",
-        available: true,
-      },
-      {
-        name: "demo8",
-        available: true,
-      },
-      {
-        name: "demo9",
-      },
-      {
-        name: "demo10",
-      },
-      {
-        name: "demo11",
-      },
-      {
-        name: "demo12",
-      },
-      {
-        name: "demo13",
-      },
-    ]
-
-    return {
-      themeName,
-      demos,
-      demo,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/layouts/main-layout/extras/HelpDrawer.vue

@@ -1,224 +0,0 @@
-<template>
-  <!--begin::Help drawer-->
-  <div
-    id="kt_help"
-    class="bg-body"
-    data-kt-drawer="true"
-    data-kt-drawer-name="help"
-    data-kt-drawer-activate="true"
-    data-kt-drawer-overlay="true"
-    data-kt-drawer-width="{default:'350px', 'md': '525px'}"
-    data-kt-drawer-direction="end"
-    data-kt-drawer-toggle="#kt_help_toggle"
-    data-kt-drawer-close="#kt_help_close"
-  >
-    <!--begin::Card-->
-    <div class="card shadow-none rounded-0 w-100">
-      <!--begin::Header-->
-      <div class="card-header" id="kt_help_header">
-        <h5 class="card-title fw-semobold text-gray-600">Learn & Get Inspired</h5>
-
-        <div class="card-toolbar">
-          <button type="button" class="btn btn-sm btn-icon explore-btn-dismiss me-n5" id="kt_help_close">
-            <span class="svg-icon svg-icon-2">
-              <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr061.svg')" />
-            </span>
-          </button>
-        </div>
-      </div>
-      <!--end::Header-->
-
-      <!--begin::Body-->
-      <div class="card-body" id="kt_help_body">
-        <!--begin::Content-->
-        <div
-          id="kt_help_scroll"
-          class="hover-scroll-overlay-y"
-          data-kt-scroll="true"
-          data-kt-scroll-height="auto"
-          data-kt-scroll-wrappers="#kt_help_body"
-          data-kt-scroll-dependencies="#kt_help_header"
-          data-kt-scroll-offset="5px"
-        >
-          <!--begin::Support-->
-          <div class="rounded border border-dashed border-gray-300 p-6 p-lg-8 mb-10">
-            <!--begin::Heading-->
-            <h2 class="fw-bold mb-5">
-              Support at
-              <a href="https://devs.keenthemes.com" class="">devs.keenthemes.com</a>
-            </h2>
-            <!--end::Heading-->
-            <!--begin::Description-->
-            <div class="fs-5 fw-semobold mb-5">
-              <span class="text-gray-500">
-                Join our developers community to find answer to your question and help others.
-              </span>
-              <a class="explore-link d-none" href="https://keenthemes.com/licensing">FAQs</a>
-            </div>
-            <!--end::Description-->
-            <!--begin::Link-->
-            <a href="https://devs.keenthemes.com" class="btn btn-lg explore-btn-primary w-100">Get Support</a>
-            <!--end::Link-->
-          </div>
-          <!--end::Support-->
-          <!--begin::Link-->
-          <div class="d-flex align-items-center mb-7">
-            <!--begin::Icon-->
-            <div class="d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-warning">
-              <span class="svg-icon svg-icon-warning svg-icon-2x svg-icon-lg-3x">
-                <inline-svg :src="getAssetPath('media/icons/duotune/abstract/abs027.svg')" />
-              </span>
-            </div>
-            <!--end::Icon-->
-            <!--begin::Info-->
-            <div class="d-flex flex-stack flex-grow-1 ms-4 ms-lg-6">
-              <!--begin::Wrapper-->
-              <div class="d-flex flex-column me-2 me-lg-5">
-                <!--begin::Title-->
-                <a
-                  href="https://preview.keenthemes.com/metronic8/vue/docs/#/build"
-                  class="text-dark text-hover-primary fw-bold fs-6 fs-lg-4 mb-1"
-                >
-                  Documentation &amp; Videos
-                </a>
-                <!--end::Title-->
-                <!--begin::Description-->
-                <div class="text-muted fw-semobold fs-7 fs-lg-6">
-                  From guides and video tutorials, to live demos and code examples to get started.
-                </div>
-                <!--end::Description-->
-              </div>
-              <!--end::Wrapper-->
-              <span class="svg-icon svg-icon-gray-400 svg-icon-2">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr064.svg')" />
-              </span>
-            </div>
-            <!--end::Info-->
-          </div>
-          <!--end::Link-->
-          <!--begin::Link-->
-          <div class="d-flex align-items-center mb-7">
-            <!--begin::Icon-->
-            <div class="d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-primary">
-              <span class="svg-icon svg-icon-primary svg-icon-2x svg-icon-lg-3x">
-                <inline-svg :src="getAssetPath('media/icons/duotune/ecommerce/ecm007.svg')" />
-              </span>
-            </div>
-            <!--end::Icon-->
-            <!--begin::Info-->
-            <div class="d-flex flex-stack flex-grow-1 ms-4 ms-lg-6">
-              <!--begin::Wrapper-->
-              <div class="d-flex flex-column me-2 me-lg-5">
-                <!--begin::Title-->
-                <a
-                  href="https://preview.keenthemes.com/metronic8/vue/docs/#/utilities"
-                  class="text-dark text-hover-primary fw-bold fs-6 fs-lg-4 mb-1"
-                >
-                  Plugins &amp; Components
-                </a>
-                <!--end::Title-->
-                <!--begin::Description-->
-                <div class="text-muted fw-semobold fs-7 fs-lg-6">
-                  Check out our 300+ in-house components and customized 3rd-party plugins.
-                </div>
-                <!--end::Description-->
-              </div>
-              <!--end::Wrapper-->
-              <span class="svg-icon svg-icon-gray-400 svg-icon-2">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr064.svg')" />
-              </span>
-            </div>
-            <!--end::Info-->
-          </div>
-          <!--end::Link-->
-          <!--begin::Link-->
-          <div class="d-flex align-items-center mb-7">
-            <!--begin::Icon-->
-            <div class="d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-info">
-              <span class="svg-icon svg-icon-info svg-icon-2x svg-icon-lg-3x">
-                <inline-svg :src="getAssetPath('media/icons/duotune/art/art006.svg')" />
-              </span>
-            </div>
-            <!--end::Icon-->
-            <!--begin::Info-->
-            <div class="d-flex flex-stack flex-grow-1 ms-4 ms-lg-6">
-              <!--begin::Wrapper-->
-              <div class="d-flex flex-column me-2 me-lg-5">
-                <!--begin::Title-->
-                <router-link to="/builder" class="text-dark text-hover-primary fw-bold fs-6 fs-lg-4 mb-1">
-                  Layout Builder
-                </router-link>
-                <!--end::Title-->
-                <!--begin::Description-->
-                <div class="text-muted fw-semobold fs-7 fs-lg-6">Dynamically modify and preview layout</div>
-                <!--end::Description-->
-              </div>
-              <!--end::Wrapper-->
-              <!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
-              <span class="svg-icon svg-icon-gray-400 svg-icon-2">
-                <inline-svg :src="getAssetPath('media/icons/duotune/electronics/elc009.svg')" />
-              </span>
-              <!--end::Svg Icon-->
-            </div>
-            <!--end::Info-->
-          </div>
-          <!--end::Link-->
-          <!--begin::Link-->
-          <div class="d-flex align-items-center mb-7">
-            <!--begin::Icon-->
-            <div class="d-flex flex-center w-50px h-50px w-lg-75px h-lg-75px flex-shrink-0 rounded bg-light-danger">
-              <span class="svg-icon svg-icon-danger svg-icon-2x svg-icon-lg-3x">
-                <inline-svg :src="getAssetPath('media/icons/duotune/electronics/elc009.svg')" />
-              </span>
-            </div>
-            <!--end::Icon-->
-            <!--begin::Info-->
-            <div class="d-flex flex-stack flex-grow-1 ms-4 ms-lg-6">
-              <!--begin::Wrapper-->
-              <div class="d-flex flex-column me-2 me-lg-5">
-                <!--begin::Title-->
-                <a
-                  href="https://preview.keenthemes.com/metronic8/vue/docs/#/changelog"
-                  class="text-dark text-hover-primary fw-bold fs-6 fs-lg-4 mb-1"
-                >
-                  What's New
-                </a>
-                <!--end::Title-->
-                <!--begin::Description-->
-                <div class="text-muted fw-semobold fs-7 fs-lg-6">
-                  Latest features and improvements added with our users feedback in mind.
-                </div>
-                <!--end::Description-->
-              </div>
-              <!--end::Wrapper-->
-              <span class="svg-icon svg-icon-gray-400 svg-icon-2">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr064.svg')" />
-              </span>
-            </div>
-            <!--end::Info-->
-          </div>
-          <!--end::Link-->
-        </div>
-        <!--end::Content-->
-      </div>
-      <!--end::Body-->
-    </div>
-    <!--end::Card-->
-  </div>
-  <!--end::Help drawer-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "kt-explore",
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/layouts/main-layout/extras/MessengerDrawer.vue

@@ -1,272 +0,0 @@
-<template>
-  <!--begin::Chat drawer-->
-  <div
-    id="kt_drawer_chat"
-    class="bg-body"
-    data-kt-drawer="true"
-    data-kt-drawer-name="chat"
-    data-kt-drawer-activate="true"
-    data-kt-drawer-overlay="true"
-    data-kt-drawer-width="{default:'300px', 'md': '500px'}"
-    data-kt-drawer-direction="end"
-    data-kt-drawer-toggle="#kt_drawer_chat_toggle"
-    data-kt-drawer-close="#kt_drawer_chat_close"
-  >
-    <!--begin::Messenger-->
-    <div class="card w-100" id="kt_drawer_chat_messenger">
-      <!--begin::Card header-->
-      <div class="card-header pe-5" id="kt_drawer_chat_messenger_header">
-        <!--begin::Title-->
-        <div class="card-title">
-          <!--begin::User-->
-          <div class="d-flex justify-content-center flex-column me-3">
-            <a href="#" class="fs-4 fw-bold text-gray-900 text-hover-primary me-1 mb-2 lh-1">Brian Cox</a>
-
-            <!--begin::Info-->
-            <div class="mb-0 lh-1">
-              <span class="badge badge-success badge-circle w-10px h-10px me-1"></span>
-              <span class="fs-7 fw-semobold text-gray-400">Active</span>
-            </div>
-            <!--end::Info-->
-          </div>
-          <!--end::User-->
-        </div>
-        <!--end::Title-->
-
-        <!--begin::Card toolbar-->
-        <div class="card-toolbar">
-          <!--begin::Menu-->
-          <div class="me-2">
-            <button
-              class="btn btn-sm btn-icon btn-active-icon-primary"
-              data-kt-menu-trigger="click"
-              data-kt-menu-placement="bottom-end"
-              data-kt-menu-flip="top-end"
-            >
-              <i class="bi bi-three-dots fs-3"></i>
-            </button>
-            <Dropdown4></Dropdown4>
-          </div>
-          <!--end::Menu-->
-
-          <!--begin::Close-->
-          <div class="btn btn-sm btn-icon btn-active-icon-primary" id="kt_drawer_chat_close">
-            <span class="svg-icon svg-icon-2x">
-              <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr061.svg')" />
-            </span>
-          </div>
-          <!--end::Close-->
-        </div>
-        <!--end::Card toolbar-->
-      </div>
-      <!--end::Card header-->
-
-      <!--begin::Card body-->
-      <div class="card-body" id="kt_drawer_chat_messenger_body">
-        <!--begin::Messages-->
-        <div
-          class="scroll-y me-n5 pe-5"
-          ref="messagesRef"
-          data-kt-element="messages"
-          data-kt-scroll="true"
-          data-kt-scroll-activate="true"
-          data-kt-scroll-height="auto"
-          data-kt-scroll-dependencies="#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer"
-          data-kt-scroll-wrappers="#kt_drawer_chat_messenger_body"
-          data-kt-scroll-offset="0px"
-        >
-          <template v-for="(item, index) in messages" :key="index">
-            <MessageIn
-              ref="messagesInRef"
-              v-if="item.type === 'in'"
-              :name="item.name"
-              :image="item.image"
-              :time="item.time"
-              :text="item.text"
-            ></MessageIn>
-            <MessageOut
-              ref="messagesOutRef"
-              v-if="item.type === 'out'"
-              :image="item.image"
-              :time="item.time"
-              :text="item.text"
-            ></MessageOut>
-          </template>
-        </div>
-        <!--end::Messages-->
-      </div>
-      <!--end::Card body-->
-
-      <!--begin::Card footer-->
-      <div class="card-footer pt-4" id="kt_drawer_chat_messenger_footer">
-        <!--begin::Input-->
-        <input
-          class="form-control form-control-flush mb-3"
-          data-kt-element="input"
-          placeholder="Type a message"
-          v-model="newMessageText"
-          @keydown.enter="addNewMessage"
-        />
-        <!--end::Input-->
-
-        <!--begin:Toolbar-->
-        <div class="d-flex flex-stack">
-          <!--begin::Actions-->
-          <div class="d-flex align-items-center me-2">
-            <button
-              class="btn btn-sm btn-icon btn-active-light-primary me-1"
-              type="button"
-              data-bs-toggle="tooltip"
-              title="Coming soon"
-            >
-              <i class="bi bi-paperclip fs-3"></i>
-            </button>
-            <button
-              class="btn btn-sm btn-icon btn-active-light-primary me-1"
-              type="button"
-              data-bs-toggle="tooltip"
-              title="Coming soon"
-            >
-              <i class="bi bi-upload fs-3"></i>
-            </button>
-          </div>
-          <!--end::Actions-->
-
-          <!--begin::Send-->
-          <button @click="addNewMessage" class="btn btn-primary" type="button" data-kt-element="send">Send</button>
-          <!--end::Send-->
-        </div>
-        <!--end::Toolbar-->
-      </div>
-      <!--end::Card footer-->
-    </div>
-    <!--end::Messenger-->
-  </div>
-  <!--end::Chat drawer-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-import MessageIn from "@/components/messenger-parts/MessageIn.vue"
-import MessageOut from "@/components/messenger-parts/MessageOut.vue"
-import Dropdown4 from "@/components/dropdown/Dropdown4.vue"
-
-interface KTMessage {
-  type: string
-  name?: string
-  image: string
-  time: string
-  text: string
-}
-
-export default defineComponent({
-  name: "upgrade-to-pro",
-  components: {
-    MessageIn,
-    MessageOut,
-    Dropdown4,
-  },
-  setup() {
-    const messagesRef = ref<null | HTMLElement>(null)
-    const messagesInRef = ref<null | HTMLElement>(null)
-    const messagesOutRef = ref<null | HTMLElement>(null)
-
-    const messages = ref<Array<KTMessage>>([
-      {
-        type: "in",
-        name: "Brian Cox",
-        image: getAssetPath("media/avatars/300-25.jpg"),
-        time: "5 Hours",
-        text: "How likely are you to recommend our company to your friends and family ?",
-      },
-      {
-        type: "out",
-        image: getAssetPath("media/avatars/300-1.jpg"),
-        time: "2 Hours",
-        text: "Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.",
-      },
-      {
-        type: "in",
-        name: "Brian Cox",
-        image: getAssetPath("media/avatars/300-25.jpg"),
-        time: "2 Hour",
-        text: "Ok, Understood!",
-      },
-      {
-        type: "out",
-        image: getAssetPath("media/avatars/300-1.jpg"),
-        time: "2 Hours",
-        text: "You’ll receive notifications for all issues, pull requests!",
-      },
-      {
-        type: "in",
-        name: "Brian Cox",
-        image: getAssetPath("media/avatars/300-25.jpg"),
-        time: "1 Hour",
-        text: "You can unwatch this repository immediately by clicking here: Keenthemes.com",
-      },
-      {
-        type: "out",
-        image: getAssetPath("media/avatars/300-1.jpg"),
-        time: "4 mins",
-        text: "Most purchased Business courses during this sale!",
-      },
-      {
-        type: "in",
-        name: "Brian Cox",
-        image: getAssetPath("media/avatars/300-25.jpg"),
-        time: "2 mins",
-        text: "Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided",
-      },
-    ])
-
-    const newMessageText = ref("")
-
-    const addNewMessage = () => {
-      if (!newMessageText.value) {
-        return
-      }
-      messages.value.push({
-        type: "out",
-        image: getAssetPath("media/avatars/300-1.jpg"),
-        time: "Just now",
-        text: newMessageText.value,
-      })
-
-      setTimeout(() => {
-        if (messagesRef.value) {
-          messagesRef.value.scrollTop = messagesRef.value.scrollHeight
-        }
-      }, 1)
-
-      newMessageText.value = ""
-      setTimeout(() => {
-        messages.value.push({
-          type: "in",
-          name: "Ja Morant",
-          image: getAssetPath("media/avatars/300-25.jpg"),
-          time: "Just now",
-          text: "Thank you for your awesome support!",
-        })
-
-        setTimeout(() => {
-          if (messagesRef.value) {
-            messagesRef.value.scrollTop = messagesRef.value.scrollHeight
-          }
-        }, 1)
-      }, 2000)
-    }
-
-    return {
-      messages,
-      messagesRef,
-      newMessageText,
-      addNewMessage,
-      messagesInRef,
-      messagesOutRef,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/layouts/main-layout/search/Search.vue

@@ -1,405 +0,0 @@
-<template>
-  <MenuComponent menu-selector="#kt-search-menu">
-    <template v-slot:toggle>
-      <!--begin::Search-->
-      <div
-        id="kt_header_search"
-        class="d-flex align-items-stretch"
-        data-kt-menu-target="#kt-search-menu"
-        data-kt-menu-trigger="click"
-        data-kt-menu-attach="parent"
-        data-kt-menu-placement="bottom-end"
-        data-kt-menu-flip="bottom"
-      >
-        <!--begin::Search toggle-->
-        <div class="d-flex align-items-center" id="kt_header_search_toggle">
-          <div class="btn btn-icon btn-active-light-primary">
-            <span class="svg-icon svg-icon-1">
-              <inline-svg :src="getAssetPath('media/icons/duotune/general/gen021.svg')" />
-            </span>
-          </div>
-        </div>
-        <!--end::Search toggle-->
-      </div>
-      <!--end::Search-->
-    </template>
-    <template v-slot:content>
-      <!--begin::Menu-->
-      <div
-        class="menu menu-sub menu-sub-dropdown menu-column p-7 w-325px w-md-375px"
-        data-kt-menu="true"
-        id="kt-search-menu"
-      >
-        <!--begin::Wrapper-->
-        <div>
-          <!--begin::Form-->
-          <form class="w-100 position-relative mb-3" autocomplete="off">
-            <!--begin::Icon-->
-            <span
-              class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 translate-middle-y ms-0"
-            >
-              <inline-svg :src="getAssetPath('media/icons/duotune/general/gen021.svg')" />
-            </span>
-            <!--end::Icon-->
-
-            <!--begin::Input-->
-            <input
-              ref="inputRef"
-              v-model="search"
-              @input="searching"
-              type="text"
-              class="form-control form-control-flush ps-10"
-              name="search"
-              placeholder="Search..."
-            />
-            <!--end::Input-->
-
-            <!--begin::Spinner-->
-            <span v-if="loading" class="position-absolute top-50 end-0 translate-middle-y lh-0 me-1">
-              <span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>
-            </span>
-            <!--end::Spinner-->
-
-            <!--begin::Reset-->
-            <span
-              v-show="search.length && !loading"
-              @click="reset()"
-              class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0"
-            >
-              <span class="svg-icon svg-icon-2 svg-icon-lg-1 me-0">
-                <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr061.svg')" />
-              </span>
-            </span>
-            <!--end::Reset-->
-
-            <!--begin::Toolbar-->
-            <div class="position-absolute top-50 end-0 translate-middle-y">
-              <!--begin::Preferences toggle-->
-              <div
-                v-if="!search && !loading"
-                @click="state = 'preferences'"
-                class="btn btn-icon w-20px btn-sm btn-active-color-primary me-1"
-                data-bs-toggle="tooltip"
-                title="Show search preferences"
-              >
-                <span class="svg-icon svg-icon-1">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/coding/cod001.svg')" />
-                </span>
-              </div>
-              <!--end::Preferences toggle-->
-
-              <!--begin::Advanced search toggle-->
-              <div
-                v-if="!search && !loading"
-                @click="state = 'advanced-options'"
-                class="btn btn-icon w-20px btn-sm btn-active-color-primary"
-                data-bs-toggle="tooltip"
-                title="Show more search options"
-              >
-                <span class="svg-icon svg-icon-2">
-                  <inline-svg :src="getAssetPath('media/icons/duotune/arrows/arr072.svg')" />
-                </span>
-              </div>
-              <!--end::Advanced search toggle-->
-            </div>
-            <!--end::Toolbar-->
-          </form>
-          <!--end::Form-->
-
-          <!--begin::Separator-->
-          <div class="separator border-gray-200 mb-6"></div>
-          <!--end::Separator-->
-          <Results v-if="state === 'results'"></Results>
-          <PartialMain v-else-if="state === 'main'"></PartialMain>
-          <Empty v-else-if="state === 'empty'"></Empty>
-        </div>
-        <!--end::Wrapper-->
-
-        <form v-if="state === 'advanced-options'" class="pt-1">
-          <!--begin::Heading-->
-          <h3 class="fw-semobold text-dark mb-7">Advanced Search</h3>
-          <!--end::Heading-->
-
-          <!--begin::Input group-->
-          <div class="mb-5">
-            <input
-              type="text"
-              class="form-control form-control-sm form-control-solid"
-              placeholder="Contains the word"
-              name="query"
-            />
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="mb-5">
-            <!--begin::Radio group-->
-            <div class="nav-group nav-group-fluid">
-              <!--begin::Option-->
-              <label>
-                <input type="radio" class="btn-check" name="type" value="has" checked />
-                <span class="btn btn-sm btn-color-muted btn-active btn-active-primary">All</span>
-              </label>
-              <!--end::Option-->
-
-              <!--begin::Option-->
-              <label>
-                <input type="radio" class="btn-check" name="type" value="users" />
-                <span class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4">Users</span>
-              </label>
-              <!--end::Option-->
-
-              <!--begin::Option-->
-              <label>
-                <input type="radio" class="btn-check" name="type" value="orders" />
-                <span class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4">Orders</span>
-              </label>
-              <!--end::Option-->
-
-              <!--begin::Option-->
-              <label>
-                <input type="radio" class="btn-check" name="type" value="projects" />
-                <span class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4">Projects</span>
-              </label>
-              <!--end::Option-->
-            </div>
-            <!--end::Radio group-->
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="mb-5">
-            <input
-              type="text"
-              name="assignedto"
-              class="form-control form-control-sm form-control-solid"
-              placeholder="Assigned to"
-              value=""
-            />
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="mb-5">
-            <input
-              type="text"
-              name="collaborators"
-              class="form-control form-control-sm form-control-solid"
-              placeholder="Collaborators"
-              value=""
-            />
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="mb-5">
-            <!--begin::Radio group-->
-            <div class="nav-group nav-group-fluid">
-              <!--begin::Option-->
-              <label>
-                <input type="radio" class="btn-check" name="attachment" value="has" checked />
-                <span class="btn btn-sm btn-color-muted btn-active btn-active-primary">Has attachment</span>
-              </label>
-              <!--end::Option-->
-
-              <!--begin::Option-->
-              <label>
-                <input type="radio" class="btn-check" name="attachment" value="any" />
-                <span class="btn btn-sm btn-color-muted btn-active btn-active-primary px-4">Any</span>
-              </label>
-              <!--end::Option-->
-            </div>
-            <!--end::Radio group-->
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="mb-5">
-            <select
-              name="timezone"
-              aria-label="Select a Timezone"
-              data-control="select2"
-              data-placeholder="date_period"
-              class="form-select form-select-sm form-select-solid"
-            >
-              <option value="next">Within the next</option>
-              <option value="last">Within the last</option>
-              <option value="between">Between</option>
-              <option value="on">On</option>
-            </select>
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="row mb-8">
-            <!--begin::Col-->
-            <div class="col-6">
-              <input
-                type="number"
-                name="date_number"
-                class="form-control form-control-sm form-control-solid"
-                placeholder="Lenght"
-                value=""
-              />
-            </div>
-            <!--end::Col-->
-
-            <!--begin::Col-->
-            <div class="col-6">
-              <select
-                name="date_typer"
-                aria-label="Select a Timezone"
-                data-control="select2"
-                data-placeholder="Period"
-                class="form-select form-select-sm form-select-solid"
-              >
-                <option value="days">Days</option>
-                <option value="weeks">Weeks</option>
-                <option value="months">Months</option>
-                <option value="years">Years</option>
-              </select>
-            </div>
-            <!--end::Col-->
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Actions-->
-          <div class="d-flex justify-content-end">
-            <button @click="state = 'main'" class="btn btn-sm btn-light fw-bold btn-active-light-primary me-2">
-              Cancel
-            </button>
-
-            <a href="#" class="btn btn-sm fw-bold btn-primary">Search</a>
-          </div>
-          <!--end::Actions-->
-        </form>
-
-        <form v-if="state === 'preferences'" class="pt-1">
-          <!--begin::Heading-->
-          <h3 class="fw-semobold text-dark mb-7">Search Preferences</h3>
-          <!--end::Heading-->
-
-          <!--begin::Input group-->
-          <div class="pb-4 border-bottom">
-            <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-              <span class="form-check-label text-gray-700 fs-6 fw-semobold ms-0 me-2">Projects</span>
-
-              <input class="form-check-input" type="checkbox" value="1" checked />
-            </label>
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="py-4 border-bottom">
-            <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-              <span class="form-check-label text-gray-700 fs-6 fw-semobold ms-0 me-2">Targets</span>
-              <input class="form-check-input" type="checkbox" value="1" checked />
-            </label>
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="py-4 border-bottom">
-            <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-              <span class="form-check-label text-gray-700 fs-6 fw-semobold ms-0 me-2">Affiliate Programs</span>
-              <input class="form-check-input" type="checkbox" value="1" />
-            </label>
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="py-4 border-bottom">
-            <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-              <span class="form-check-label text-gray-700 fs-6 fw-semobold ms-0 me-2">Referrals</span>
-              <input class="form-check-input" type="checkbox" value="1" checked />
-            </label>
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Input group-->
-          <div class="py-4 border-bottom">
-            <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-              <span class="form-check-label text-gray-700 fs-6 fw-semobold ms-0 me-2">Users</span>
-              <input class="form-check-input" type="checkbox" value="1" />
-            </label>
-          </div>
-          <!--end::Input group-->
-
-          <!--begin::Actions-->
-          <div class="d-flex justify-content-end pt-7">
-            <div @click="state = 'main'" class="btn btn-sm btn-light fw-bold btn-active-light-primary me-2">Cancel</div>
-            <button class="btn btn-sm fw-bold btn-primary">Save Changes</button>
-          </div>
-          <!--end::Actions-->
-        </form>
-      </div>
-      <!--end::Menu-->
-    </template>
-  </MenuComponent>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent, ref } from "vue"
-import Results from "@/layouts/main-layout/search/partials/Results.vue"
-import PartialMain from "@/layouts/main-layout/search/partials/Main.vue"
-import Empty from "@/layouts/main-layout/search/partials/Empty.vue"
-import MenuComponent from "@/components/menu/MenuComponent.vue"
-
-export default defineComponent({
-  name: "kt-search",
-  components: {
-    Results,
-    PartialMain,
-    Empty,
-    MenuComponent,
-  },
-  setup() {
-    const search = ref<string>("")
-    const state = ref<"main" | "empty" | "advanced-options" | "preferences" | "results">("main")
-    const loading = ref<boolean>(false)
-    const inputRef = ref<HTMLInputElement | null>(null)
-
-    const searching = (e: Event) => {
-      const target = e.target as HTMLInputElement
-      if (target.value.length <= 1) {
-        load("main")
-      } else {
-        if (target.value.length > 5) {
-          load("empty")
-          return
-        }
-        load("results")
-      }
-    }
-
-    const load = (current: "main" | "empty" | "advanced-options" | "preferences" | "results") => {
-      loading.value = true
-      setTimeout(() => {
-        state.value = current
-        loading.value = false
-      }, 1000)
-    }
-
-    const reset = () => {
-      search.value = ""
-      state.value = "main"
-    }
-
-    const setState = (curr: "main" | "empty" | "advanced-options" | "preferences" | "results") => {
-      state.value = curr
-    }
-
-    return {
-      search,
-      state,
-      loading,
-      searching,
-      reset,
-      inputRef,
-      setState,
-      getAssetPath,
-    }
-  },
-})
-</script>

src/layouts/main-layout/search/partials/Empty.vue

@@ -1,35 +0,0 @@
-<template>
-  <!--begin::Empty-->
-  <div class="text-center">
-    <!--begin::Icon-->
-    <div class="pt-10 pb-10">
-      <span class="svg-icon svg-icon-4x opacity-50">
-        <inline-svg :src="getAssetPath('media/icons/duotune/files/fil024.svg')" />
-      </span>
-    </div>
-    <!--end::Icon-->
-
-    <!--begin::Message-->
-    <div class="pb-15 fw-semobold">
-      <h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
-      <div class="text-muted fs-7">Please try again with a different query</div>
-    </div>
-    <!--end::Message-->
-  </div>
-  <!--end::Empty-->
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "kt-empty",
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/layouts/main-layout/search/partials/Main.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="mb-4">
-    <!--begin::Heading-->
-    <div class="d-flex flex-stack fw-semobold mb-4">
-      <!--begin::Label-->
-      <span class="text-muted fs-6 me-2">Recently Searched:</span>
-      <!--end::Label-->
-    </div>
-    <!--end::Heading-->
-    <!--begin::Items-->
-    <div class="scroll-y mh-200px mh-lg-325px">
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/electronics/elc004.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">BoomApp by Keenthemes</a>
-          <span class="fs-7 text-muted fw-semobold">#45789</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/graphs/gra001.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">"Kept API Project Meeting</a>
-          <span class="fs-7 text-muted fw-semobold">#84050</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/graphs/gra006.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">"KPI Monitoring App Launch</a>
-          <span class="fs-7 text-muted fw-semobold">#84250</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/graphs/gra002.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">Project Reference FAQ</a>
-          <span class="fs-7 text-muted fw-semobold">#67945</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/communication/com010.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">"FitPro App Development</a>
-          <span class="fs-7 text-muted fw-semobold">#84250</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/finance/fin001.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">Shopix Mobile App</a>
-          <span class="fs-7 text-muted fw-semobold">#45690</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <div class="d-flex align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/graphs/gra002.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semobold">"Landing UI Design" Launch</a>
-          <span class="fs-7 text-muted fw-semobold">#24005</span>
-        </div>
-        <!--end::Title-->
-      </div>
-      <!--end::Item-->
-    </div>
-    <!--end::Items-->
-  </div>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "kt-main",
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/layouts/main-layout/search/partials/Results.vue

@@ -1,268 +0,0 @@
-<template>
-  <div>
-    <!--begin::Items-->
-    <div class="scroll-y mh-200px mh-lg-325px">
-      <!--begin::Category title-->
-      <h3 class="fs-5 text-muted m-0 pb-5">Users</h3>
-      <!--end::Category title-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <img :src="getAssetPath('media/avatars/300-6.jpg')" alt="" />
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Karina Clark</span>
-          <span class="fs-7 fw-semobold text-muted">Marketing Manager</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <img :src="getAssetPath('media/avatars/300-2.jpg')" alt="" />
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Olivia Bold</span>
-          <span class="fs-7 fw-semobold text-muted">Software Engineer</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <img :src="getAssetPath('media/avatars/300-9.jpg')" alt="" />
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Ana Clark</span>
-          <span class="fs-7 fw-semobold text-muted">UI/UX Designer</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <img :src="getAssetPath('media/avatars/300-14.jpg')" alt="" />
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Nick Pitola</span>
-          <span class="fs-7 fw-semobold text-muted">Art Director</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <img :src="getAssetPath('media/avatars/300-11.jpg')" alt="" />
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Edward Kulnic</span>
-          <span class="fs-7 fw-semobold text-muted">System Administrator</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Category title-->
-      <h3 class="fs-5 text-muted m-0 pt-5 pb-5">Customers</h3>
-      <!--end::Category title-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <img class="w-20px h-20px" :src="getAssetPath('media/svg/brand-logos/volicity-9.svg')" alt="" />
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Company Rbranding</span>
-          <span class="fs-7 fw-semobold text-muted">UI Design</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <img class="w-20px h-20px" :src="getAssetPath('media/svg/brand-logos/tvit.svg')" alt="" />
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Company Re-branding</span>
-          <span class="fs-7 fw-semobold text-muted">Web Development</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <img class="w-20px h-20px" :src="getAssetPath('media/svg/misc/infography.svg')" alt="" />
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Business Analytics App</span>
-          <span class="fs-7 fw-semobold text-muted">Administration</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <img class="w-20px h-20px" :src="getAssetPath('media/svg/brand-logos/leaf.svg')" alt="" />
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">EcoLeaf App Launch</span>
-          <span class="fs-7 fw-semobold text-muted">Marketing</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <img class="w-20px h-20px" :src="getAssetPath('media/svg/brand-logos/tower.svg')" alt="" />
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column justify-content-start fw-semobold">
-          <span class="fs-6 fw-semobold">Tower Group Website</span>
-          <span class="fs-7 fw-semobold text-muted">Google Adwords</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Category title-->
-      <h3 class="fs-5 text-muted m-0 pt-5 pb-5">Projects</h3>
-      <!--end::Category title-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/general/gen005.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <span class="fs-6 fw-semobold">Si-Fi Project by AU Themes</span>
-          <span class="fs-7 fw-semobold text-muted">#45670</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/general/gen032.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <span class="fs-6 fw-semobold">Shopix Mobile App Planning</span>
-          <span class="fs-7 fw-semobold text-muted">#45690</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/communication/com012.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <span class="fs-6 fw-semobold">Finance Monitoring SAAS Discussion</span>
-          <span class="fs-7 fw-semobold text-muted">#21090</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-      <!--begin::Item-->
-      <a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
-        <!--begin::Symbol-->
-        <div class="symbol symbol-40px symbol-circle me-4">
-          <span class="symbol-label bg-light">
-            <span class="svg-icon svg-icon-2 svg-icon-primary">
-              <inline-svg :src="getAssetPath('media/icons/duotune/communication/com006.svg')" />
-            </span>
-          </span>
-        </div>
-        <!--end::Symbol-->
-        <!--begin::Title-->
-        <div class="d-flex flex-column">
-          <span class="fs-6 fw-semobold">Dashboard Analitics Launch</span>
-          <span class="fs-7 fw-semobold text-muted">#34560</span>
-        </div>
-        <!--end::Title-->
-      </a>
-      <!--end::Item-->
-    </div>
-    <!--end::Items-->
-  </div>
-</template>
-
-<script lang="ts">
-import { getAssetPath } from "@/core/helpers/assets"
-import { defineComponent } from "vue"
-
-export default defineComponent({
-  name: "kt-results",
-  components: {},
-  setup() {
-    return {
-      getAssetPath,
-    }
-  },
-})
-</script>

src/main.ts

@@ -6,7 +6,7 @@ import App from "./App.vue"
 TIP: To get started with clean router change path to @/router/clean.ts.
  */
 import { setupStore } from "@/stores"
-import router from "@/router/Index"
+import router from "@/router"
 //import ElementPlus from "element-plus"
 import i18n from "@/core/plugins/i18n"
 

src/router/Index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHashHistory, type RouteLocationNormalized, type RouteRecordRaw } from "vue-router"
 import appStore from "@/stores"
 import configs from "@/core/config/Index"
+import { staticRotuer } from "./statictRouter"
 export const to404: RouteRecordRaw = {
   path: "/:pathMatch(.*)*",
   name: "to404",
@@ -78,8 +79,9 @@ const routes: Array<RouteRecordRaw> = [
     meta: {
       pageTitle: "图标",
     },
-    component: () => import("@/layouts/icon.vue"),
+    component: () => import("@/layouts/Icon.vue"),
   },
+  ...staticRotuer,
 ]
 
 const router = createRouter({

src/router/menuMap/_analysisInfo.ts

@@ -0,0 +1,14 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+export const menus: Array<MenuRouteMap> = [
+  //AnalysisInfo 综合分析
+  {
+    path: "/AnalysisInfo",
+    icon: "far fa-chart-bar",
+  },
+  {
+    path: "/AnalysisInfo/clean",
+    component: () => import("@/views/analysisInfo/clean.vue"),
+  },
+]
+
+export default menus

src/router/menuMap/_examApproval.ts

@@ -0,0 +1,18 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+//examApproval 审核审批
+export const menus: Array<MenuRouteMap> = [
+  {
+    path: "/examApproval",
+    icon: "fas fa-edit",
+  },
+  {
+    path: "/examApproval/appReview",
+    component: () => import("@/views/examApproval/appReview.vue"),
+  },
+  {
+    path: "/examApproval/reptNotice",
+    component: () => import("@/views/examApproval/reptNotice.vue"),
+  },
+]
+
+export default menus

src/router/menuMap/_goLineData.ts

@@ -0,0 +1,18 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+//goLineData 监测列表
+export const menus: Array<MenuRouteMap> = [
+  {
+    path: "/goLineData",
+    icon: "fas fa-rss-square",
+  },
+  {
+    path: "/goLineData/timeData",
+    component: () => import("@/views/goLineData/timeData.vue"),
+  },
+  {
+    path: "/goLineData/oilFumeConcentration",
+    component: () => import("@/views/goLineData/oilFumeConcentration.vue"),
+  },
+]
+
+export default menus

src/router/menuMap/_mobile.ts

@@ -0,0 +1,14 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+//mobile 移动督查
+export const menus: Array<MenuRouteMap> = [
+  {
+    path: "/mobile",
+    icon: "fas fa-mobile-alt",
+  },
+  {
+    path: "/mobile/supervision",
+    component: () => import("@/views/mobile/supervision.vue"),
+  },
+]
+
+export default menus

src/router/menuMap/_overAnalysis.ts

@@ -0,0 +1,21 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+export const menus: Array<MenuRouteMap> = [
+  //overAnalysis 告警
+  {
+    path: "/overAnalysis",
+    icon: "fas fa-bell",
+  },
+  {
+    path: "/overAnalysis/overMerchants",
+    component: () => import("@/views/overAnalysis/overMerchants.vue"),
+  },
+  {
+    path: "/overAnalysis/overParam",
+    component: () => import("@/views/overAnalysis/overParam.vue"),
+  },
+  {
+    path: "/overAnalysis/overTime",
+    component: () => import("@/views/overAnalysis/overTime.vue"),
+  },
+]
+export default menus

src/router/menuMap/_purify.ts

@@ -0,0 +1,14 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+//purify 清洗管理
+export const menus: Array<MenuRouteMap> = [
+  {
+    path: "/purify",
+    icon: "fas fa-shower",
+  },
+  {
+    path: "/purify/washInfo",
+    component: () => import("@/views/purify/washInfo.vue"),
+  },
+]
+
+export default menus

src/router/menuMap/_system.ts

@@ -0,0 +1,9 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+export const menus: Array<MenuRouteMap> = [
+  //server 系统管理
+  {
+    path: "/server",
+    icon: "fas fa-cogs",
+  },
+]
+export default menus

src/router/menuMap/_warn.ts

@@ -0,0 +1,17 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+export const menus: Array<MenuRouteMap> = [
+  //warn 告警管理
+  {
+    path: "/warn",
+    icon: "fas fa-exclamation-triangle",
+  },
+  {
+    path: "/warn/warnList",
+    component: () => import("@/views/warn/warnList.vue"),
+  },
+  {
+    path: "/warn/ouput",
+    component: () => import("@/views/warn/ouput.vue"),
+  },
+]
+export default menus

src/router/menuMap/index.ts

@@ -0,0 +1,37 @@
+import type { MenuRouteMap } from "@/core/config/MainMenuConfig"
+import analysisInfo from "./_analysisInfo"
+import overAnalysis from "./_overAnalysis"
+import warn from "./_warn"
+import purify from "./_purify"
+import goLineData from "./_goLineData"
+import mobile from "./_mobile"
+import examApproval from "./_examApproval"
+import system from "./_system"
+export const MenuRouteMaps: Array<MenuRouteMap> = [
+  {
+    path: "/DataBoard",
+    icon: "far fa-window-maximize",
+  },
+  {
+    path: "/DataBoard/index",
+    component: () => import("@/views/dashboard/Index.vue"),
+  },
+  //overAnalysis 告警
+  ...overAnalysis,
+  //AnalysisInfo 综合分析
+  ...analysisInfo,
+  //purify 清洗管理
+  ...purify,
+  //goLineData 监测列表
+  ...goLineData,
+  //mobile 移动督查
+  ...mobile,
+  //examApproval 审核审批
+  ...examApproval,
+  //warn 告警管理
+  ...warn,
+  //server 系统管理
+  ...system,
+]
+
+export default MenuRouteMaps

src/router/statictRouter.ts

@@ -0,0 +1,13 @@
+import type { RouteRecordRaw } from "vue-router"
+export const staticRotuer: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    component: () => import("@/layouts/main-layout/MainLayout.vue"),
+    children: [
+      {
+        path: "/overAnalysis/overTime/detail",
+        component: () => import("@/views/overAnalysis/overTimeDetail.vue"),
+      },
+    ],
+  },
+]

src/shims-vue.d.ts

@@ -2,6 +2,8 @@
 import { AxiosInstance, AxiosRequestConfig, AxiosPromise } from "axios"
 import type { TypesConfig } from "vue-router"
 
+declare module "js-md5"
+
 /**
  * 自定义扩展axios模块
  */

src/stores/_menu.ts

@@ -3,8 +3,8 @@ import { defineStore } from "pinia"
 import Stroage from "@/core/utils/storages"
 import type { RouteRecordRaw } from "vue-router"
 import type { MenuItem, MenuRouteMap, FunctionMenu } from "@/core/config/MainMenuConfig"
-import { MainMenuConfig } from "@/core/config/MainMenuConfig"
-import router, { to404 } from "@/router/Index"
+import { MenuRouteMaps } from "@/router/menuMap"
+import router, { to404 } from "@/router"
 import apis from "@/api"
 import configs from "@/core/config/Index"
 
@@ -42,7 +42,7 @@ export const useMenuStore = defineStore("meun", () => {
   }
   const formatterMenuItem = (fun: FunctionMenu) => {
     menus.value.push(fun)
-    const menu: MenuRouteMap | undefined = MainMenuConfig.find(
+    const menu: MenuRouteMap | undefined = MenuRouteMaps.find(
       (v) => v.path.toLocaleLowerCase() == fun.url.trimEnd().toLocaleLowerCase()
     )
     const item: MenuItem = {
@@ -89,7 +89,7 @@ export const useMenuStore = defineStore("meun", () => {
     //console.log("===========", router.getRoutes());
   }
   const formatterRouteItem = (fun: FunctionMenu, withChild = true) => {
-    const menu: MenuRouteMap | undefined = MainMenuConfig.find((v) => v.path == fun.url)
+    const menu: MenuRouteMap | undefined = MenuRouteMaps.find((v) => v.path == fun.url)
     if (menu?.component == null) {
       if (withChild && fun.children && fun.children.length) {
         fun.children.forEach((v) => {

src/views/overAnalysis/overParam.vue

@@ -16,6 +16,8 @@ const cols = ref<Array<Header>>([
 ])
 
 function edit(row: any) {
+  console.log("ROW", row)
+
   //
 }
 </script>

src/views/overAnalysis/overTimeDetail.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue"
+</script>
+
+<template>
+  <div>OT detail</div>
+</template>

tsconfig.json

@@ -28,6 +28,7 @@
     "baseUrl": "./",
     "types": [
       "node",
+      "element-plus/global"
     ],
     "paths": {
       "@/*": [

vite.config.ts

@@ -1,6 +1,7 @@
-import { defineConfig } from "vite"
+import { defineConfig, type Plugin } from "vite"
 import { fileURLToPath, URL } from "node:url"
 import vue from "@vitejs/plugin-vue"
+import viteCompression from "vite-plugin-compression"
 import AutoImport from "unplugin-auto-import/vite"
 import Components from "unplugin-vue-components/vite"
 import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
@@ -10,6 +11,8 @@ import path from "path"
 export default defineConfig({
   plugins: [
     vue(),
+    //打包压缩
+    viteCompression(),
     //引入vue 插件
     AutoImport({
       imports: ["vue"],