From 13b488a6173ff892fac0acfacea3b2de05dc3e72 Mon Sep 17 00:00:00 2001
From: ckx6954 <ckx6954@local-host.co.kr>
Date: Fri, 13 Dec 2024 15:46:12 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9E=A1=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                  |   16 +-
 src/layouts/NormalLayout.vue |   56 +
 src/layouts/TheFooter.vue    |   24 +
 src/layouts/TheMenu.vue      | 1193 +++++++++
 src/layouts/TheTop.vue       |  567 +++++
 src/layouts/TheView.vue      |    5 -
 src/views/MainView.vue       | 4406 ++++++++++------------------------
 7 files changed, 3098 insertions(+), 3169 deletions(-)
 create mode 100644 src/layouts/NormalLayout.vue
 create mode 100644 src/layouts/TheFooter.vue
 create mode 100644 src/layouts/TheMenu.vue
 create mode 100644 src/layouts/TheTop.vue
 delete mode 100644 src/layouts/TheView.vue

diff --git a/src/App.vue b/src/App.vue
index 013f66f..af8057e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,13 @@
-<script setup>
-import TheView from '@/layouts/TheView.vue'
-</script>
-
 <template>
-  <TheView />
-</template>
 
+  <normal-layout>
+    <template #content>
+      <router-view></router-view>
+    </template>
+  </normal-layout>
+
+</template>
+<script setup>
+import NormalLayout from './layouts/NormalLayout.vue'
+</script>
 <style></style>
diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue
new file mode 100644
index 0000000..e0bbe8f
--- /dev/null
+++ b/src/layouts/NormalLayout.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="layout-wrapper layout-content-navbar">
+    <div class="layout-container">
+      <!-- menu -->
+      <TheMenu />
+      <!-- Layout container -->
+      <div class="layout-page">
+        <!-- Top -->
+        <TheTop/>
+        <!-- Content -->
+        <div class="content-wrapper">
+          <slot name="content">
+            body
+          </slot>
+          <TheFooter/>
+          <div class="content-backdrop fade"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Overlay -->
+    <div class="layout-overlay layout-menu-toggle"></div>
+
+    <!-- Drag Target Area To SlideIn Menu On Small Screens -->
+    <div class="drag-target"></div>
+  </div>
+</template>
+<script setup>
+import TheTop from './TheTop.vue'
+import TheFooter from './TheFooter.vue'
+import TheMenu from './TheMenu.vue'
+import { nextTick } from 'vue'
+
+
+window.isDarkStyle = window.Helpers.isDarkStyle()
+
+const loadScript = (src) => {
+  const script = document.createElement('script')
+  script.src = src
+  script.type = 'text/javascript'
+  script.async = true
+  document.body.appendChild(script)
+  script.onload = () => {
+    console.log(`${src} loaded successfully.`)
+  }
+  script.onerror = () => {
+    console.error(`Failed to load script: ${src}`)
+  }
+}
+nextTick(() => {
+  loadScript('/vendor/js/menu.js')
+  loadScript('/js/main.js')
+})
+</script>
+<style>
+</style>
diff --git a/src/layouts/TheFooter.vue b/src/layouts/TheFooter.vue
new file mode 100644
index 0000000..4f78c8e
--- /dev/null
+++ b/src/layouts/TheFooter.vue
@@ -0,0 +1,24 @@
+<template>
+  <footer class="content-footer footer bg-footer-theme">
+    <div class="container-xxl">
+      <div
+        class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column"
+      >
+        <div class="text-body">
+          ©2024
+          <!-- <script>
+                    document.write(new Date().getFullYear())
+                  </script> -->
+          , made with ❤️ by
+          <a href="https://themeselection.com/" target="_blank" class="footer-link"
+            >ThemeSelection</a
+          >
+        </div>
+        <div class="d-none d-lg-inline-block"></div>
+      </div>
+    </div>
+  </footer>
+</template>
+<script setup>
+</script>
+<style></style>
diff --git a/src/layouts/TheMenu.vue b/src/layouts/TheMenu.vue
new file mode 100644
index 0000000..9cd8a3b
--- /dev/null
+++ b/src/layouts/TheMenu.vue
@@ -0,0 +1,1193 @@
+<template>
+  <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
+    <div class="app-brand demo">
+      <a href="/" class="app-brand-link">
+        <span class="app-brand-logo demo">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            width="90"
+            height="90"
+            viewBox="0 0 90 90"
+          >
+            <image
+              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAAXNSR0IArs4c6QAACr1JREFUeF7t3Ht0HFUdB/DvbyZpktk0hQIiyltsd7aAKB6Px3PkkIUgFmvJ7rJKEWotLQ8RETjq0T/oHyp6RERE5CW1cAAN2Q2liPIqqOhRj7xKu5uUUl6F8iivJjNpHjM/mQ1JQ/bu3El29u72uPNn7t37u/czd29mfnNnCfVDiQApiVIPgjq0oklQh65DKxJQFKY+o+vQigQUhanP6Dq0IgFFYeozug6tSEBRmPqMrkMrElAUZo+Y0VbGXA7Gt0GYD2A7mNYYxvBPaOGWIUVOZYepaWhmkJ0xrwXhXMFIeyLJfKJsAUUN1Cx0ATkbuw7glQKLtwB0RJL5xxU5lR2mJqHHkM0bAJwtGOGbYOqIpHJPlD16hQ3UHDSvgmYfad4IwjcEDjtYo47WztyTCo1CCVVT0NwF3dajNwK0TDC6N5i0jtbEpqdCGbniRmoGegw5dhPAXxci63xC66m9Tyv2CS1cTUAXkBvM34GxtHhk/LrLWnx2KrcptFFXoaGqQ3vIg7q5moEzi8bv4rUCcnpTTmbDqw9ttlqbj9N0bY7jIldrJ6aq0GPI0TUMOkMA+apLenx2YmNehjyQMU8k4BYAB+yuy3cPa81L9+588h3Z51WUVw3aQ7YazFuJcbpgoNsdduJtqc29MgQrs+DLgHsngFlT6zJhaWsi752Aqh9VgS4g6+ZtBHxFIPCK47jxtnRfn0zHzkYTzHSHCJmYLzFSvVfK2lBVrhyaHz6+wX7rtdsBnCYY5MsOcbwt0btZBmBnY6cx820AGqfUZQIuNpL5q2RtqCxXCs3XH9to72vdDlBKcHWxTWeKN6fyz8gABrqjpxPhVoD0ImSii4xE7mpZG6rLlUFzV2yWreN2gJOCQb6ka3p7c+fGZ2UAAxnzTAKvFiIzX2ikeq+RtVGNciXQY8j8BwCdgkG+qMNpb05u3ioDGMjGlhG73p1j0UwGcEEkmb9W1ka1yisOXUDWuAuExYJBvqA5bntLuu85GYDVHV0BouuBom1sDKLzI4ncdbI2qlleUej3l4tugBcJBvm8pnF7S2fv8zIAq9s8D4TfCJGZz42ker1MX00fFYN+f7nIAjhFIPCcBrS3JPMvyHTsTOxbDP6VEBlYGUnmb5K1UQvlFYHme49osu3GHhC+KEImh4430rkXZQB2d/RiJrpCgOyCaUUklbtZ1katlIcO7eUc7LbmHoBOLh4kbSUH7UGQBzLmdwn4meAy0GHSVrQmcqtrBTFIP0KFHkM27gL4C4Lgz5KutxunbnxJ1jErE/sBwD8WIjOWt6Z618jaqLXy0KC568AWW2/rESEz8IyGxriR3LBNBmBlope9d2GxSlSvlnIXsnFMLQ8Fmtcda9gjdg8YJ00NwMBmzXHiRnrzy7LOWVnzR2D8sHQ9usZI5C4kAsvaqrXysqELyMP2WgAnFiEz+qjRjUcW970iG7idMX/KwPdk9QBcayTyF+xp2GVBe8iDw9Y6BsWLvyrUy+B4JJnfLsMbyMSuIPAlsnoT5YzrjGT+/D0Je8bQHrI1ZP+JCMcLgPLsULw1nXvVD8/bVmD1mL8kbxdS8TFMhO8z4zsADhJcwdxgJHLn7inYM4LmW46OWJGRewk4rgiAkeNGPd66eONrMmQ7Y/4ahG8K6g0BWjqS3HT3rsy8wx3oDwM4WFDvJiORX7knYE8buvBsbk7L/cT4vGDgm1xqjM9ObHhdipyN/hagcwT1bGZOtKZ67xsvG+yaf5irax72IYITe7OxMb+CVsENvPRUoeK0oa1MbBXAlwkG/LTrjpwwO73lDV9kb4PMUYVdSMuL6rmwXM1dNDvZ56F+4BjsiR7quuT9/dDi9nm14fSuoDScsA29JbJ/qP9gNGFH26LNO2ba/gygTS/TNmWw/JTrjHZIkcf2090s2rvBDnZqDXSKkcg9WmowgxnzEBfwsA8rqkNYY4zml4eF7T2ksPYdvJzA5wEwAO+Sku8jvWFlkJuu4ouDaZ4iK2N6X9HdJ4ixi1yaH+i2upBPZlF+4h1iOtlI5f4t647dFTuYdQ+bDxcM5tYWJ7+sXGxJQuzRSDIvWjZ9uz6DGR17duogCby+ZVZkES16zPaLNpAx/yr4B/omgJOmszPUvuvIg9hxvJn9sWJsvq3F6V06U2z/hFjwXE0IM1qch2DGI5Em4xQ/bCtjbvkgDr/OzB2tqb4Nspk8tdzOHH2gi5H1BHw8LGz/hBgC52pEY5n2jC58rRp4XYnb7b9FrMaFdNYGSxTMypj3TMpPb3dJPyHIBplSJ8HumvdRV9c97HlT6zDhjsho/sygMzusXE2pvk4b2mtI0qmS2P3ZBXGN3Qff2/e8zSE+Mci2AtlMt9bO/wiPaOtp7LWLDxwM/DHi5M+QYYeVq/Hr64ygC9g+eWcm/D0ySgspnRuYGtzKmGdrjvtQkOeEMuTxcitjHkCg9QyOCj5zpzF3/yXU/sioqL2wcjWyvs4YuoDt/yTlUbvBXbjf4r5+WSfCKB/oin2YdF4PwCxuj7uNHZEldM5jI5PLwsrVBOl/WdBjy0hhK0GJZ4P0j12Dwwv3+dqWnUE6U26dgbVH7k8jznoQYsVtUcZwsITSueFCv0PI1Uynv2VD78ZGqafd/xxyhhbOTW99dzodm2nd/uzRH9J4xJvZCwRt9BgOfRW7GhrLzdVMt3+hQE9gl96/8a8hZ+hkZdhdR+ynaY0PgXBUEQhjLWuYW06uZrrIXv3QoCctI+IdSS7+M8RDJynF1hseAOgTAWE2us5IXJZGCNhWUbVQoSctI6X22P13WGvqULU5fOe6efvqQ/oDIBzjC8QIlBCbKXLoM3q8I767RhmPjTQ3dOz1paffLqfjQT+7MxvdR2d6AMAnxZ8JlhALGq9UvdBn9AS2/z7ox0cdrWNOepP3BmxFj7e6Dp/TpDfdC+BzgvX6SafJ6Sgn/Rm08xWDLiwj/thPOMQdbYleL6lUkeN95L8A+KwgQMXjT45ZUeixNdvnNQpGxWZUAZma7oeGzwiQlX2jxmNXHHoCu+SLQeGvkW/3HLPXLHfIW5c/LVgulP6PUAo9jl3yVbcQ/+u/c89RezfuGvWuNI4VzGSlVz1Kl47JwXxf3gQCPdj1W8zf7Vowt0F3vZn8qaJ6iq/jp8ZXsnRMxS75OnLArQoibMllnNI7U1H/lEOPLyM+v2IQaPPN5MFIbkyU5lpKfeOqAl3A9vldDkLw7WT9Xl6j5K222uyh37JWNegCts8vzXCADZIF5FLJI0BpPlx2I1BV6N3Y4t9O8tvy65cO9XvCIwOpVHnVoSewS/wamGgTu1+CnwHfB8SVgpS1WxPQk5YR763X8wWdnnjU7/fIKsiWBxlIpcprBnrSMnI1wBcUD5i2EmMJCL8XPYQNuomnUpCydmsKehzbykSvIqILZZ2fVP6gMctYLNspNY32Qq9ac9AT2FnzSgIuko6YcL/RaHTWMrI3hpqEHscdyMZ+QcwXl8am+wxnZyeltw1KT0iVK9Q0tGcz0B39ORFdWuTE+LPRP5igZc/vqrJhoPA1D13AzppnkYtLQYXNMdvAvNp4M3L51A0xgUZcpUp7BHSVbEINW4cOldPnv4miOP/3YeozWtEUqEPXoRUJKApTn9F1aEUCisLUZ3QdWpGAojD1GV2HViSgKEx9RtehFQkoCvM/YGXklyZdjdQAAAAASUVORK5CYII="
+              x="0"
+              y="0"
+              width="90"
+              height="90"
+            />
+          </svg>
+        </span>
+        <span class="app-brand-text demo menu-text fw-bold ms-2">LOCALNET</span>
+      </a>
+
+      <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
+        <i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
+      </a>
+    </div>
+
+    <div class="menu-inner-shadow"></div>
+
+    <ul class="menu-inner py-1">
+      <!-- Dashboards -->
+      <li class="menu-item active open">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-home-smile"></i>
+          <div class="text-truncate" data-i18n="Dashboards">Dashboards</div>
+          <span class="badge rounded-pill bg-danger ms-auto">5</span>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item active">
+            <a href="/" class="menu-link">
+              <div class="text-truncate" data-i18n="Analytics">Analytics</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="dashboards-crm.html" class="menu-link">
+              <div class="text-truncate" data-i18n="CRM">CRM</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-ecommerce-dashboard.html" class="menu-link">
+              <div class="text-truncate" data-i18n="eCommerce">eCommerce</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-logistics-dashboard.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Logistics">Logistics</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-academy-dashboard.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Academy">Academy</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Layouts -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-layout"></i>
+          <div class="text-truncate" data-i18n="Layouts">Layouts</div>
+        </a>
+
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="layouts-collapsed-menu.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Collapsed menu">Collapsed menu</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-content-navbar.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Content navbar">Content navbar</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-content-navbar-with-sidebar.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Content nav + Sidebar">
+                Content nav + Sidebar
+              </div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/horizontal-menu-template"
+              class="menu-link"
+              target="_blank"
+            >
+              <div class="text-truncate" data-i18n="Horizontal">Horizontal</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-without-menu.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Without menu">Without menu</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-without-navbar.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Without navbar">Without navbar</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-fluid.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Fluid">Fluid</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-container.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Container">Container</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="layouts-blank.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Blank">Blank</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Front Pages -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-store"></i>
+          <div class="text-truncate" data-i18n="Front Pages">Front Pages</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a
+              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/landing-page.html"
+              class="menu-link"
+              target="_blank"
+            >
+              <div class="text-truncate" data-i18n="Landing">Landing</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/pricing-page.html"
+              class="menu-link"
+              target="_blank"
+            >
+              <div class="text-truncate" data-i18n="Pricing">Pricing</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/payment-page.html"
+              class="menu-link"
+              target="_blank"
+            >
+              <div class="text-truncate" data-i18n="Payment">Payment</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/checkout-page.html"
+              class="menu-link"
+              target="_blank"
+            >
+              <div class="text-truncate" data-i18n="Checkout">Checkout</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a
+              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/help-center-landing.html"
+              class="menu-link"
+              target="_blank"
+            >
+              <div class="text-truncate" data-i18n="Help Center">Help Center</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Apps & Pages -->
+      <li class="menu-header small text-uppercase">
+        <span class="menu-header-text" data-i18n="Apps & Pages">Apps &amp; Pages</span>
+      </li>
+      <li class="menu-item">
+        <a href="app-email.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-envelope"></i>
+          <div class="text-truncate" data-i18n="Email">Email</div>
+        </a>
+      </li>
+      <li class="menu-item">
+        <a href="app-chat.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-chat"></i>
+          <div class="text-truncate" data-i18n="Chat">Chat</div>
+        </a>
+      </li>
+      <li class="menu-item">
+        <a href="app-calendar.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-calendar"></i>
+          <div class="text-truncate" data-i18n="Calendar">Calendar</div>
+        </a>
+      </li>
+      <li class="menu-item">
+        <a href="app-kanban.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-grid"></i>
+          <div class="text-truncate" data-i18n="Kanban">Kanban</div>
+        </a>
+      </li>
+      <!-- e-commerce-app menu start -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-cart-alt"></i>
+          <div class="text-truncate" data-i18n="eCommerce">eCommerce</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="app-ecommerce-dashboard.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Products">Products</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="app-ecommerce-product-list.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Product List">Product List</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-product-add.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Add Product">Add Product</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-category-list.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Category List">Category List</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Order">Order</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="app-ecommerce-order-list.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Order List">Order List</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-order-details.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Order Details">Order Details</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Customer">Customer</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="app-ecommerce-customer-all.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="All Customers">All Customers</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="javascript:void(0);" class="menu-link menu-toggle">
+                  <div class="text-truncate" data-i18n="Customer Details">Customer Details</div>
+                </a>
+                <ul class="menu-sub">
+                  <li class="menu-item">
+                    <a href="app-ecommerce-customer-details-overview.html" class="menu-link">
+                      <div class="text-truncate" data-i18n="Overview">Overview</div>
+                    </a>
+                  </li>
+                  <li class="menu-item">
+                    <a href="app-ecommerce-customer-details-security.html" class="menu-link">
+                      <div class="text-truncate" data-i18n="Security">Security</div>
+                    </a>
+                  </li>
+                  <li class="menu-item">
+                    <a href="app-ecommerce-customer-details-billing.html" class="menu-link">
+                      <div class="text-truncate" data-i18n="Address & Billing">
+                        Address & Billing
+                      </div>
+                    </a>
+                  </li>
+                  <li class="menu-item">
+                    <a href="app-ecommerce-customer-details-notifications.html" class="menu-link">
+                      <div class="text-truncate" data-i18n="Notifications">Notifications</div>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="app-ecommerce-manage-reviews.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Manage Reviews">Manage Reviews</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-ecommerce-referral.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Referrals">Referrals</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Settings">Settings</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="app-ecommerce-settings-detail.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Store Details">Store Details</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-settings-payments.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Payments">Payments</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-settings-checkout.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Checkout">Checkout</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-settings-shipping.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Shipping & Delivery">
+                    Shipping & Delivery
+                  </div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-settings-locations.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Locations">Locations</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-ecommerce-settings-notifications.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Notifications">Notifications</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <!-- e-commerce-app menu end -->
+      <!-- Academy menu start -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-book-open"></i>
+          <div class="text-truncate" data-i18n="Academy">Academy</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="app-academy-dashboard.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-academy-course.html" class="menu-link">
+              <div class="text-truncate" data-i18n="My Course">My Course</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-academy-course-details.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Course Details">Course Details</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <!-- Academy menu end -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-car"></i>
+          <div class="text-truncate" data-i18n="Logistics">Logistics</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="app-logistics-dashboard.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-logistics-fleet.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Fleet">Fleet</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-food-menu"></i>
+          <div class="text-truncate" data-i18n="Invoice">Invoice</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="app-invoice-list.html" class="menu-link">
+              <div class="text-truncate" data-i18n="List">List</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-invoice-preview.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Preview">Preview</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-invoice-edit.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Edit">Edit</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-invoice-add.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Add">Add</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-user"></i>
+          <div class="text-truncate" data-i18n="Users">Users</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="app-user-list.html" class="menu-link">
+              <div class="text-truncate" data-i18n="List">List</div>
+            </a>
+          </li>
+
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="View">View</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="app-user-view-account.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Account">Account</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-user-view-security.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Security">Security</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-user-view-billing.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Billing & Plans">Billing & Plans</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-user-view-notifications.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Notifications">Notifications</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="app-user-view-connections.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Connections">Connections</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-check-shield"></i>
+          <div class="text-truncate" data-i18n="Roles & Permissions">Roles & Permissions</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="app-access-roles.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Roles">Roles</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="app-access-permission.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Permission">Permission</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-dock-top"></i>
+          <div class="text-truncate" data-i18n="Pages">Pages</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="User Profile">User Profile</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="pages-profile-user.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Profile">Profile</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-profile-teams.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Teams">Teams</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-profile-projects.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Projects">Projects</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-profile-connections.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Connections">Connections</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Account Settings">Account Settings</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="pages-account-settings-account.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Account">Account</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-account-settings-security.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Security">Security</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-account-settings-billing.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Billing & Plans">Billing & Plans</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-account-settings-notifications.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Notifications">Notifications</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-account-settings-connections.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Connections">Connections</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="pages-faq.html" class="menu-link">
+              <div class="text-truncate" data-i18n="FAQ">FAQ</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="pages-pricing.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Pricing">Pricing</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Misc">Misc</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="pages-misc-error.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Error">Error</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-misc-under-maintenance.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Under Maintenance">Under Maintenance</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-misc-comingsoon.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Coming Soon">Coming Soon</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="pages-misc-not-authorized.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Not Authorized">Not Authorized</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-lock-open-alt"></i>
+          <div class="text-truncate" data-i18n="Authentications">Authentications</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Login">Login</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="auth-login-basic.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-login-cover.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Cover">Cover</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Register">Register</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="auth-register-basic.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-register-cover.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Cover">Cover</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-register-multisteps.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Multi-steps">Multi-steps</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Verify Email">Verify Email</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="auth-verify-email-basic.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-verify-email-cover.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Cover">Cover</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Reset Password">Reset Password</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="auth-reset-password-basic.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-reset-password-cover.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Cover">Cover</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Forgot Password">Forgot Password</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="auth-forgot-password-basic.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-forgot-password-cover.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Cover">Cover</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Two Steps">Two Steps</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="auth-two-steps-basic.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="auth-two-steps-cover.html" class="menu-link" target="_blank">
+                  <div class="text-truncate" data-i18n="Cover">Cover</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-spreadsheet"></i>
+          <div class="text-truncate" data-i18n="Wizard Examples">Wizard Examples</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="wizard-ex-checkout.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Checkout">Checkout</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="wizard-ex-property-listing.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Property Listing">Property Listing</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="wizard-ex-create-deal.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Create Deal">Create Deal</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="modal-examples.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-window-open"></i>
+          <div class="text-truncate" data-i18n="Modal Examples">Modal Examples</div>
+        </a>
+      </li>
+
+      <!-- Components -->
+      <li class="menu-header small text-uppercase">
+        <span class="menu-header-text" data-i18n="Components">Components</span>
+      </li>
+      <!-- Cards -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-collection"></i>
+          <div class="text-truncate" data-i18n="Cards">Cards</div>
+          <span class="badge rounded-pill bg-primary ms-auto">6</span>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="cards-basic.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Basic">Basic</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="cards-advance.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Advance">Advance</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="cards-statistics.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Statistics">Statistics</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="cards-analytics.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Analytics">Analytics</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="cards-gamifications.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Gamifications">Gamifications</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="cards-actions.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Actions">Actions</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <!-- User interface -->
+      <li class="menu-item">
+        <a href="javascript:void(0)" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-box"></i>
+          <div class="text-truncate" data-i18n="User interface">User interface</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="ui-accordion.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Accordion">Accordion</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-alerts.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Alerts">Alerts</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-badges.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Badges">Badges</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-buttons.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Buttons">Buttons</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-carousel.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Carousel">Carousel</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-collapse.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Collapse">Collapse</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-dropdowns.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Dropdowns">Dropdowns</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-footer.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Footer">Footer</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-list-groups.html" class="menu-link">
+              <div class="text-truncate" data-i18n="List Groups">List groups</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-modals.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Modals">Modals</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-navbar.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Navbar">Navbar</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-offcanvas.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Offcanvas">Offcanvas</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-pagination-breadcrumbs.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Pagination & Breadcrumbs">
+                Pagination &amp; Breadcrumbs
+              </div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-progress.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Progress">Progress</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-spinners.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Spinners">Spinners</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-tabs-pills.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Tabs & Pills">Tabs &amp; Pills</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-toasts.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Toasts">Toasts</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-tooltips-popovers.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Tooltips & Popovers">
+                Tooltips &amp; Popovers
+              </div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="ui-typography.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Typography">Typography</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Extended components -->
+      <li class="menu-item">
+        <a href="javascript:void(0)" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-copy"></i>
+          <div class="text-truncate" data-i18n="Extended UI">Extended UI</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="extended-ui-avatar.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Avatar">Avatar</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-blockui.html" class="menu-link">
+              <div class="text-truncate" data-i18n="BlockUI">BlockUI</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-drag-and-drop.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Drag & Drop">Drag &amp; Drop</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-media-player.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Media Player">Media Player</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-perfect-scrollbar.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Perfect Scrollbar">Perfect Scrollbar</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-star-ratings.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Star Ratings">Star Ratings</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-sweetalert2.html" class="menu-link">
+              <div class="text-truncate" data-i18n="SweetAlert2">SweetAlert2</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-text-divider.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Text Divider">Text Divider</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="javascript:void(0);" class="menu-link menu-toggle">
+              <div class="text-truncate" data-i18n="Timeline">Timeline</div>
+            </a>
+            <ul class="menu-sub">
+              <li class="menu-item">
+                <a href="extended-ui-timeline-basic.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Basic">Basic</div>
+                </a>
+              </li>
+              <li class="menu-item">
+                <a href="extended-ui-timeline-fullscreen.html" class="menu-link">
+                  <div class="text-truncate" data-i18n="Fullscreen">Fullscreen</div>
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-tour.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Tour">Tour</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-treeview.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Treeview">Treeview</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="extended-ui-misc.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Miscellaneous">Miscellaneous</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Icons -->
+      <li class="menu-item">
+        <a href="javascript:void(0)" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-crown"></i>
+          <div class="text-truncate" data-i18n="Icons">Icons</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="icons-boxicons.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Boxicons">Boxicons</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="icons-font-awesome.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Fontawesome">Fontawesome</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Forms & Tables -->
+      <li class="menu-header small text-uppercase">
+        <span class="menu-header-text" data-i18n="Forms & Tables">Forms &amp; Tables</span>
+      </li>
+      <!-- Forms -->
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-detail"></i>
+          <div class="text-truncate" data-i18n="Form Elements">Form Elements</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="forms-basic-inputs.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Basic Inputs">Basic Inputs</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-input-groups.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Input groups">Input groups</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-custom-options.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Custom Options">Custom Options</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-editors.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Editors">Editors</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-file-upload.html" class="menu-link">
+              <div class="text-truncate" data-i18n="File Upload">File Upload</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-pickers.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Pickers">Pickers</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-selects.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Select & Tags">Select &amp; Tags</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-sliders.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Sliders">Sliders</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-switches.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Switches">Switches</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="forms-extras.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Extras">Extras</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-detail"></i>
+          <div class="text-truncate" data-i18n="Form Layouts">Form Layouts</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="form-layouts-vertical.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Vertical Form">Vertical Form</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="form-layouts-horizontal.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Horizontal Form">Horizontal Form</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="form-layouts-sticky.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Sticky Actions">Sticky Actions</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-carousel"></i>
+          <div class="text-truncate" data-i18n="Form Wizard">Form Wizard</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="form-wizard-numbered.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Numbered">Numbered</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="form-wizard-icons.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Icons">Icons</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="form-validation.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-list-check"></i>
+          <div class="text-truncate" data-i18n="Form Validation">Form Validation</div>
+        </a>
+      </li>
+      <!-- Tables -->
+      <li class="menu-item">
+        <a href="tables-basic.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-table"></i>
+          <div class="text-truncate" data-i18n="Tables">Tables</div>
+        </a>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-grid"></i>
+          <div class="text-truncate" data-i18n="Datatables">Datatables</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="tables-datatables-basic.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Basic">Basic</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="tables-datatables-advanced.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Advanced">Advanced</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="tables-datatables-extensions.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Extensions">Extensions</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- Charts & Maps -->
+      <li class="menu-header small text-uppercase">
+        <span class="menu-header-text" data-i18n="Charts & Maps">Charts &amp; Maps</span>
+      </li>
+      <li class="menu-item">
+        <a href="javascript:void(0);" class="menu-link menu-toggle">
+          <i class="menu-icon tf-icons bx bx-chart"></i>
+          <div class="text-truncate" data-i18n="Charts">Charts</div>
+        </a>
+        <ul class="menu-sub">
+          <li class="menu-item">
+            <a href="charts-apex.html" class="menu-link">
+              <div class="text-truncate" data-i18n="Apex Charts">Apex Charts</div>
+            </a>
+          </li>
+          <li class="menu-item">
+            <a href="charts-chartjs.html" class="menu-link">
+              <div class="text-truncate" data-i18n="ChartJS">ChartJS</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="menu-item">
+        <a href="maps-leaflet.html" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-map-alt"></i>
+          <div class="text-truncate" data-i18n="Leaflet Maps">Leaflet Maps</div>
+        </a>
+      </li>
+
+      <!-- Misc -->
+      <li class="menu-header small text-uppercase">
+        <span class="menu-header-text" data-i18n="Misc">Misc</span>
+      </li>
+      <li class="menu-item">
+        <a href="https://themeselection.com/support/" target="_blank" class="menu-link">
+          <i class="menu-icon tf-icons bx bx-support"></i>
+          <div class="text-truncate" data-i18n="Support">Support</div>
+        </a>
+      </li>
+      <li class="menu-item">
+        <a
+          href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/"
+          target="_blank"
+          class="menu-link"
+        >
+          <i class="menu-icon tf-icons bx bx-file"></i>
+          <div class="text-truncate" data-i18n="Documentation">Documentation</div>
+        </a>
+      </li>
+    </ul>
+  </aside>
+</template>
+<script setup>
+</script>
+<style>
+</style>
diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
new file mode 100644
index 0000000..8068ff7
--- /dev/null
+++ b/src/layouts/TheTop.vue
@@ -0,0 +1,567 @@
+<template>
+  <nav
+    class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
+    id="layout-navbar"
+  >
+    <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
+      <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
+        <i class="bx bx-menu bx-md"></i>
+      </a>
+    </div>
+
+    <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
+      <!-- Search -->
+      <div class="navbar-nav align-items-center">
+        <div class="nav-item navbar-search-wrapper mb-0">
+          <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
+            <i class="bx bx-search bx-md"></i>
+            <span class="d-none d-md-inline-block text-muted fw-normal ms-4">Search (Ctrl+/)</span>
+          </a>
+        </div>
+      </div>
+      <!-- /Search -->
+
+      <ul class="navbar-nav flex-row align-items-center ms-auto">
+        <!-- Language -->
+        <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
+          <a
+            class="nav-link dropdown-toggle hide-arrow"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+          >
+            <i class="bx bx-globe bx-md"></i>
+          </a>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <a
+                class="dropdown-item"
+                href="javascript:void(0);"
+                data-language="en"
+                data-text-direction="ltr"
+              >
+                <span>English</span>
+              </a>
+            </li>
+            <li>
+              <a
+                class="dropdown-item"
+                href="javascript:void(0);"
+                data-language="fr"
+                data-text-direction="ltr"
+              >
+                <span>French</span>
+              </a>
+            </li>
+            <li>
+              <a
+                class="dropdown-item"
+                href="javascript:void(0);"
+                data-language="ar"
+                data-text-direction="rtl"
+              >
+                <span>Arabic</span>
+              </a>
+            </li>
+            <li>
+              <a
+                class="dropdown-item"
+                href="javascript:void(0);"
+                data-language="de"
+                data-text-direction="ltr"
+              >
+                <span>German</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <!-- /Language -->
+
+        <!-- Style Switcher -->
+        <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
+          <a
+            class="nav-link dropdown-toggle hide-arrow"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+          >
+            <i class="bx bx-md"></i>
+          </a>
+          <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
+            <li>
+              <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
+                <span><i class="bx bx-sun bx-md me-3"></i>Light</span>
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
+                <span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
+                <span><i class="bx bx-desktop bx-md me-3"></i>System</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <!-- / Style Switcher-->
+
+        <!-- Quick links  -->
+        <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
+          <a
+            class="nav-link dropdown-toggle hide-arrow"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+            data-bs-auto-close="outside"
+            aria-expanded="false"
+          >
+            <i class="bx bx-grid-alt bx-md"></i>
+          </a>
+          <div class="dropdown-menu dropdown-menu-end p-0">
+            <div class="dropdown-menu-header border-bottom">
+              <div class="dropdown-header d-flex align-items-center py-3">
+                <h6 class="mb-0 me-auto">Shortcuts</h6>
+                <a
+                  href="javascript:void(0)"
+                  class="dropdown-shortcuts-add py-2"
+                  data-bs-toggle="tooltip"
+                  data-bs-placement="top"
+                  title="Add shortcuts"
+                  ><i class="bx bx-plus-circle text-heading"></i
+                ></a>
+              </div>
+            </div>
+            <div class="dropdown-shortcuts-list scrollable-container">
+              <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-calendar bx-26px text-heading"></i>
+                  </span>
+                  <a href="app-calendar.html" class="stretched-link">Calendar</a>
+                  <small>Appointments</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-food-menu bx-26px text-heading"></i>
+                  </span>
+                  <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
+                  <small>Manage Accounts</small>
+                </div>
+              </div>
+              <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-user bx-26px text-heading"></i>
+                  </span>
+                  <a href="app-user-list.html" class="stretched-link">User App</a>
+                  <small>Manage Users</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-check-shield bx-26px text-heading"></i>
+                  </span>
+                  <a href="app-access-roles.html" class="stretched-link">Role Management</a>
+                  <small>Permission</small>
+                </div>
+              </div>
+              <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
+                  </span>
+                  <a href="index.html" class="stretched-link">Dashboard</a>
+                  <small>User Dashboard</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-cog bx-26px text-heading"></i>
+                  </span>
+                  <a href="pages-account-settings-account.html" class="stretched-link">Setting</a>
+                  <small>Account Settings</small>
+                </div>
+              </div>
+              <div class="row row-bordered overflow-visible g-0">
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-help-circle bx-26px text-heading"></i>
+                  </span>
+                  <a href="pages-faq.html" class="stretched-link">FAQs</a>
+                  <small>FAQs & Articles</small>
+                </div>
+                <div class="dropdown-shortcuts-item col">
+                  <span class="dropdown-shortcuts-icon rounded-circle mb-3">
+                    <i class="bx bx-window-open bx-26px text-heading"></i>
+                  </span>
+                  <a href="modal-examples.html" class="stretched-link">Modals</a>
+                  <small>Useful Popups</small>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <!-- Quick links -->
+
+        <!-- Notification -->
+        <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
+          <a
+            class="nav-link dropdown-toggle hide-arrow"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+            data-bs-auto-close="outside"
+            aria-expanded="false"
+          >
+            <span class="position-relative">
+              <i class="bx bx-bell bx-md"></i>
+              <span
+                class="badge rounded-pill bg-danger badge-dot badge-notifications border"
+              ></span>
+            </span>
+          </a>
+          <ul class="dropdown-menu dropdown-menu-end p-0">
+            <li class="dropdown-menu-header border-bottom">
+              <div class="dropdown-header d-flex align-items-center py-3">
+                <h6 class="mb-0 me-auto">Notification</h6>
+                <div class="d-flex align-items-center h6 mb-0">
+                  <span class="badge bg-label-primary me-2">8 New</span>
+                  <a
+                    href="javascript:void(0)"
+                    class="dropdown-notifications-all p-2"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Mark all as read"
+                    ><i class="bx bx-envelope-open text-heading"></i
+                  ></a>
+                </div>
+              </div>
+            </li>
+            <li class="dropdown-notifications-list scrollable-container">
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <img src="/img/avatars/1.png" class="rounded-circle" />
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
+                      <small class="mb-1 d-block text-body"
+                        >Won the monthly best seller gold badge</small
+                      >
+                      <small class="text-muted">1h ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">Charles Franklin</h6>
+                      <small class="mb-1 d-block text-body">Accepted your connection</small>
+                      <small class="text-muted">12hr ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
+                >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <img src="/img/avatars/2.png" class="rounded-circle" />
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">New Message ✉️</h6>
+                      <small class="mb-1 d-block text-body"
+                        >You have new message from Natalie</small
+                      >
+                      <small class="text-muted">1h ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-success"
+                          ><i class="bx bx-cart"></i
+                        ></span>
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">Whoo! You have new order 🛒</h6>
+                      <small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
+                      <small class="text-muted">1 day ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
+                >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <img src="/img/avatars/9.png" class="rounded-circle" />
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">Application has been approved 🚀</h6>
+                      <small class="mb-1 d-block text-body"
+                        >Your ABC project application has been approved.</small
+                      >
+                      <small class="text-muted">2 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
+                >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-success"
+                          ><i class="bx bx-pie-chart-alt"></i
+                        ></span>
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">Monthly report is generated</h6>
+                      <small class="mb-1 d-block text-body"
+                        >July monthly financial report is generated
+                      </small>
+                      <small class="text-muted">3 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
+                >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <img src="/img/avatars/5.png" class="rounded-circle" />
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">Send connection request</h6>
+                      <small class="mb-1 d-block text-body"
+                        >Peter sent you connection request</small
+                      >
+                      <small class="text-muted">4 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <img src="/img/avatars/6.png" class="rounded-circle" />
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">New message from Jane</h6>
+                      <small class="mb-1 d-block text-body">Your have new message from Jane</small>
+                      <small class="text-muted">5 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+                <li
+                  class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
+                >
+                  <div class="d-flex">
+                    <div class="flex-shrink-0 me-3">
+                      <div class="avatar">
+                        <span class="avatar-initial rounded-circle bg-label-warning"
+                          ><i class="bx bx-error"></i
+                        ></span>
+                      </div>
+                    </div>
+                    <div class="flex-grow-1">
+                      <h6 class="small mb-0">CPU is running high</h6>
+                      <small class="mb-1 d-block text-body"
+                        >CPU Utilization Percent is currently at 88.63%,</small
+                      >
+                      <small class="text-muted">5 days ago</small>
+                    </div>
+                    <div class="flex-shrink-0 dropdown-notifications-actions">
+                      <a href="javascript:void(0)" class="dropdown-notifications-read"
+                        ><span class="badge badge-dot"></span
+                      ></a>
+                      <a href="javascript:void(0)" class="dropdown-notifications-archive"
+                        ><span class="bx bx-x"></span
+                      ></a>
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </li>
+            <li class="border-top">
+              <div class="d-grid p-4">
+                <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
+                  <small class="align-middle">View all notifications</small>
+                </a>
+              </div>
+            </li>
+          </ul>
+        </li>
+        <!--/ Notification -->
+        <!-- User -->
+        <li class="nav-item navbar-dropdown dropdown-user dropdown">
+          <a
+            class="nav-link dropdown-toggle hide-arrow p-0"
+            href="javascript:void(0);"
+            data-bs-toggle="dropdown"
+          >
+            <div class="avatar avatar-online">
+              <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
+            </div>
+          </a>
+          <ul class="dropdown-menu dropdown-menu-end">
+            <li>
+              <a class="dropdown-item" href="pages-account-settings-account.html">
+                <div class="d-flex">
+                  <div class="flex-shrink-0 me-3">
+                    <div class="avatar avatar-online">
+                      <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
+                    </div>
+                  </div>
+                  <div class="flex-grow-1">
+                    <h6 class="mb-0">John Doe</h6>
+                    <small class="text-muted">Admin</small>
+                  </div>
+                </div>
+              </a>
+            </li>
+            <li>
+              <div class="dropdown-divider my-1"></div>
+            </li>
+            <li>
+              <a class="dropdown-item" href="pages-profile-user.html">
+                <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="pages-account-settings-account.html">
+                <i class="bx bx-cog bx-md me-3"></i><span>Settings</span>
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="pages-account-settings-billing.html">
+                <span class="d-flex align-items-center align-middle">
+                  <i class="flex-shrink-0 bx bx-credit-card bx-md me-3"></i
+                  ><span class="flex-grow-1 align-middle">Billing Plan</span>
+                  <span class="flex-shrink-0 badge rounded-pill bg-danger">4</span>
+                </span>
+              </a>
+            </li>
+            <li>
+              <div class="dropdown-divider my-1"></div>
+            </li>
+            <li>
+              <a class="dropdown-item" href="pages-pricing.html">
+                <i class="bx bx-dollar bx-md me-3"></i><span>Pricing</span>
+              </a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="pages-faq.html">
+                <i class="bx bx-help-circle bx-md me-3"></i><span>FAQ</span>
+              </a>
+            </li>
+            <li>
+              <div class="dropdown-divider my-1"></div>
+            </li>
+            <li>
+              <a class="dropdown-item" href="auth-login-cover.html" target="_blank">
+                <i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <!--/ User -->
+      </ul>
+    </div>
+
+    <!-- Search Small Screens -->
+    <div class="navbar-search-wrapper search-input-wrapper d-none">
+      <input
+        type="text"
+        class="form-control search-input container-xxl border-0"
+        placeholder="Search..."
+        aria-label="Search..."
+      />
+      <i class="bx bx-x bx-md search-toggler cursor-pointer"></i>
+    </div>
+  </nav>
+</template>
+<script setup>
+</script>
+<style>
+</style>
diff --git a/src/layouts/TheView.vue b/src/layouts/TheView.vue
deleted file mode 100644
index 88d603c..0000000
--- a/src/layouts/TheView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <RouterView></RouterView>
-</template>
-
-<script setup></script>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 4251d87..7f1e4c3 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,3202 +1,1292 @@
 <template>
-  <div class="layout-wrapper layout-content-navbar">
-    <div class="layout-container">
-      <!-- Menu -->
+  <div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row">
+      <div class="col-xxl-8 mb-6 order-0">
+        <div class="card">
+          <div class="d-flex align-items-start row">
+            <div class="col-sm-7">
+              <div class="card-body">
+                <h5 class="card-title text-primary mb-3">Congratulations John! 🎉</h5>
+                <p class="mb-6">
+                  You have done 72% more sales today.<br />Check your new badge in your profile.
+                </p>
 
-      <aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
-        <div class="app-brand demo">
-          <a href="/" class="app-brand-link">
-            <span class="app-brand-logo demo">
-              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="90" viewBox="0 0 90 90">
-                <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAAAXNSR0IArs4c6QAACr1JREFUeF7t3Ht0HFUdB/DvbyZpktk0hQIiyltsd7aAKB6Px3PkkIUgFmvJ7rJKEWotLQ8RETjq0T/oHyp6RERE5CW1cAAN2Q2liPIqqOhRj7xKu5uUUl6F8iivJjNpHjM/mQ1JQ/bu3El29u72uPNn7t37u/czd29mfnNnCfVDiQApiVIPgjq0oklQh65DKxJQFKY+o+vQigQUhanP6Dq0IgFFYeozug6tSEBRmPqMrkMrElAUZo+Y0VbGXA7Gt0GYD2A7mNYYxvBPaOGWIUVOZYepaWhmkJ0xrwXhXMFIeyLJfKJsAUUN1Cx0ATkbuw7glQKLtwB0RJL5xxU5lR2mJqHHkM0bAJwtGOGbYOqIpHJPlD16hQ3UHDSvgmYfad4IwjcEDjtYo47WztyTCo1CCVVT0NwF3dajNwK0TDC6N5i0jtbEpqdCGbniRmoGegw5dhPAXxci63xC66m9Tyv2CS1cTUAXkBvM34GxtHhk/LrLWnx2KrcptFFXoaGqQ3vIg7q5moEzi8bv4rUCcnpTTmbDqw9ttlqbj9N0bY7jIldrJ6aq0GPI0TUMOkMA+apLenx2YmNehjyQMU8k4BYAB+yuy3cPa81L9+588h3Z51WUVw3aQ7YazFuJcbpgoNsdduJtqc29MgQrs+DLgHsngFlT6zJhaWsi752Aqh9VgS4g6+ZtBHxFIPCK47jxtnRfn0zHzkYTzHSHCJmYLzFSvVfK2lBVrhyaHz6+wX7rtdsBnCYY5MsOcbwt0btZBmBnY6cx820AGqfUZQIuNpL5q2RtqCxXCs3XH9to72vdDlBKcHWxTWeKN6fyz8gABrqjpxPhVoD0ImSii4xE7mpZG6rLlUFzV2yWreN2gJOCQb6ka3p7c+fGZ2UAAxnzTAKvFiIzX2ikeq+RtVGNciXQY8j8BwCdgkG+qMNpb05u3ioDGMjGlhG73p1j0UwGcEEkmb9W1ka1yisOXUDWuAuExYJBvqA5bntLuu85GYDVHV0BouuBom1sDKLzI4ncdbI2qlleUej3l4tugBcJBvm8pnF7S2fv8zIAq9s8D4TfCJGZz42ker1MX00fFYN+f7nIAjhFIPCcBrS3JPMvyHTsTOxbDP6VEBlYGUnmb5K1UQvlFYHme49osu3GHhC+KEImh4430rkXZQB2d/RiJrpCgOyCaUUklbtZ1katlIcO7eUc7LbmHoBOLh4kbSUH7UGQBzLmdwn4meAy0GHSVrQmcqtrBTFIP0KFHkM27gL4C4Lgz5KutxunbnxJ1jErE/sBwD8WIjOWt6Z618jaqLXy0KC568AWW2/rESEz8IyGxriR3LBNBmBlope9d2GxSlSvlnIXsnFMLQ8Fmtcda9gjdg8YJ00NwMBmzXHiRnrzy7LOWVnzR2D8sHQ9usZI5C4kAsvaqrXysqELyMP2WgAnFiEz+qjRjUcW970iG7idMX/KwPdk9QBcayTyF+xp2GVBe8iDw9Y6BsWLvyrUy+B4JJnfLsMbyMSuIPAlsnoT5YzrjGT+/D0Je8bQHrI1ZP+JCMcLgPLsULw1nXvVD8/bVmD1mL8kbxdS8TFMhO8z4zsADhJcwdxgJHLn7inYM4LmW46OWJGRewk4rgiAkeNGPd66eONrMmQ7Y/4ahG8K6g0BWjqS3HT3rsy8wx3oDwM4WFDvJiORX7knYE8buvBsbk7L/cT4vGDgm1xqjM9ObHhdipyN/hagcwT1bGZOtKZ67xsvG+yaf5irax72IYITe7OxMb+CVsENvPRUoeK0oa1MbBXAlwkG/LTrjpwwO73lDV9kb4PMUYVdSMuL6rmwXM1dNDvZ56F+4BjsiR7quuT9/dDi9nm14fSuoDScsA29JbJ/qP9gNGFH26LNO2ba/gygTS/TNmWw/JTrjHZIkcf2090s2rvBDnZqDXSKkcg9WmowgxnzEBfwsA8rqkNYY4zml4eF7T2ksPYdvJzA5wEwAO+Sku8jvWFlkJuu4ouDaZ4iK2N6X9HdJ4ixi1yaH+i2upBPZlF+4h1iOtlI5f4t647dFTuYdQ+bDxcM5tYWJ7+sXGxJQuzRSDIvWjZ9uz6DGR17duogCby+ZVZkES16zPaLNpAx/yr4B/omgJOmszPUvuvIg9hxvJn9sWJsvq3F6V06U2z/hFjwXE0IM1qch2DGI5Em4xQ/bCtjbvkgDr/OzB2tqb4Nspk8tdzOHH2gi5H1BHw8LGz/hBgC52pEY5n2jC58rRp4XYnb7b9FrMaFdNYGSxTMypj3TMpPb3dJPyHIBplSJ8HumvdRV9c97HlT6zDhjsho/sygMzusXE2pvk4b2mtI0qmS2P3ZBXGN3Qff2/e8zSE+Mci2AtlMt9bO/wiPaOtp7LWLDxwM/DHi5M+QYYeVq/Hr64ygC9g+eWcm/D0ySgspnRuYGtzKmGdrjvtQkOeEMuTxcitjHkCg9QyOCj5zpzF3/yXU/sioqL2wcjWyvs4YuoDt/yTlUbvBXbjf4r5+WSfCKB/oin2YdF4PwCxuj7uNHZEldM5jI5PLwsrVBOl/WdBjy0hhK0GJZ4P0j12Dwwv3+dqWnUE6U26dgbVH7k8jznoQYsVtUcZwsITSueFCv0PI1Uynv2VD78ZGqafd/xxyhhbOTW99dzodm2nd/uzRH9J4xJvZCwRt9BgOfRW7GhrLzdVMt3+hQE9gl96/8a8hZ+hkZdhdR+ynaY0PgXBUEQhjLWuYW06uZrrIXv3QoCctI+IdSS7+M8RDJynF1hseAOgTAWE2us5IXJZGCNhWUbVQoSctI6X22P13WGvqULU5fOe6efvqQ/oDIBzjC8QIlBCbKXLoM3q8I767RhmPjTQ3dOz1paffLqfjQT+7MxvdR2d6AMAnxZ8JlhALGq9UvdBn9AS2/z7ox0cdrWNOepP3BmxFj7e6Dp/TpDfdC+BzgvX6SafJ6Sgn/Rm08xWDLiwj/thPOMQdbYleL6lUkeN95L8A+KwgQMXjT45ZUeixNdvnNQpGxWZUAZma7oeGzwiQlX2jxmNXHHoCu+SLQeGvkW/3HLPXLHfIW5c/LVgulP6PUAo9jl3yVbcQ/+u/c89RezfuGvWuNI4VzGSlVz1Kl47JwXxf3gQCPdj1W8zf7Vowt0F3vZn8qaJ6iq/jp8ZXsnRMxS75OnLArQoibMllnNI7U1H/lEOPLyM+v2IQaPPN5MFIbkyU5lpKfeOqAl3A9vldDkLw7WT9Xl6j5K222uyh37JWNegCts8vzXCADZIF5FLJI0BpPlx2I1BV6N3Y4t9O8tvy65cO9XvCIwOpVHnVoSewS/wamGgTu1+CnwHfB8SVgpS1WxPQk5YR763X8wWdnnjU7/fIKsiWBxlIpcprBnrSMnI1wBcUD5i2EmMJCL8XPYQNuomnUpCydmsKehzbykSvIqILZZ2fVP6gMctYLNspNY32Qq9ac9AT2FnzSgIuko6YcL/RaHTWMrI3hpqEHscdyMZ+QcwXl8am+wxnZyeltw1KT0iVK9Q0tGcz0B39ORFdWuTE+LPRP5igZc/vqrJhoPA1D13AzppnkYtLQYXNMdvAvNp4M3L51A0xgUZcpUp7BHSVbEINW4cOldPnv4miOP/3YeozWtEUqEPXoRUJKApTn9F1aEUCisLUZ3QdWpGAojD1GV2HViSgKEx9RtehFQkoCvM/YGXklyZdjdQAAAAASUVORK5CYII=" x="0" y="0" width="90" height="90"/>
-              </svg>
-            </span>
-            <span class="app-brand-text demo menu-text fw-bold ms-2">LOCALNET</span>
-          </a>
-
-          <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
-            <i
-              class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"
-            ></i>
-          </a>
-        </div>
-
-        <div class="menu-inner-shadow"></div>
-
-        <ul class="menu-inner py-1">
-          <!-- Dashboards -->
-          <li class="menu-item active open">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-home-smile"></i>
-              <div class="text-truncate" data-i18n="Dashboards">Dashboards</div>
-              <span class="badge rounded-pill bg-danger ms-auto">5</span>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item active">
-                <a href="/" class="menu-link">
-                  <div class="text-truncate" data-i18n="Analytics">Analytics</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="dashboards-crm.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="CRM">CRM</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-ecommerce-dashboard.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="eCommerce">eCommerce</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-logistics-dashboard.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Logistics">Logistics</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-academy-dashboard.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Academy">Academy</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Layouts -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-layout"></i>
-              <div class="text-truncate" data-i18n="Layouts">Layouts</div>
-            </a>
-
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="layouts-collapsed-menu.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Collapsed menu">Collapsed menu</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-content-navbar.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Content navbar">Content navbar</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-content-navbar-with-sidebar.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Content nav + Sidebar">
-                    Content nav + Sidebar
-                  </div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a
-                  href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/horizontal-menu-template"
-                  class="menu-link"
-                  target="_blank"
-                >
-                  <div class="text-truncate" data-i18n="Horizontal">Horizontal</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-without-menu.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Without menu">Without menu</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-without-navbar.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Without navbar">Without navbar</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-fluid.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Fluid">Fluid</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-container.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Container">Container</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="layouts-blank.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Blank">Blank</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Front Pages -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-store"></i>
-              <div class="text-truncate" data-i18n="Front Pages">Front Pages</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a
-                  href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/landing-page.html"
-                  class="menu-link"
-                  target="_blank"
-                >
-                  <div class="text-truncate" data-i18n="Landing">Landing</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a
-                  href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/pricing-page.html"
-                  class="menu-link"
-                  target="_blank"
-                >
-                  <div class="text-truncate" data-i18n="Pricing">Pricing</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a
-                  href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/payment-page.html"
-                  class="menu-link"
-                  target="_blank"
-                >
-                  <div class="text-truncate" data-i18n="Payment">Payment</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a
-                  href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/checkout-page.html"
-                  class="menu-link"
-                  target="_blank"
-                >
-                  <div class="text-truncate" data-i18n="Checkout">Checkout</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a
-                  href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/front-pages/help-center-landing.html"
-                  class="menu-link"
-                  target="_blank"
-                >
-                  <div class="text-truncate" data-i18n="Help Center">Help Center</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Apps & Pages -->
-          <li class="menu-header small text-uppercase">
-            <span class="menu-header-text" data-i18n="Apps & Pages">Apps &amp; Pages</span>
-          </li>
-          <li class="menu-item">
-            <a href="app-email.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-envelope"></i>
-              <div class="text-truncate" data-i18n="Email">Email</div>
-            </a>
-          </li>
-          <li class="menu-item">
-            <a href="app-chat.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-chat"></i>
-              <div class="text-truncate" data-i18n="Chat">Chat</div>
-            </a>
-          </li>
-          <li class="menu-item">
-            <a href="app-calendar.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-calendar"></i>
-              <div class="text-truncate" data-i18n="Calendar">Calendar</div>
-            </a>
-          </li>
-          <li class="menu-item">
-            <a href="app-kanban.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-grid"></i>
-              <div class="text-truncate" data-i18n="Kanban">Kanban</div>
-            </a>
-          </li>
-          <!-- e-commerce-app menu start -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-cart-alt"></i>
-              <div class="text-truncate" data-i18n="eCommerce">eCommerce</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="app-ecommerce-dashboard.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Products">Products</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="app-ecommerce-product-list.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Product List">Product List</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-product-add.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Add Product">Add Product</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-category-list.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Category List">Category List</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Order">Order</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="app-ecommerce-order-list.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Order List">Order List</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-order-details.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Order Details">Order Details</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Customer">Customer</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="app-ecommerce-customer-all.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="All Customers">All Customers</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="javascript:void(0);" class="menu-link menu-toggle">
-                      <div class="text-truncate" data-i18n="Customer Details">Customer Details</div>
-                    </a>
-                    <ul class="menu-sub">
-                      <li class="menu-item">
-                        <a href="app-ecommerce-customer-details-overview.html" class="menu-link">
-                          <div class="text-truncate" data-i18n="Overview">Overview</div>
-                        </a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="app-ecommerce-customer-details-security.html" class="menu-link">
-                          <div class="text-truncate" data-i18n="Security">Security</div>
-                        </a>
-                      </li>
-                      <li class="menu-item">
-                        <a href="app-ecommerce-customer-details-billing.html" class="menu-link">
-                          <div class="text-truncate" data-i18n="Address & Billing">
-                            Address & Billing
-                          </div>
-                        </a>
-                      </li>
-                      <li class="menu-item">
-                        <a
-                          href="app-ecommerce-customer-details-notifications.html"
-                          class="menu-link"
-                        >
-                          <div class="text-truncate" data-i18n="Notifications">Notifications</div>
-                        </a>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="app-ecommerce-manage-reviews.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Manage Reviews">Manage Reviews</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-ecommerce-referral.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Referrals">Referrals</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Settings">Settings</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="app-ecommerce-settings-detail.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Store Details">Store Details</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-settings-payments.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Payments">Payments</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-settings-checkout.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Checkout">Checkout</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-settings-shipping.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Shipping & Delivery">
-                        Shipping & Delivery
-                      </div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-settings-locations.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Locations">Locations</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-ecommerce-settings-notifications.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Notifications">Notifications</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </li>
-          <!-- e-commerce-app menu end -->
-          <!-- Academy menu start -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-book-open"></i>
-              <div class="text-truncate" data-i18n="Academy">Academy</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="app-academy-dashboard.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-academy-course.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="My Course">My Course</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-academy-course-details.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Course Details">Course Details</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <!-- Academy menu end -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-car"></i>
-              <div class="text-truncate" data-i18n="Logistics">Logistics</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="app-logistics-dashboard.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Dashboard">Dashboard</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-logistics-fleet.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Fleet">Fleet</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-food-menu"></i>
-              <div class="text-truncate" data-i18n="Invoice">Invoice</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="app-invoice-list.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="List">List</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-invoice-preview.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Preview">Preview</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-invoice-edit.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Edit">Edit</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-invoice-add.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Add">Add</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-user"></i>
-              <div class="text-truncate" data-i18n="Users">Users</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="app-user-list.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="List">List</div>
-                </a>
-              </li>
-
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="View">View</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="app-user-view-account.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Account">Account</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-user-view-security.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Security">Security</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-user-view-billing.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Billing & Plans">Billing & Plans</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-user-view-notifications.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Notifications">Notifications</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="app-user-view-connections.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Connections">Connections</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-check-shield"></i>
-              <div class="text-truncate" data-i18n="Roles & Permissions">Roles & Permissions</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="app-access-roles.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Roles">Roles</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="app-access-permission.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Permission">Permission</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-dock-top"></i>
-              <div class="text-truncate" data-i18n="Pages">Pages</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="User Profile">User Profile</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="pages-profile-user.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Profile">Profile</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-profile-teams.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Teams">Teams</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-profile-projects.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Projects">Projects</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-profile-connections.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Connections">Connections</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Account Settings">Account Settings</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="pages-account-settings-account.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Account">Account</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-account-settings-security.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Security">Security</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-account-settings-billing.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Billing & Plans">Billing & Plans</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-account-settings-notifications.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Notifications">Notifications</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-account-settings-connections.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Connections">Connections</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="pages-faq.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="FAQ">FAQ</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="pages-pricing.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Pricing">Pricing</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Misc">Misc</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="pages-misc-error.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Error">Error</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-misc-under-maintenance.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Under Maintenance">
-                        Under Maintenance
-                      </div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-misc-comingsoon.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Coming Soon">Coming Soon</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="pages-misc-not-authorized.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Not Authorized">Not Authorized</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-lock-open-alt"></i>
-              <div class="text-truncate" data-i18n="Authentications">Authentications</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Login">Login</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="auth-login-basic.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-login-cover.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Cover">Cover</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Register">Register</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="auth-register-basic.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-register-cover.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Cover">Cover</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-register-multisteps.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Multi-steps">Multi-steps</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Verify Email">Verify Email</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="auth-verify-email-basic.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-verify-email-cover.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Cover">Cover</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Reset Password">Reset Password</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="auth-reset-password-basic.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-reset-password-cover.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Cover">Cover</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Forgot Password">Forgot Password</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="auth-forgot-password-basic.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-forgot-password-cover.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Cover">Cover</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Two Steps">Two Steps</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="auth-two-steps-basic.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="auth-two-steps-cover.html" class="menu-link" target="_blank">
-                      <div class="text-truncate" data-i18n="Cover">Cover</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-spreadsheet"></i>
-              <div class="text-truncate" data-i18n="Wizard Examples">Wizard Examples</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="wizard-ex-checkout.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Checkout">Checkout</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="wizard-ex-property-listing.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Property Listing">Property Listing</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="wizard-ex-create-deal.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Create Deal">Create Deal</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="modal-examples.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-window-open"></i>
-              <div class="text-truncate" data-i18n="Modal Examples">Modal Examples</div>
-            </a>
-          </li>
-
-          <!-- Components -->
-          <li class="menu-header small text-uppercase">
-            <span class="menu-header-text" data-i18n="Components">Components</span>
-          </li>
-          <!-- Cards -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-collection"></i>
-              <div class="text-truncate" data-i18n="Cards">Cards</div>
-              <span class="badge rounded-pill bg-primary ms-auto">6</span>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="cards-basic.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Basic">Basic</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="cards-advance.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Advance">Advance</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="cards-statistics.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Statistics">Statistics</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="cards-analytics.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Analytics">Analytics</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="cards-gamifications.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Gamifications">Gamifications</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="cards-actions.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Actions">Actions</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <!-- User interface -->
-          <li class="menu-item">
-            <a href="javascript:void(0)" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-box"></i>
-              <div class="text-truncate" data-i18n="User interface">User interface</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="ui-accordion.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Accordion">Accordion</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-alerts.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Alerts">Alerts</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-badges.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Badges">Badges</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-buttons.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Buttons">Buttons</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-carousel.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Carousel">Carousel</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-collapse.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Collapse">Collapse</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-dropdowns.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Dropdowns">Dropdowns</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-footer.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Footer">Footer</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-list-groups.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="List Groups">List groups</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-modals.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Modals">Modals</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-navbar.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Navbar">Navbar</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-offcanvas.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Offcanvas">Offcanvas</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-pagination-breadcrumbs.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Pagination & Breadcrumbs">
-                    Pagination &amp; Breadcrumbs
-                  </div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-progress.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Progress">Progress</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-spinners.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Spinners">Spinners</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-tabs-pills.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Tabs & Pills">Tabs &amp; Pills</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-toasts.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Toasts">Toasts</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-tooltips-popovers.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Tooltips & Popovers">
-                    Tooltips &amp; Popovers
-                  </div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="ui-typography.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Typography">Typography</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Extended components -->
-          <li class="menu-item">
-            <a href="javascript:void(0)" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-copy"></i>
-              <div class="text-truncate" data-i18n="Extended UI">Extended UI</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="extended-ui-avatar.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Avatar">Avatar</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-blockui.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="BlockUI">BlockUI</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-drag-and-drop.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Drag & Drop">Drag &amp; Drop</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-media-player.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Media Player">Media Player</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-perfect-scrollbar.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Perfect Scrollbar">Perfect Scrollbar</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-star-ratings.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Star Ratings">Star Ratings</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-sweetalert2.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="SweetAlert2">SweetAlert2</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-text-divider.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Text Divider">Text Divider</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="javascript:void(0);" class="menu-link menu-toggle">
-                  <div class="text-truncate" data-i18n="Timeline">Timeline</div>
-                </a>
-                <ul class="menu-sub">
-                  <li class="menu-item">
-                    <a href="extended-ui-timeline-basic.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Basic">Basic</div>
-                    </a>
-                  </li>
-                  <li class="menu-item">
-                    <a href="extended-ui-timeline-fullscreen.html" class="menu-link">
-                      <div class="text-truncate" data-i18n="Fullscreen">Fullscreen</div>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-tour.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Tour">Tour</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-treeview.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Treeview">Treeview</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="extended-ui-misc.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Miscellaneous">Miscellaneous</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Icons -->
-          <li class="menu-item">
-            <a href="javascript:void(0)" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-crown"></i>
-              <div class="text-truncate" data-i18n="Icons">Icons</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="icons-boxicons.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Boxicons">Boxicons</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="icons-font-awesome.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Fontawesome">Fontawesome</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Forms & Tables -->
-          <li class="menu-header small text-uppercase">
-            <span class="menu-header-text" data-i18n="Forms & Tables">Forms &amp; Tables</span>
-          </li>
-          <!-- Forms -->
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-detail"></i>
-              <div class="text-truncate" data-i18n="Form Elements">Form Elements</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="forms-basic-inputs.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Basic Inputs">Basic Inputs</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-input-groups.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Input groups">Input groups</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-custom-options.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Custom Options">Custom Options</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-editors.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Editors">Editors</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-file-upload.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="File Upload">File Upload</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-pickers.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Pickers">Pickers</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-selects.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Select & Tags">Select &amp; Tags</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-sliders.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Sliders">Sliders</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-switches.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Switches">Switches</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="forms-extras.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Extras">Extras</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-detail"></i>
-              <div class="text-truncate" data-i18n="Form Layouts">Form Layouts</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="form-layouts-vertical.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Vertical Form">Vertical Form</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="form-layouts-horizontal.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Horizontal Form">Horizontal Form</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="form-layouts-sticky.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Sticky Actions">Sticky Actions</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-carousel"></i>
-              <div class="text-truncate" data-i18n="Form Wizard">Form Wizard</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="form-wizard-numbered.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Numbered">Numbered</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="form-wizard-icons.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Icons">Icons</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="form-validation.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-list-check"></i>
-              <div class="text-truncate" data-i18n="Form Validation">Form Validation</div>
-            </a>
-          </li>
-          <!-- Tables -->
-          <li class="menu-item">
-            <a href="tables-basic.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-table"></i>
-              <div class="text-truncate" data-i18n="Tables">Tables</div>
-            </a>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-grid"></i>
-              <div class="text-truncate" data-i18n="Datatables">Datatables</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="tables-datatables-basic.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Basic">Basic</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="tables-datatables-advanced.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Advanced">Advanced</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="tables-datatables-extensions.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Extensions">Extensions</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-
-          <!-- Charts & Maps -->
-          <li class="menu-header small text-uppercase">
-            <span class="menu-header-text" data-i18n="Charts & Maps">Charts &amp; Maps</span>
-          </li>
-          <li class="menu-item">
-            <a href="javascript:void(0);" class="menu-link menu-toggle">
-              <i class="menu-icon tf-icons bx bx-chart"></i>
-              <div class="text-truncate" data-i18n="Charts">Charts</div>
-            </a>
-            <ul class="menu-sub">
-              <li class="menu-item">
-                <a href="charts-apex.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="Apex Charts">Apex Charts</div>
-                </a>
-              </li>
-              <li class="menu-item">
-                <a href="charts-chartjs.html" class="menu-link">
-                  <div class="text-truncate" data-i18n="ChartJS">ChartJS</div>
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li class="menu-item">
-            <a href="maps-leaflet.html" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-map-alt"></i>
-              <div class="text-truncate" data-i18n="Leaflet Maps">Leaflet Maps</div>
-            </a>
-          </li>
-
-          <!-- Misc -->
-          <li class="menu-header small text-uppercase">
-            <span class="menu-header-text" data-i18n="Misc">Misc</span>
-          </li>
-          <li class="menu-item">
-            <a href="https://themeselection.com/support/" target="_blank" class="menu-link">
-              <i class="menu-icon tf-icons bx bx-support"></i>
-              <div class="text-truncate" data-i18n="Support">Support</div>
-            </a>
-          </li>
-          <li class="menu-item">
-            <a
-              href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation/"
-              target="_blank"
-              class="menu-link"
-            >
-              <i class="menu-icon tf-icons bx bx-file"></i>
-              <div class="text-truncate" data-i18n="Documentation">Documentation</div>
-            </a>
-          </li>
-        </ul>
-      </aside>
-      <!-- / Menu -->
-
-      <!-- Layout container -->
-      <div class="layout-page">
-        <!-- Navbar -->
-
-        <nav
-          class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
-          id="layout-navbar"
-        >
-          <div class="layout-menu-toggle navbar-nav align-items-xl-center me-4 me-xl-0 d-xl-none">
-            <a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
-              <i class="bx bx-menu bx-md"></i>
-            </a>
-          </div>
-
-          <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
-            <!-- Search -->
-            <div class="navbar-nav align-items-center">
-              <div class="nav-item navbar-search-wrapper mb-0">
-                <a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
-                  <i class="bx bx-search bx-md"></i>
-                  <span class="d-none d-md-inline-block text-muted fw-normal ms-4"
-                    >Search (Ctrl+/)</span
-                  >
-                </a>
+                <a href="javascript:;" class="btn btn-sm btn-label-primary">View Badges</a>
               </div>
             </div>
-            <!-- /Search -->
-
-            <ul class="navbar-nav flex-row align-items-center ms-auto">
-              <!-- Language -->
-              <li class="nav-item dropdown-language dropdown me-2 me-xl-0">
-                <a
-                  class="nav-link dropdown-toggle hide-arrow"
-                  href="javascript:void(0);"
-                  data-bs-toggle="dropdown"
-                >
-                  <i class="bx bx-globe bx-md"></i>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end">
-                  <li>
-                    <a
-                      class="dropdown-item"
-                      href="javascript:void(0);"
-                      data-language="en"
-                      data-text-direction="ltr"
-                    >
-                      <span>English</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="dropdown-item"
-                      href="javascript:void(0);"
-                      data-language="fr"
-                      data-text-direction="ltr"
-                    >
-                      <span>French</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="dropdown-item"
-                      href="javascript:void(0);"
-                      data-language="ar"
-                      data-text-direction="rtl"
-                    >
-                      <span>Arabic</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a
-                      class="dropdown-item"
-                      href="javascript:void(0);"
-                      data-language="de"
-                      data-text-direction="ltr"
-                    >
-                      <span>German</span>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <!-- /Language -->
-
-              <!-- Style Switcher -->
-              <li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-0">
-                <a
-                  class="nav-link dropdown-toggle hide-arrow"
-                  href="javascript:void(0);"
-                  data-bs-toggle="dropdown"
-                >
-                  <i class="bx bx-md"></i>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end dropdown-styles">
-                  <li>
-                    <a class="dropdown-item" href="javascript:void(0);" data-theme="light">
-                      <span><i class="bx bx-sun bx-md me-3"></i>Light</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="javascript:void(0);" data-theme="dark">
-                      <span><i class="bx bx-moon bx-md me-3"></i>Dark</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
-                      <span><i class="bx bx-desktop bx-md me-3"></i>System</span>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <!-- / Style Switcher-->
-
-              <!-- Quick links  -->
-              <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
-                <a
-                  class="nav-link dropdown-toggle hide-arrow"
-                  href="javascript:void(0);"
-                  data-bs-toggle="dropdown"
-                  data-bs-auto-close="outside"
-                  aria-expanded="false"
-                >
-                  <i class="bx bx-grid-alt bx-md"></i>
-                </a>
-                <div class="dropdown-menu dropdown-menu-end p-0">
-                  <div class="dropdown-menu-header border-bottom">
-                    <div class="dropdown-header d-flex align-items-center py-3">
-                      <h6 class="mb-0 me-auto">Shortcuts</h6>
-                      <a
-                        href="javascript:void(0)"
-                        class="dropdown-shortcuts-add py-2"
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Add shortcuts"
-                        ><i class="bx bx-plus-circle text-heading"></i
-                      ></a>
-                    </div>
+            <div class="col-sm-5 text-center text-sm-left">
+              <div class="card-body pb-0 px-0 px-md-6">
+                <img
+                  src="/img/illustrations/man-with-laptop.png"
+                  height="175"
+                  class="scaleX-n1-rtl"
+                  alt="View Badge User"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-xxl-4 col-lg-12 col-md-4 order-1">
+        <div class="row">
+          <div class="col-lg-6 col-md-12 col-6 mb-6">
+            <div class="card h-100">
+              <div class="card-body pb-4">
+                <span class="d-block fw-medium mb-1">Order</span>
+                <h4 class="card-title mb-0">276k</h4>
+              </div>
+              <div id="orderChart" class="pb-3"></div>
+            </div>
+          </div>
+          <div class="col-lg-6 col-md-12 col-6 mb-6">
+            <div class="card h-100">
+              <div class="card-body">
+                <div class="card-title d-flex align-items-start justify-content-between mb-4">
+                  <div class="avatar flex-shrink-0">
+                    <img
+                      src="/img/icons/unicons/wallet-info.png"
+                      alt="wallet info"
+                      class="rounded"
+                    />
                   </div>
-                  <div class="dropdown-shortcuts-list scrollable-container">
-                    <div class="row row-bordered overflow-visible g-0">
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-calendar bx-26px text-heading"></i>
-                        </span>
-                        <a href="app-calendar.html" class="stretched-link">Calendar</a>
-                        <small>Appointments</small>
-                      </div>
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-food-menu bx-26px text-heading"></i>
-                        </span>
-                        <a href="app-invoice-list.html" class="stretched-link">Invoice App</a>
-                        <small>Manage Accounts</small>
-                      </div>
-                    </div>
-                    <div class="row row-bordered overflow-visible g-0">
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-user bx-26px text-heading"></i>
-                        </span>
-                        <a href="app-user-list.html" class="stretched-link">User App</a>
-                        <small>Manage Users</small>
-                      </div>
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-check-shield bx-26px text-heading"></i>
-                        </span>
-                        <a href="app-access-roles.html" class="stretched-link">Role Management</a>
-                        <small>Permission</small>
-                      </div>
-                    </div>
-                    <div class="row row-bordered overflow-visible g-0">
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-pie-chart-alt-2 bx-26px text-heading"></i>
-                        </span>
-                        <a href="index.html" class="stretched-link">Dashboard</a>
-                        <small>User Dashboard</small>
-                      </div>
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-cog bx-26px text-heading"></i>
-                        </span>
-                        <a href="pages-account-settings-account.html" class="stretched-link"
-                          >Setting</a
-                        >
-                        <small>Account Settings</small>
-                      </div>
-                    </div>
-                    <div class="row row-bordered overflow-visible g-0">
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-help-circle bx-26px text-heading"></i>
-                        </span>
-                        <a href="pages-faq.html" class="stretched-link">FAQs</a>
-                        <small>FAQs & Articles</small>
-                      </div>
-                      <div class="dropdown-shortcuts-item col">
-                        <span class="dropdown-shortcuts-icon rounded-circle mb-3">
-                          <i class="bx bx-window-open bx-26px text-heading"></i>
-                        </span>
-                        <a href="modal-examples.html" class="stretched-link">Modals</a>
-                        <small>Useful Popups</small>
-                      </div>
+                  <div class="dropdown">
+                    <button
+                      class="btn p-0"
+                      type="button"
+                      id="cardOpt6"
+                      data-bs-toggle="dropdown"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    >
+                      <i class="bx bx-dots-vertical-rounded text-muted"></i>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
+                      <a class="dropdown-item" href="javascript:void(0);">View More</a>
+                      <a class="dropdown-item" href="javascript:void(0);">Delete</a>
                     </div>
                   </div>
                 </div>
-              </li>
-              <!-- Quick links -->
-
-              <!-- Notification -->
-              <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
-                <a
-                  class="nav-link dropdown-toggle hide-arrow"
-                  href="javascript:void(0);"
-                  data-bs-toggle="dropdown"
-                  data-bs-auto-close="outside"
-                  aria-expanded="false"
+                <p class="mb-1">Sales</p>
+                <h4 class="card-title mb-3">$4,679</h4>
+                <small class="text-success fw-medium"
+                  ><i class="bx bx-up-arrow-alt"></i> +28.42%</small
                 >
-                  <span class="position-relative">
-                    <i class="bx bx-bell bx-md"></i>
-                    <span
-                      class="badge rounded-pill bg-danger badge-dot badge-notifications border"
-                    ></span>
-                  </span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end p-0">
-                  <li class="dropdown-menu-header border-bottom">
-                    <div class="dropdown-header d-flex align-items-center py-3">
-                      <h6 class="mb-0 me-auto">Notification</h6>
-                      <div class="d-flex align-items-center h6 mb-0">
-                        <span class="badge bg-label-primary me-2">8 New</span>
-                        <a
-                          href="javascript:void(0)"
-                          class="dropdown-notifications-all p-2"
-                          data-bs-toggle="tooltip"
-                          data-bs-placement="top"
-                          title="Mark all as read"
-                          ><i class="bx bx-envelope-open text-heading"></i
-                        ></a>
-                      </div>
-                    </div>
-                  </li>
-                  <li class="dropdown-notifications-list scrollable-container">
-                    <ul class="list-group list-group-flush">
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <img src="/img/avatars/1.png" class="rounded-circle" />
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
-                            <small class="mb-1 d-block text-body"
-                              >Won the monthly best seller gold badge</small
-                            >
-                            <small class="text-muted">1h ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">Charles Franklin</h6>
-                            <small class="mb-1 d-block text-body">Accepted your connection</small>
-                            <small class="text-muted">12hr ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <img src="/img/avatars/2.png" class="rounded-circle" />
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">New Message ✉️</h6>
-                            <small class="mb-1 d-block text-body"
-                              >You have new message from Natalie</small
-                            >
-                            <small class="text-muted">1h ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <span class="avatar-initial rounded-circle bg-label-success"
-                                ><i class="bx bx-cart"></i
-                              ></span>
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">Whoo! You have new order 🛒</h6>
-                            <small class="mb-1 d-block text-body"
-                              >ACME Inc. made new order $1,154</small
-                            >
-                            <small class="text-muted">1 day ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <img src="/img/avatars/9.png" class="rounded-circle" />
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">Application has been approved 🚀</h6>
-                            <small class="mb-1 d-block text-body"
-                              >Your ABC project application has been approved.</small
-                            >
-                            <small class="text-muted">2 days ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <span class="avatar-initial rounded-circle bg-label-success"
-                                ><i class="bx bx-pie-chart-alt"></i
-                              ></span>
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">Monthly report is generated</h6>
-                            <small class="mb-1 d-block text-body"
-                              >July monthly financial report is generated
-                            </small>
-                            <small class="text-muted">3 days ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <img src="/img/avatars/5.png" class="rounded-circle" />
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">Send connection request</h6>
-                            <small class="mb-1 d-block text-body"
-                              >Peter sent you connection request</small
-                            >
-                            <small class="text-muted">4 days ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <img src="/img/avatars/6.png" class="rounded-circle" />
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">New message from Jane</h6>
-                            <small class="mb-1 d-block text-body"
-                              >Your have new message from Jane</small
-                            >
-                            <small class="text-muted">5 days ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                      <li
-                        class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read"
-                      >
-                        <div class="d-flex">
-                          <div class="flex-shrink-0 me-3">
-                            <div class="avatar">
-                              <span class="avatar-initial rounded-circle bg-label-warning"
-                                ><i class="bx bx-error"></i
-                              ></span>
-                            </div>
-                          </div>
-                          <div class="flex-grow-1">
-                            <h6 class="small mb-0">CPU is running high</h6>
-                            <small class="mb-1 d-block text-body"
-                              >CPU Utilization Percent is currently at 88.63%,</small
-                            >
-                            <small class="text-muted">5 days ago</small>
-                          </div>
-                          <div class="flex-shrink-0 dropdown-notifications-actions">
-                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                              ><span class="badge badge-dot"></span
-                            ></a>
-                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                              ><span class="bx bx-x"></span
-                            ></a>
-                          </div>
-                        </div>
-                      </li>
-                    </ul>
-                  </li>
-                  <li class="border-top">
-                    <div class="d-grid p-4">
-                      <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
-                        <small class="align-middle">View all notifications</small>
-                      </a>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-              <!--/ Notification -->
-              <!-- User -->
-              <li class="nav-item navbar-dropdown dropdown-user dropdown">
-                <a
-                  class="nav-link dropdown-toggle hide-arrow p-0"
-                  href="javascript:void(0);"
-                  data-bs-toggle="dropdown"
-                >
-                  <div class="avatar avatar-online">
-                    <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
-                  </div>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-end">
-                  <li>
-                    <a class="dropdown-item" href="pages-account-settings-account.html">
-                      <div class="d-flex">
-                        <div class="flex-shrink-0 me-3">
-                          <div class="avatar avatar-online">
-                            <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
-                          </div>
-                        </div>
-                        <div class="flex-grow-1">
-                          <h6 class="mb-0">John Doe</h6>
-                          <small class="text-muted">Admin</small>
-                        </div>
-                      </div>
-                    </a>
-                  </li>
-                  <li>
-                    <div class="dropdown-divider my-1"></div>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="pages-profile-user.html">
-                      <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="pages-account-settings-account.html">
-                      <i class="bx bx-cog bx-md me-3"></i><span>Settings</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="pages-account-settings-billing.html">
-                      <span class="d-flex align-items-center align-middle">
-                        <i class="flex-shrink-0 bx bx-credit-card bx-md me-3"></i
-                        ><span class="flex-grow-1 align-middle">Billing Plan</span>
-                        <span class="flex-shrink-0 badge rounded-pill bg-danger">4</span>
-                      </span>
-                    </a>
-                  </li>
-                  <li>
-                    <div class="dropdown-divider my-1"></div>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="pages-pricing.html">
-                      <i class="bx bx-dollar bx-md me-3"></i><span>Pricing</span>
-                    </a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="pages-faq.html">
-                      <i class="bx bx-help-circle bx-md me-3"></i><span>FAQ</span>
-                    </a>
-                  </li>
-                  <li>
-                    <div class="dropdown-divider my-1"></div>
-                  </li>
-                  <li>
-                    <a class="dropdown-item" href="auth-login-cover.html" target="_blank">
-                      <i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <!--/ User -->
-            </ul>
+              </div>
+            </div>
           </div>
-
-          <!-- Search Small Screens -->
-          <div class="navbar-search-wrapper search-input-wrapper d-none">
-            <input
-              type="text"
-              class="form-control search-input container-xxl border-0"
-              placeholder="Search..."
-              aria-label="Search..."
-            />
-            <i class="bx bx-x bx-md search-toggler cursor-pointer"></i>
-          </div>
-        </nav>
-
-        <!-- / Navbar -->
-
-        <!-- Content wrapper -->
-        <div class="content-wrapper">
-          <!-- Content -->
-
-          <div class="container-xxl flex-grow-1 container-p-y">
-            <div class="row">
-              <div class="col-xxl-8 mb-6 order-0">
-                <div class="card">
-                  <div class="d-flex align-items-start row">
-                    <div class="col-sm-7">
-                      <div class="card-body">
-                        <h5 class="card-title text-primary mb-3">Congratulations John! 🎉</h5>
-                        <p class="mb-6">
-                          You have done 72% more sales today.<br />Check your new badge in your
-                          profile.
-                        </p>
-
-                        <a href="javascript:;" class="btn btn-sm btn-label-primary">View Badges</a>
-                      </div>
-                    </div>
-                    <div class="col-sm-5 text-center text-sm-left">
-                      <div class="card-body pb-0 px-0 px-md-6">
-                        <img
-                          src="/img/illustrations/man-with-laptop.png"
-                          height="175"
-                          class="scaleX-n1-rtl"
-                          alt="View Badge User"
-                        />
-                      </div>
-                    </div>
+        </div>
+      </div>
+      <!-- Total Revenue -->
+      <div class="col-12 col-xxl-8 order-2 order-md-3 order-xxl-2 mb-6">
+        <div class="card">
+          <div class="row row-bordered g-0">
+            <div class="col-lg-8">
+              <div class="card-header d-flex align-items-center justify-content-between">
+                <div class="card-title mb-0">
+                  <h5 class="m-0 me-2">Total Revenue</h5>
+                </div>
+                <div class="dropdown">
+                  <button
+                    class="btn p-0"
+                    type="button"
+                    id="totalRevenue"
+                    data-bs-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                  >
+                    <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
+                  </button>
+                  <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalRevenue">
+                    <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+                    <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+                    <a class="dropdown-item" href="javascript:void(0);">Share</a>
                   </div>
                 </div>
               </div>
-              <div class="col-xxl-4 col-lg-12 col-md-4 order-1">
-                <div class="row">
-                  <div class="col-lg-6 col-md-12 col-6 mb-6">
-                    <div class="card h-100">
-                      <div class="card-body pb-4">
-                        <span class="d-block fw-medium mb-1">Order</span>
-                        <h4 class="card-title mb-0">276k</h4>
-                      </div>
-                      <div id="orderChart" class="pb-3"></div>
-                    </div>
-                  </div>
-                  <div class="col-lg-6 col-md-12 col-6 mb-6">
-                    <div class="card h-100">
-                      <div class="card-body">
-                        <div
-                          class="card-title d-flex align-items-start justify-content-between mb-4"
-                        >
-                          <div class="avatar flex-shrink-0">
-                            <img
-                              src="/img/icons/unicons/wallet-info.png"
-                              alt="wallet info"
-                              class="rounded"
-                            />
-                          </div>
-                          <div class="dropdown">
-                            <button
-                              class="btn p-0"
-                              type="button"
-                              id="cardOpt6"
-                              data-bs-toggle="dropdown"
-                              aria-haspopup="true"
-                              aria-expanded="false"
-                            >
-                              <i class="bx bx-dots-vertical-rounded text-muted"></i>
-                            </button>
-                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
-                              <a class="dropdown-item" href="javascript:void(0);">View More</a>
-                              <a class="dropdown-item" href="javascript:void(0);">Delete</a>
-                            </div>
-                          </div>
-                        </div>
-                        <p class="mb-1">Sales</p>
-                        <h4 class="card-title mb-3">$4,679</h4>
-                        <small class="text-success fw-medium"
-                          ><i class="bx bx-up-arrow-alt"></i> +28.42%</small
-                        >
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!-- Total Revenue -->
-              <div class="col-12 col-xxl-8 order-2 order-md-3 order-xxl-2 mb-6">
-                <div class="card">
-                  <div class="row row-bordered g-0">
-                    <div class="col-lg-8">
-                      <div class="card-header d-flex align-items-center justify-content-between">
-                        <div class="card-title mb-0">
-                          <h5 class="m-0 me-2">Total Revenue</h5>
-                        </div>
-                        <div class="dropdown">
-                          <button
-                            class="btn p-0"
-                            type="button"
-                            id="totalRevenue"
-                            data-bs-toggle="dropdown"
-                            aria-haspopup="true"
-                            aria-expanded="false"
-                          >
-                            <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
-                          </button>
-                          <div
-                            class="dropdown-menu dropdown-menu-end"
-                            aria-labelledby="totalRevenue"
-                          >
-                            <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                            <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                            <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                          </div>
-                        </div>
-                      </div>
-                      <div id="totalRevenueChart" class="px-3"></div>
-                    </div>
-                    <div class="col-lg-4 d-flex align-items-center">
-                      <div class="card-body px-xl-9">
-                        <div class="text-center mb-6">
-                          <div class="btn-group">
-                            <button type="button" class="btn btn-label-primary">
-                              2023
-                              <!-- <script>
+              <div id="totalRevenueChart" class="px-3"></div>
+            </div>
+            <div class="col-lg-4 d-flex align-items-center">
+              <div class="card-body px-xl-9">
+                <div class="text-center mb-6">
+                  <div class="btn-group">
+                    <button type="button" class="btn btn-label-primary">
+                      2023
+                      <!-- <script>
                   document.write(new Date().getFullYear() - 1)
 
                   </script> -->
-                            </button>
-                            <button
-                              type="button"
-                              class="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
-                              data-bs-toggle="dropdown"
-                              aria-expanded="false"
-                            >
-                              <span class="visually-hidden">Toggle Dropdown</span>
-                            </button>
-                            <ul class="dropdown-menu">
-                              <li><a class="dropdown-item" href="javascript:void(0);">2023</a></li>
-                              <li><a class="dropdown-item" href="javascript:void(0);">2022</a></li>
-                              <li><a class="dropdown-item" href="javascript:void(0);">2021</a></li>
-                            </ul>
-                          </div>
-                        </div>
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      <span class="visually-hidden">Toggle Dropdown</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                      <li><a class="dropdown-item" href="javascript:void(0);">2023</a></li>
+                      <li><a class="dropdown-item" href="javascript:void(0);">2022</a></li>
+                      <li><a class="dropdown-item" href="javascript:void(0);">2021</a></li>
+                    </ul>
+                  </div>
+                </div>
 
-                        <div id="growthChart"></div>
-                        <div class="text-center fw-medium my-6">62% Company Growth</div>
+                <div id="growthChart"></div>
+                <div class="text-center fw-medium my-6">62% Company Growth</div>
 
-                        <div class="d-flex gap-3 justify-content-between">
-                          <div class="d-flex">
-                            <div class="avatar me-2">
-                              <span class="avatar-initial rounded-2 bg-label-primary"
-                                ><i class="bx bx-dollar bx-lg text-primary"></i
-                              ></span>
-                            </div>
-                            <div class="d-flex flex-column">
-                              <small>
-                                2024
-                                <!-- <script>
+                <div class="d-flex gap-3 justify-content-between">
+                  <div class="d-flex">
+                    <div class="avatar me-2">
+                      <span class="avatar-initial rounded-2 bg-label-primary"
+                        ><i class="bx bx-dollar bx-lg text-primary"></i
+                      ></span>
+                    </div>
+                    <div class="d-flex flex-column">
+                      <small>
+                        2024
+                        <!-- <script>
                                   document.write(new Date().getFullYear() - 1)
                                 </script> -->
-                              </small>
-                              <h6 class="mb-0">$32.5k</h6>
-                            </div>
-                          </div>
-                          <div class="d-flex">
-                            <div class="avatar me-2">
-                              <span class="avatar-initial rounded-2 bg-label-info"
-                                ><i class="bx bx-wallet bx-lg text-info"></i
-                              ></span>
-                            </div>
-                            <div class="d-flex flex-column">
-                              <small>
-                                2023
-                                <!-- <script>
+                      </small>
+                      <h6 class="mb-0">$32.5k</h6>
+                    </div>
+                  </div>
+                  <div class="d-flex">
+                    <div class="avatar me-2">
+                      <span class="avatar-initial rounded-2 bg-label-info"
+                        ><i class="bx bx-wallet bx-lg text-info"></i
+                      ></span>
+                    </div>
+                    <div class="d-flex flex-column">
+                      <small>
+                        2023
+                        <!-- <script>
                                   document.write(new Date().getFullYear() - 2)
                                 </script> -->
-                              </small>
-                              <h6 class="mb-0">$41.2k</h6>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
+                      </small>
+                      <h6 class="mb-0">$41.2k</h6>
                     </div>
                   </div>
                 </div>
               </div>
-              <!--/ Total Revenue -->
-              <div class="col-12 col-md-8 col-lg-12 col-xxl-4 order-3 order-md-2">
-                <div class="row">
-                  <div class="col-6 mb-6">
-                    <div class="card h-100">
-                      <div class="card-body">
-                        <div
-                          class="card-title d-flex align-items-start justify-content-between mb-4"
-                        >
-                          <div class="avatar flex-shrink-0">
-                            <img src="/img/icons/unicons/paypal.png" alt="paypal" class="rounded" />
-                          </div>
-                          <div class="dropdown">
-                            <button
-                              class="btn p-0"
-                              type="button"
-                              id="cardOpt4"
-                              data-bs-toggle="dropdown"
-                              aria-haspopup="true"
-                              aria-expanded="false"
-                            >
-                              <i class="bx bx-dots-vertical-rounded text-muted"></i>
-                            </button>
-                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
-                              <a class="dropdown-item" href="javascript:void(0);">View More</a>
-                              <a class="dropdown-item" href="javascript:void(0);">Delete</a>
-                            </div>
-                          </div>
-                        </div>
-                        <p class="mb-1">Payments</p>
-                        <h4 class="card-title mb-3">$2,456</h4>
-                        <small class="text-danger fw-medium"
-                          ><i class="bx bx-down-arrow-alt"></i> -14.82%</small
-                        >
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-6 mb-6">
-                    <div class="card h-100">
-                      <div class="card-body pb-0">
-                        <span class="d-block fw-medium mb-1">Revenue</span>
-                        <h4 class="card-title mb-0 mb-lg-4">425k</h4>
-                        <div id="revenueChart"></div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="col-12 mb-6">
-                    <div class="card">
-                      <div class="card-body">
-                        <div
-                          class="d-flex justify-content-between align-items-center flex-sm-row flex-column gap-10"
-                        >
-                          <div
-                            class="d-flex flex-sm-column flex-row align-items-start justify-content-between"
-                          >
-                            <div class="card-title mb-6">
-                              <h5 class="text-nowrap mb-1">Profile Report</h5>
-                              <span class="badge bg-label-warning">YEAR 2022</span>
-                            </div>
-                            <div class="mt-sm-auto">
-                              <span class="text-success text-nowrap fw-medium"
-                                ><i class="bx bx-up-arrow-alt"></i> 68.2%</span
-                              >
-                              <h4 class="mb-0">$84,686k</h4>
-                            </div>
-                          </div>
-                          <div id="profileReportChart"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <!-- Order Statistics -->
-              <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
-                <div class="card h-100">
-                  <div class="card-header d-flex justify-content-between">
-                    <div class="card-title mb-0">
-                      <h5 class="mb-1 me-2">Order Statistics</h5>
-                      <p class="card-subtitle">42.82k Total Sales</p>
-                    </div>
-                    <div class="dropdown">
-                      <button
-                        class="btn text-muted p-0"
-                        type="button"
-                        id="orederStatistics"
-                        data-bs-toggle="dropdown"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                      >
-                        <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-                      </button>
-                      <div
-                        class="dropdown-menu dropdown-menu-end"
-                        aria-labelledby="orederStatistics"
-                      >
-                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center mb-6">
-                      <div class="d-flex flex-column align-items-center gap-1">
-                        <h3 class="mb-1">8,258</h3>
-                        <small>Total Orders</small>
-                      </div>
-                      <div id="orderStatisticsChart"></div>
-                    </div>
-                    <ul class="p-0 m-0">
-                      <li class="d-flex align-items-center mb-5">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <span class="avatar-initial rounded bg-label-primary"
-                            ><i class="bx bx-mobile-alt"></i
-                          ></span>
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <h6 class="mb-0">Electronic</h6>
-                            <small>Mobile, Earbuds, TV</small>
-                          </div>
-                          <div class="user-progress">
-                            <h6 class="mb-0">82.5k</h6>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center mb-5">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <span class="avatar-initial rounded bg-label-success"
-                            ><i class="bx bx-closet"></i
-                          ></span>
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <h6 class="mb-0">Fashion</h6>
-                            <small>T-shirt, Jeans, Shoes</small>
-                          </div>
-                          <div class="user-progress">
-                            <h6 class="mb-0">23.8k</h6>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center mb-5">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <span class="avatar-initial rounded bg-label-info"
-                            ><i class="bx bx-home-alt"></i
-                          ></span>
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <h6 class="mb-0">Decor</h6>
-                            <small>Fine Art, Dining</small>
-                          </div>
-                          <div class="user-progress">
-                            <h6 class="mb-0">849k</h6>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <span class="avatar-initial rounded bg-label-secondary"
-                            ><i class="bx bx-football"></i
-                          ></span>
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <h6 class="mb-0">Sports</h6>
-                            <small>Football, Cricket Kit</small>
-                          </div>
-                          <div class="user-progress">
-                            <h6 class="mb-0">99</h6>
-                          </div>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-              <!--/ Order Statistics -->
-
-              <!-- Expense Overview -->
-              <div class="col-md-6 col-lg-4 order-1 mb-6">
-                <div class="card h-100">
-                  <div class="card-header nav-align-top">
-                    <ul class="nav nav-pills" role="tablist">
-                      <li class="nav-item">
-                        <button
-                          type="button"
-                          class="nav-link active"
-                          role="tab"
-                          data-bs-toggle="tab"
-                          data-bs-target="#navs-tabs-line-card-income"
-                          aria-controls="navs-tabs-line-card-income"
-                          aria-selected="true"
-                        >
-                          Income
-                        </button>
-                      </li>
-                      <li class="nav-item">
-                        <button type="button" class="nav-link" role="tab">Expenses</button>
-                      </li>
-                      <li class="nav-item">
-                        <button type="button" class="nav-link" role="tab">Profit</button>
-                      </li>
-                    </ul>
-                  </div>
-                  <div class="card-body">
-                    <div class="tab-content p-0">
-                      <div
-                        class="tab-pane fade show active"
-                        id="navs-tabs-line-card-income"
-                        role="tabpanel"
-                      >
-                        <div class="d-flex mb-6">
-                          <div class="avatar flex-shrink-0 me-3">
-                            <img src="/img/icons/unicons/wallet-primary.png" alt="User" />
-                          </div>
-                          <div>
-                            <p class="mb-0">Total Balance</p>
-                            <div class="d-flex align-items-center">
-                              <h6 class="mb-0 me-1">$459.10</h6>
-                              <small class="text-success fw-medium">
-                                <i class="bx bx-chevron-up bx-lg"></i>
-                                42.9%
-                              </small>
-                            </div>
-                          </div>
-                        </div>
-                        <div id="incomeChart"></div>
-                        <div class="d-flex align-items-center justify-content-center mt-6 gap-3">
-                          <div class="flex-shrink-0">
-                            <div id="expensesOfWeek"></div>
-                          </div>
-                          <div>
-                            <h6 class="mb-0">Income this week</h6>
-                            <small>$39k less than last week</small>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!--/ Expense Overview -->
-
-              <!-- Transactions -->
-              <div class="col-md-6 col-lg-4 order-2 mb-6">
-                <div class="card h-100">
-                  <div class="card-header d-flex align-items-center justify-content-between">
-                    <h5 class="card-title m-0 me-2">Transactions</h5>
-                    <div class="dropdown">
-                      <button
-                        class="btn text-muted p-0"
-                        type="button"
-                        id="transactionID"
-                        data-bs-toggle="dropdown"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                      >
-                        <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-                      </button>
-                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
-                        <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
-                        <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
-                        <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="card-body pt-4">
-                    <ul class="p-0 m-0">
-                      <li class="d-flex align-items-center mb-6">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <img src="/img/icons/unicons/paypal.png" alt="User" class="rounded" />
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <small class="d-block">Paypal</small>
-                            <h6 class="fw-normal mb-0">Send money</h6>
-                          </div>
-                          <div class="user-progress d-flex align-items-center gap-2">
-                            <h6 class="fw-normal mb-0">+82.6</h6>
-                            <span class="text-muted">USD</span>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center mb-6">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <small class="d-block">Wallet</small>
-                            <h6 class="fw-normal mb-0">Mac'D</h6>
-                          </div>
-                          <div class="user-progress d-flex align-items-center gap-2">
-                            <h6 class="fw-normal mb-0">+270.69</h6>
-                            <span class="text-muted">USD</span>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center mb-6">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <img src="/img/icons/unicons/chart.png" alt="User" class="rounded" />
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <small class="d-block">Transfer</small>
-                            <h6 class="fw-normal mb-0">Refund</h6>
-                          </div>
-                          <div class="user-progress d-flex align-items-center gap-2">
-                            <h6 class="fw-normal mb-0">+637.91</h6>
-                            <span class="text-muted">USD</span>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center mb-6">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <img src="/img/icons/unicons/cc-primary.png" alt="User" class="rounded" />
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <small class="d-block">Credit Card</small>
-                            <h6 class="fw-normal mb-0">Ordered Food</h6>
-                          </div>
-                          <div class="user-progress d-flex align-items-center gap-2">
-                            <h6 class="fw-normal mb-0">-838.71</h6>
-                            <span class="text-muted">USD</span>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center mb-6">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <small class="d-block">Wallet</small>
-                            <h6 class="fw-normal mb-0">Starbucks</h6>
-                          </div>
-                          <div class="user-progress d-flex align-items-center gap-2">
-                            <h6 class="fw-normal mb-0">+203.33</h6>
-                            <span class="text-muted">USD</span>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="d-flex align-items-center">
-                        <div class="avatar flex-shrink-0 me-3">
-                          <img src="/img/icons/unicons/cc-warning.png" alt="User" class="rounded" />
-                        </div>
-                        <div
-                          class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
-                        >
-                          <div class="me-2">
-                            <small class="d-block">Mastercard</small>
-                            <h6 class="fw-normal mb-0">Ordered Food</h6>
-                          </div>
-                          <div class="user-progress d-flex align-items-center gap-2">
-                            <h6 class="fw-normal mb-0">-92.45</h6>
-                            <span class="text-muted">USD</span>
-                          </div>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-              <!--/ Transactions -->
-              <!-- Activity Timeline -->
-              <div class="col-md-12 col-lg-6 order-4 order-lg-3">
-                <div class="card h-100">
-                  <div class="card-header d-flex justify-content-between">
-                    <h5 class="card-title m-0 me-2">Activity Timeline</h5>
-                    <div class="dropdown">
-                      <button
-                        class="btn text-muted p-0"
-                        type="button"
-                        id="timelineWapper"
-                        data-bs-toggle="dropdown"
-                        aria-haspopup="true"
-                        aria-expanded="false"
-                      >
-                        <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-                      </button>
-                      <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
-                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="card-body pt-2">
-                    <ul class="timeline mb-0">
-                      <li class="timeline-item timeline-item-transparent">
-                        <span class="timeline-point timeline-point-primary"></span>
-                        <div class="timeline-event">
-                          <div class="timeline-header mb-3">
-                            <h6 class="mb-0">12 Invoices have been paid</h6>
-                            <small class="text-muted">12 min ago</small>
-                          </div>
-                          <p class="mb-2">Invoices have been paid to the company</p>
-                          <div class="d-flex align-items-center mb-1">
-                            <div class="badge bg-lighter rounded-2">
-                              <img
-                                src="/img/icons/misc/pdf.png"
-                                alt="img"
-                                width="15"
-                                class="me-2"
-                              />
-                              <span class="h6 mb-0 text-body">invoices.pdf</span>
-                            </div>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="timeline-item timeline-item-transparent">
-                        <span class="timeline-point timeline-point-success"></span>
-                        <div class="timeline-event">
-                          <div class="timeline-header mb-3">
-                            <h6 class="mb-0">Client Meeting</h6>
-                            <small class="text-muted">45 min ago</small>
-                          </div>
-                          <p class="mb-2">Project meeting with john @10:15am</p>
-                          <div class="d-flex justify-content-between flex-wrap gap-2">
-                            <div class="d-flex flex-wrap align-items-center">
-                              <div class="avatar avatar-sm me-2">
-                                <img src="/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
-                              </div>
-                              <div>
-                                <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
-                                <small>CEO of ThemeSelection</small>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </li>
-                      <li class="timeline-item timeline-item-transparent">
-                        <span class="timeline-point timeline-point-info"></span>
-                        <div class="timeline-event">
-                          <div class="timeline-header mb-3">
-                            <h6 class="mb-0">Create a new project for client</h6>
-                            <small class="text-muted">2 Day Ago</small>
-                          </div>
-                          <p class="mb-2">6 team members in a project</p>
-                          <ul class="list-group list-group-flush">
-                            <li
-                              class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0"
-                            >
-                              <div class="d-flex flex-wrap align-items-center">
-                                <ul
-                                  class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2"
-                                >
-                                  <li
-                                    data-bs-toggle="tooltip"
-                                    data-popup="tooltip-custom"
-                                    data-bs-placement="top"
-                                    title="Vinnie Mostowy"
-                                    class="avatar pull-up"
-                                  >
-                                    <img
-                                      class="rounded-circle"
-                                      src="/img/avatars/5.png"
-                                      alt="Avatar"
-                                    />
-                                  </li>
-                                  <li
-                                    data-bs-toggle="tooltip"
-                                    data-popup="tooltip-custom"
-                                    data-bs-placement="top"
-                                    title="Allen Rieske"
-                                    class="avatar pull-up"
-                                  >
-                                    <img
-                                      class="rounded-circle"
-                                      src="/img/avatars/12.png"
-                                      alt="Avatar"
-                                    />
-                                  </li>
-                                  <li
-                                    data-bs-toggle="tooltip"
-                                    data-popup="tooltip-custom"
-                                    data-bs-placement="top"
-                                    title="Julee Rossignol"
-                                    class="avatar pull-up"
-                                  >
-                                    <img
-                                      class="rounded-circle"
-                                      src="/img/avatars/6.png"
-                                      alt="Avatar"
-                                    />
-                                  </li>
-                                  <li class="avatar">
-                                    <span
-                                      class="avatar-initial rounded-circle pull-up text-heading"
-                                      data-bs-toggle="tooltip"
-                                      data-bs-placement="bottom"
-                                      title="3 more"
-                                      >+3</span
-                                    >
-                                  </li>
-                                </ul>
-                              </div>
-                            </li>
-                          </ul>
-                        </div>
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-              <!--/ Activity Timeline -->
-              <!-- pill table -->
-              <div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
-                <div class="card text-center h-100">
-                  <div class="card-header nav-align-top">
-                    <ul class="nav nav-pills" role="tablist">
-                      <li class="nav-item">
-                        <button
-                          type="button"
-                          class="nav-link active"
-                          role="tab"
-                          data-bs-toggle="tab"
-                          data-bs-target="#navs-pills-browser"
-                          aria-controls="navs-pills-browser"
-                          aria-selected="true"
-                        >
-                          Browser
-                        </button>
-                      </li>
-                      <li class="nav-item">
-                        <button
-                          type="button"
-                          class="nav-link"
-                          role="tab"
-                          data-bs-toggle="tab"
-                          data-bs-target="#navs-pills-os"
-                          aria-controls="navs-pills-os"
-                          aria-selected="false"
-                        >
-                          Operating System
-                        </button>
-                      </li>
-                      <li class="nav-item">
-                        <button
-                          type="button"
-                          class="nav-link"
-                          role="tab"
-                          data-bs-toggle="tab"
-                          data-bs-target="#navs-pills-country"
-                          aria-controls="navs-pills-country"
-                          aria-selected="false"
-                        >
-                          Country
-                        </button>
-                      </li>
-                    </ul>
-                  </div>
-                  <div class="tab-content pt-0 pb-4">
-                    <div class="tab-pane fade show active" id="navs-pills-browser" role="tabpanel">
-                      <div class="table-responsive text-start text-nowrap">
-                        <table class="table table-borderless">
-                          <thead>
-                            <tr>
-                              <th>No</th>
-                              <th>Browser</th>
-                              <th>Visits</th>
-                              <th class="w-50">Data In Percentage</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td>1</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/chrome.png"
-                                    alt="Chrome"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Chrome</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">8.92k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-success"
-                                      role="progressbar"
-                                      style="width: 64.75%"
-                                      aria-valuenow="64.75"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">64.75%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>2</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/safari.png"
-                                    alt="Safari"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Safari</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">1.29k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-primary"
-                                      role="progressbar"
-                                      style="width: 18.43%"
-                                      aria-valuenow="18.43"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">18.43%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>3</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/firefox.png"
-                                    alt="Firefox"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Firefox</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">328</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-info"
-                                      role="progressbar"
-                                      style="width: 8.37%"
-                                      aria-valuenow="8.37"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">8.37%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>4</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/edge.png"
-                                    alt="Edge"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Edge</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">142</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-warning"
-                                      role="progressbar"
-                                      style="width: 6.12%"
-                                      aria-valuenow="6.12"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">6.12%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>5</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/opera.png"
-                                    alt="Opera"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Opera</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">82</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-danger"
-                                      role="progressbar"
-                                      style="width: 2.12%"
-                                      aria-valuenow="1.94"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">2.12%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>6</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/uc.png"
-                                    alt="uc"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">UC Browser</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">328</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-danger"
-                                      role="progressbar"
-                                      style="width: 20.14%"
-                                      aria-valuenow="1.94"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">20.14%</small>
-                                </div>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                    <div class="tab-pane fade" id="navs-pills-os" role="tabpanel">
-                      <div class="table-responsive text-start text-nowrap">
-                        <table class="table table-borderless">
-                          <thead>
-                            <tr>
-                              <th>No</th>
-                              <th>System</th>
-                              <th>Visits</th>
-                              <th class="w-50">Data In Percentage</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td>1</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/windows.png"
-                                    alt="Windows"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Windows</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">875.24k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-success"
-                                      role="progressbar"
-                                      style="width: 61.5%"
-                                      aria-valuenow="61.50"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">61.50%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>2</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/mac.png"
-                                    alt="Mac"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Mac</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">89.68k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-primary"
-                                      role="progressbar"
-                                      style="width: 16.67%"
-                                      aria-valuenow="16.67"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">16.67%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>3</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/ubuntu.png"
-                                    alt="Ubuntu"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Ubuntu</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">37.68k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-info"
-                                      role="progressbar"
-                                      style="width: 12.82%"
-                                      aria-valuenow="12.82"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">12.82%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>4</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/chrome.png"
-                                    alt="Chrome"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Chrome</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">8.34k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-warning"
-                                      role="progressbar"
-                                      style="width: 6.25%"
-                                      aria-valuenow="6.25"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">6.25%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>5</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/cent.png"
-                                    alt="Cent"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Cent</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">2.25k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-danger"
-                                      role="progressbar"
-                                      style="width: 2.76%"
-                                      aria-valuenow="2.76"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">2.76%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>6</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <img
-                                    src="/img/icons/brands/linux.png"
-                                    alt="linux"
-                                    height="24"
-                                    class="me-3"
-                                  />
-                                  <span class="text-heading">Linux</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">328k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-danger"
-                                      role="progressbar"
-                                      style="width: 20.14%"
-                                      aria-valuenow="2.76"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">20.14%</small>
-                                </div>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                    <div class="tab-pane fade" id="navs-pills-country" role="tabpanel">
-                      <div class="table-responsive text-start text-nowrap">
-                        <table class="table table-borderless">
-                          <thead>
-                            <tr>
-                              <th>No</th>
-                              <th>Country</th>
-                              <th>Visits</th>
-                              <th class="w-50">Data In Percentage</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr>
-                              <td>1</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <i class="fis fi fi-us rounded-circle fs-4 me-3"></i>
-                                  <span class="text-heading">USA</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">87.24k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-success"
-                                      role="progressbar"
-                                      style="width: 38.12%"
-                                      aria-valuenow="38.12"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">38.12%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>2</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <i class="fis fi fi-br rounded-circle fs-4 me-3"></i>
-                                  <span class="text-heading">Brazil</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">42.68k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-primary"
-                                      role="progressbar"
-                                      style="width: 28.23%"
-                                      aria-valuenow="28.23"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">28.23%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>3</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <i class="fis fi fi-in rounded-circle fs-4 me-3"></i>
-                                  <span class="text-heading">India</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">12.58k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-info"
-                                      role="progressbar"
-                                      style="width: 14.82%"
-                                      aria-valuenow="14.82"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">14.82%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>4</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <i class="fis fi fi-au rounded-circle fs-4 me-3"></i>
-                                  <span class="text-heading">Australia</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">4.13k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-warning"
-                                      role="progressbar"
-                                      style="width: 12.72%"
-                                      aria-valuenow="12.72"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">12.72%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>5</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <i class="fis fi fi-fr rounded-circle fs-4 me-3"></i>
-                                  <span class="text-heading">France</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">2.21k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-danger"
-                                      role="progressbar"
-                                      style="width: 7.11%"
-                                      aria-valuenow="7.11"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">7.11%</small>
-                                </div>
-                              </td>
-                            </tr>
-                            <tr>
-                              <td>6</td>
-                              <td>
-                                <div class="d-flex align-items-center">
-                                  <i class="fis fi fi-ca rounded-circle fs-4 me-3"></i>
-                                  <span class="text-heading">Canada</span>
-                                </div>
-                              </td>
-                              <td class="text-heading">22.35k</td>
-                              <td>
-                                <div
-                                  class="d-flex justify-content-between align-items-center gap-4"
-                                >
-                                  <div class="progress w-100" style="height: 10px">
-                                    <div
-                                      class="progress-bar bg-danger"
-                                      role="progressbar"
-                                      style="width: 15.13%"
-                                      aria-valuenow="7.11"
-                                      aria-valuemin="0"
-                                      aria-valuemax="100"
-                                    ></div>
-                                  </div>
-                                  <small class="fw-medium">15.13%</small>
-                                </div>
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <!--/ pill table -->
             </div>
           </div>
-          <!-- / Content -->
-
-          <!-- Footer -->
-          <footer class="content-footer footer bg-footer-theme">
-            <div class="container-xxl">
-              <div
-                class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column"
-              >
-                <div class="text-body">
-                  ©2024
-                  <!-- <script>
-                    document.write(new Date().getFullYear())
-                  </script> -->
-                  , made with ❤️ by
-                  <a href="https://themeselection.com/" target="_blank" class="footer-link"
-                    >ThemeSelection</a
-                  >
+        </div>
+      </div>
+      <!--/ Total Revenue -->
+      <div class="col-12 col-md-8 col-lg-12 col-xxl-4 order-3 order-md-2">
+        <div class="row">
+          <div class="col-6 mb-6">
+            <div class="card h-100">
+              <div class="card-body">
+                <div class="card-title d-flex align-items-start justify-content-between mb-4">
+                  <div class="avatar flex-shrink-0">
+                    <img src="/img/icons/unicons/paypal.png" alt="paypal" class="rounded" />
+                  </div>
+                  <div class="dropdown">
+                    <button
+                      class="btn p-0"
+                      type="button"
+                      id="cardOpt4"
+                      data-bs-toggle="dropdown"
+                      aria-haspopup="true"
+                      aria-expanded="false"
+                    >
+                      <i class="bx bx-dots-vertical-rounded text-muted"></i>
+                    </button>
+                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
+                      <a class="dropdown-item" href="javascript:void(0);">View More</a>
+                      <a class="dropdown-item" href="javascript:void(0);">Delete</a>
+                    </div>
+                  </div>
                 </div>
-                <div class="d-none d-lg-inline-block"></div>
+                <p class="mb-1">Payments</p>
+                <h4 class="card-title mb-3">$2,456</h4>
+                <small class="text-danger fw-medium"
+                  ><i class="bx bx-down-arrow-alt"></i> -14.82%</small
+                >
               </div>
             </div>
-          </footer>
-          <!-- / Footer -->
-
-          <div class="content-backdrop fade"></div>
+          </div>
+          <div class="col-6 mb-6">
+            <div class="card h-100">
+              <div class="card-body pb-0">
+                <span class="d-block fw-medium mb-1">Revenue</span>
+                <h4 class="card-title mb-0 mb-lg-4">425k</h4>
+                <div id="revenueChart"></div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 mb-6">
+            <div class="card">
+              <div class="card-body">
+                <div
+                  class="d-flex justify-content-between align-items-center flex-sm-row flex-column gap-10"
+                >
+                  <div
+                    class="d-flex flex-sm-column flex-row align-items-start justify-content-between"
+                  >
+                    <div class="card-title mb-6">
+                      <h5 class="text-nowrap mb-1">Profile Report</h5>
+                      <span class="badge bg-label-warning">YEAR 2022</span>
+                    </div>
+                    <div class="mt-sm-auto">
+                      <span class="text-success text-nowrap fw-medium"
+                        ><i class="bx bx-up-arrow-alt"></i> 68.2%</span
+                      >
+                      <h4 class="mb-0">$84,686k</h4>
+                    </div>
+                  </div>
+                  <div id="profileReportChart"></div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-        <!-- Content wrapper -->
       </div>
-      <!-- / Layout page -->
     </div>
+    <div class="row">
+      <!-- Order Statistics -->
+      <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
+        <div class="card h-100">
+          <div class="card-header d-flex justify-content-between">
+            <div class="card-title mb-0">
+              <h5 class="mb-1 me-2">Order Statistics</h5>
+              <p class="card-subtitle">42.82k Total Sales</p>
+            </div>
+            <div class="dropdown">
+              <button
+                class="btn text-muted p-0"
+                type="button"
+                id="orederStatistics"
+                data-bs-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
+                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
+                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+                <a class="dropdown-item" href="javascript:void(0);">Share</a>
+              </div>
+            </div>
+          </div>
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-6">
+              <div class="d-flex flex-column align-items-center gap-1">
+                <h3 class="mb-1">8,258</h3>
+                <small>Total Orders</small>
+              </div>
+              <div id="orderStatisticsChart"></div>
+            </div>
+            <ul class="p-0 m-0">
+              <li class="d-flex align-items-center mb-5">
+                <div class="avatar flex-shrink-0 me-3">
+                  <span class="avatar-initial rounded bg-label-primary"
+                    ><i class="bx bx-mobile-alt"></i
+                  ></span>
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <h6 class="mb-0">Electronic</h6>
+                    <small>Mobile, Earbuds, TV</small>
+                  </div>
+                  <div class="user-progress">
+                    <h6 class="mb-0">82.5k</h6>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center mb-5">
+                <div class="avatar flex-shrink-0 me-3">
+                  <span class="avatar-initial rounded bg-label-success"
+                    ><i class="bx bx-closet"></i
+                  ></span>
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <h6 class="mb-0">Fashion</h6>
+                    <small>T-shirt, Jeans, Shoes</small>
+                  </div>
+                  <div class="user-progress">
+                    <h6 class="mb-0">23.8k</h6>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center mb-5">
+                <div class="avatar flex-shrink-0 me-3">
+                  <span class="avatar-initial rounded bg-label-info"
+                    ><i class="bx bx-home-alt"></i
+                  ></span>
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <h6 class="mb-0">Decor</h6>
+                    <small>Fine Art, Dining</small>
+                  </div>
+                  <div class="user-progress">
+                    <h6 class="mb-0">849k</h6>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center">
+                <div class="avatar flex-shrink-0 me-3">
+                  <span class="avatar-initial rounded bg-label-secondary"
+                    ><i class="bx bx-football"></i
+                  ></span>
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <h6 class="mb-0">Sports</h6>
+                    <small>Football, Cricket Kit</small>
+                  </div>
+                  <div class="user-progress">
+                    <h6 class="mb-0">99</h6>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <!--/ Order Statistics -->
 
-    <!-- Overlay -->
-    <div class="layout-overlay layout-menu-toggle"></div>
+      <!-- Expense Overview -->
+      <div class="col-md-6 col-lg-4 order-1 mb-6">
+        <div class="card h-100">
+          <div class="card-header nav-align-top">
+            <ul class="nav nav-pills" role="tablist">
+              <li class="nav-item">
+                <button
+                  type="button"
+                  class="nav-link active"
+                  role="tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-tabs-line-card-income"
+                  aria-controls="navs-tabs-line-card-income"
+                  aria-selected="true"
+                >
+                  Income
+                </button>
+              </li>
+              <li class="nav-item">
+                <button type="button" class="nav-link" role="tab">Expenses</button>
+              </li>
+              <li class="nav-item">
+                <button type="button" class="nav-link" role="tab">Profit</button>
+              </li>
+            </ul>
+          </div>
+          <div class="card-body">
+            <div class="tab-content p-0">
+              <div
+                class="tab-pane fade show active"
+                id="navs-tabs-line-card-income"
+                role="tabpanel"
+              >
+                <div class="d-flex mb-6">
+                  <div class="avatar flex-shrink-0 me-3">
+                    <img src="/img/icons/unicons/wallet-primary.png" alt="User" />
+                  </div>
+                  <div>
+                    <p class="mb-0">Total Balance</p>
+                    <div class="d-flex align-items-center">
+                      <h6 class="mb-0 me-1">$459.10</h6>
+                      <small class="text-success fw-medium">
+                        <i class="bx bx-chevron-up bx-lg"></i>
+                        42.9%
+                      </small>
+                    </div>
+                  </div>
+                </div>
+                <div id="incomeChart"></div>
+                <div class="d-flex align-items-center justify-content-center mt-6 gap-3">
+                  <div class="flex-shrink-0">
+                    <div id="expensesOfWeek"></div>
+                  </div>
+                  <div>
+                    <h6 class="mb-0">Income this week</h6>
+                    <small>$39k less than last week</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--/ Expense Overview -->
 
-    <!-- Drag Target Area To SlideIn Menu On Small Screens -->
-    <div class="drag-target"></div>
+      <!-- Transactions -->
+      <div class="col-md-6 col-lg-4 order-2 mb-6">
+        <div class="card h-100">
+          <div class="card-header d-flex align-items-center justify-content-between">
+            <h5 class="card-title m-0 me-2">Transactions</h5>
+            <div class="dropdown">
+              <button
+                class="btn text-muted p-0"
+                type="button"
+                id="transactionID"
+                data-bs-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
+                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
+                <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
+                <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
+                <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
+              </div>
+            </div>
+          </div>
+          <div class="card-body pt-4">
+            <ul class="p-0 m-0">
+              <li class="d-flex align-items-center mb-6">
+                <div class="avatar flex-shrink-0 me-3">
+                  <img src="/img/icons/unicons/paypal.png" alt="User" class="rounded" />
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <small class="d-block">Paypal</small>
+                    <h6 class="fw-normal mb-0">Send money</h6>
+                  </div>
+                  <div class="user-progress d-flex align-items-center gap-2">
+                    <h6 class="fw-normal mb-0">+82.6</h6>
+                    <span class="text-muted">USD</span>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center mb-6">
+                <div class="avatar flex-shrink-0 me-3">
+                  <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <small class="d-block">Wallet</small>
+                    <h6 class="fw-normal mb-0">Mac'D</h6>
+                  </div>
+                  <div class="user-progress d-flex align-items-center gap-2">
+                    <h6 class="fw-normal mb-0">+270.69</h6>
+                    <span class="text-muted">USD</span>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center mb-6">
+                <div class="avatar flex-shrink-0 me-3">
+                  <img src="/img/icons/unicons/chart.png" alt="User" class="rounded" />
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <small class="d-block">Transfer</small>
+                    <h6 class="fw-normal mb-0">Refund</h6>
+                  </div>
+                  <div class="user-progress d-flex align-items-center gap-2">
+                    <h6 class="fw-normal mb-0">+637.91</h6>
+                    <span class="text-muted">USD</span>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center mb-6">
+                <div class="avatar flex-shrink-0 me-3">
+                  <img src="/img/icons/unicons/cc-primary.png" alt="User" class="rounded" />
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <small class="d-block">Credit Card</small>
+                    <h6 class="fw-normal mb-0">Ordered Food</h6>
+                  </div>
+                  <div class="user-progress d-flex align-items-center gap-2">
+                    <h6 class="fw-normal mb-0">-838.71</h6>
+                    <span class="text-muted">USD</span>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center mb-6">
+                <div class="avatar flex-shrink-0 me-3">
+                  <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <small class="d-block">Wallet</small>
+                    <h6 class="fw-normal mb-0">Starbucks</h6>
+                  </div>
+                  <div class="user-progress d-flex align-items-center gap-2">
+                    <h6 class="fw-normal mb-0">+203.33</h6>
+                    <span class="text-muted">USD</span>
+                  </div>
+                </div>
+              </li>
+              <li class="d-flex align-items-center">
+                <div class="avatar flex-shrink-0 me-3">
+                  <img src="/img/icons/unicons/cc-warning.png" alt="User" class="rounded" />
+                </div>
+                <div
+                  class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"
+                >
+                  <div class="me-2">
+                    <small class="d-block">Mastercard</small>
+                    <h6 class="fw-normal mb-0">Ordered Food</h6>
+                  </div>
+                  <div class="user-progress d-flex align-items-center gap-2">
+                    <h6 class="fw-normal mb-0">-92.45</h6>
+                    <span class="text-muted">USD</span>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <!--/ Transactions -->
+      <!-- Activity Timeline -->
+      <div class="col-md-12 col-lg-6 order-4 order-lg-3">
+        <div class="card h-100">
+          <div class="card-header d-flex justify-content-between">
+            <h5 class="card-title m-0 me-2">Activity Timeline</h5>
+            <div class="dropdown">
+              <button
+                class="btn text-muted p-0"
+                type="button"
+                id="timelineWapper"
+                data-bs-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+              >
+                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
+                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
+                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
+                <a class="dropdown-item" href="javascript:void(0);">Share</a>
+              </div>
+            </div>
+          </div>
+          <div class="card-body pt-2">
+            <ul class="timeline mb-0">
+              <li class="timeline-item timeline-item-transparent">
+                <span class="timeline-point timeline-point-primary"></span>
+                <div class="timeline-event">
+                  <div class="timeline-header mb-3">
+                    <h6 class="mb-0">12 Invoices have been paid</h6>
+                    <small class="text-muted">12 min ago</small>
+                  </div>
+                  <p class="mb-2">Invoices have been paid to the company</p>
+                  <div class="d-flex align-items-center mb-1">
+                    <div class="badge bg-lighter rounded-2">
+                      <img src="/img/icons/misc/pdf.png" alt="img" width="15" class="me-2" />
+                      <span class="h6 mb-0 text-body">invoices.pdf</span>
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item timeline-item-transparent">
+                <span class="timeline-point timeline-point-success"></span>
+                <div class="timeline-event">
+                  <div class="timeline-header mb-3">
+                    <h6 class="mb-0">Client Meeting</h6>
+                    <small class="text-muted">45 min ago</small>
+                  </div>
+                  <p class="mb-2">Project meeting with john @10:15am</p>
+                  <div class="d-flex justify-content-between flex-wrap gap-2">
+                    <div class="d-flex flex-wrap align-items-center">
+                      <div class="avatar avatar-sm me-2">
+                        <img src="/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
+                      </div>
+                      <div>
+                        <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
+                        <small>CEO of ThemeSelection</small>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <li class="timeline-item timeline-item-transparent">
+                <span class="timeline-point timeline-point-info"></span>
+                <div class="timeline-event">
+                  <div class="timeline-header mb-3">
+                    <h6 class="mb-0">Create a new project for client</h6>
+                    <small class="text-muted">2 Day Ago</small>
+                  </div>
+                  <p class="mb-2">6 team members in a project</p>
+                  <ul class="list-group list-group-flush">
+                    <li
+                      class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0"
+                    >
+                      <div class="d-flex flex-wrap align-items-center">
+                        <ul
+                          class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2"
+                        >
+                          <li
+                            data-bs-toggle="tooltip"
+                            data-popup="tooltip-custom"
+                            data-bs-placement="top"
+                            title="Vinnie Mostowy"
+                            class="avatar pull-up"
+                          >
+                            <img class="rounded-circle" src="/img/avatars/5.png" alt="Avatar" />
+                          </li>
+                          <li
+                            data-bs-toggle="tooltip"
+                            data-popup="tooltip-custom"
+                            data-bs-placement="top"
+                            title="Allen Rieske"
+                            class="avatar pull-up"
+                          >
+                            <img class="rounded-circle" src="/img/avatars/12.png" alt="Avatar" />
+                          </li>
+                          <li
+                            data-bs-toggle="tooltip"
+                            data-popup="tooltip-custom"
+                            data-bs-placement="top"
+                            title="Julee Rossignol"
+                            class="avatar pull-up"
+                          >
+                            <img class="rounded-circle" src="/img/avatars/6.png" alt="Avatar" />
+                          </li>
+                          <li class="avatar">
+                            <span
+                              class="avatar-initial rounded-circle pull-up text-heading"
+                              data-bs-toggle="tooltip"
+                              data-bs-placement="bottom"
+                              title="3 more"
+                              >+3</span
+                            >
+                          </li>
+                        </ul>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <!--/ Activity Timeline -->
+      <!-- pill table -->
+      <div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
+        <div class="card text-center h-100">
+          <div class="card-header nav-align-top">
+            <ul class="nav nav-pills" role="tablist">
+              <li class="nav-item">
+                <button
+                  type="button"
+                  class="nav-link active"
+                  role="tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-pills-browser"
+                  aria-controls="navs-pills-browser"
+                  aria-selected="true"
+                >
+                  Browser
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  type="button"
+                  class="nav-link"
+                  role="tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-pills-os"
+                  aria-controls="navs-pills-os"
+                  aria-selected="false"
+                >
+                  Operating System
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  type="button"
+                  class="nav-link"
+                  role="tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#navs-pills-country"
+                  aria-controls="navs-pills-country"
+                  aria-selected="false"
+                >
+                  Country
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div class="tab-content pt-0 pb-4">
+            <div class="tab-pane fade show active" id="navs-pills-browser" role="tabpanel">
+              <div class="table-responsive text-start text-nowrap">
+                <table class="table table-borderless">
+                  <thead>
+                    <tr>
+                      <th>No</th>
+                      <th>Browser</th>
+                      <th>Visits</th>
+                      <th class="w-50">Data In Percentage</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>1</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/chrome.png"
+                            alt="Chrome"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Chrome</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">8.92k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-success"
+                              role="progressbar"
+                              style="width: 64.75%"
+                              aria-valuenow="64.75"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">64.75%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>2</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/safari.png"
+                            alt="Safari"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Safari</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">1.29k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-primary"
+                              role="progressbar"
+                              style="width: 18.43%"
+                              aria-valuenow="18.43"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">18.43%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>3</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/firefox.png"
+                            alt="Firefox"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Firefox</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">328</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-info"
+                              role="progressbar"
+                              style="width: 8.37%"
+                              aria-valuenow="8.37"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">8.37%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>4</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/edge.png"
+                            alt="Edge"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Edge</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">142</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-warning"
+                              role="progressbar"
+                              style="width: 6.12%"
+                              aria-valuenow="6.12"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">6.12%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>5</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/opera.png"
+                            alt="Opera"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Opera</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">82</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-danger"
+                              role="progressbar"
+                              style="width: 2.12%"
+                              aria-valuenow="1.94"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">2.12%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>6</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img src="/img/icons/brands/uc.png" alt="uc" height="24" class="me-3" />
+                          <span class="text-heading">UC Browser</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">328</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-danger"
+                              role="progressbar"
+                              style="width: 20.14%"
+                              aria-valuenow="1.94"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">20.14%</small>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div class="tab-pane fade" id="navs-pills-os" role="tabpanel">
+              <div class="table-responsive text-start text-nowrap">
+                <table class="table table-borderless">
+                  <thead>
+                    <tr>
+                      <th>No</th>
+                      <th>System</th>
+                      <th>Visits</th>
+                      <th class="w-50">Data In Percentage</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>1</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/windows.png"
+                            alt="Windows"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Windows</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">875.24k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-success"
+                              role="progressbar"
+                              style="width: 61.5%"
+                              aria-valuenow="61.50"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">61.50%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>2</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img src="/img/icons/brands/mac.png" alt="Mac" height="24" class="me-3" />
+                          <span class="text-heading">Mac</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">89.68k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-primary"
+                              role="progressbar"
+                              style="width: 16.67%"
+                              aria-valuenow="16.67"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">16.67%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>3</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/ubuntu.png"
+                            alt="Ubuntu"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Ubuntu</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">37.68k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-info"
+                              role="progressbar"
+                              style="width: 12.82%"
+                              aria-valuenow="12.82"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">12.82%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>4</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/chrome.png"
+                            alt="Chrome"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Chrome</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">8.34k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-warning"
+                              role="progressbar"
+                              style="width: 6.25%"
+                              aria-valuenow="6.25"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">6.25%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>5</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/cent.png"
+                            alt="Cent"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Cent</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">2.25k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-danger"
+                              role="progressbar"
+                              style="width: 2.76%"
+                              aria-valuenow="2.76"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">2.76%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>6</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <img
+                            src="/img/icons/brands/linux.png"
+                            alt="linux"
+                            height="24"
+                            class="me-3"
+                          />
+                          <span class="text-heading">Linux</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">328k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-danger"
+                              role="progressbar"
+                              style="width: 20.14%"
+                              aria-valuenow="2.76"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">20.14%</small>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div class="tab-pane fade" id="navs-pills-country" role="tabpanel">
+              <div class="table-responsive text-start text-nowrap">
+                <table class="table table-borderless">
+                  <thead>
+                    <tr>
+                      <th>No</th>
+                      <th>Country</th>
+                      <th>Visits</th>
+                      <th class="w-50">Data In Percentage</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>1</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <i class="fis fi fi-us rounded-circle fs-4 me-3"></i>
+                          <span class="text-heading">USA</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">87.24k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-success"
+                              role="progressbar"
+                              style="width: 38.12%"
+                              aria-valuenow="38.12"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">38.12%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>2</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <i class="fis fi fi-br rounded-circle fs-4 me-3"></i>
+                          <span class="text-heading">Brazil</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">42.68k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-primary"
+                              role="progressbar"
+                              style="width: 28.23%"
+                              aria-valuenow="28.23"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">28.23%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>3</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <i class="fis fi fi-in rounded-circle fs-4 me-3"></i>
+                          <span class="text-heading">India</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">12.58k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-info"
+                              role="progressbar"
+                              style="width: 14.82%"
+                              aria-valuenow="14.82"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">14.82%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>4</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <i class="fis fi fi-au rounded-circle fs-4 me-3"></i>
+                          <span class="text-heading">Australia</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">4.13k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-warning"
+                              role="progressbar"
+                              style="width: 12.72%"
+                              aria-valuenow="12.72"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">12.72%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>5</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <i class="fis fi fi-fr rounded-circle fs-4 me-3"></i>
+                          <span class="text-heading">France</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">2.21k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-danger"
+                              role="progressbar"
+                              style="width: 7.11%"
+                              aria-valuenow="7.11"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">7.11%</small>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>6</td>
+                      <td>
+                        <div class="d-flex align-items-center">
+                          <i class="fis fi fi-ca rounded-circle fs-4 me-3"></i>
+                          <span class="text-heading">Canada</span>
+                        </div>
+                      </td>
+                      <td class="text-heading">22.35k</td>
+                      <td>
+                        <div class="d-flex justify-content-between align-items-center gap-4">
+                          <div class="progress w-100" style="height: 10px">
+                            <div
+                              class="progress-bar bg-danger"
+                              role="progressbar"
+                              style="width: 15.13%"
+                              aria-valuenow="7.11"
+                              aria-valuemin="0"
+                              aria-valuemax="100"
+                            ></div>
+                          </div>
+                          <small class="fw-medium">15.13%</small>
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--/ pill table -->
+    </div>
   </div>
 </template>
 
 <script setup>
-import { nextTick } from 'vue'
-window.isDarkStyle = window.Helpers.isDarkStyle()
 
-const loadScript = (src) => {
-  const script = document.createElement('script')
-  script.src = src
-  script.type = 'text/javascript'
-  script.async = true
-  document.body.appendChild(script)
-  script.onload = () => {
-    console.log(`${src} loaded successfully.`)
-  }
-  script.onerror = () => {
-    console.error(`Failed to load script: ${src}`)
-  }
-}
-nextTick(() => {
-  // loadScript('/vendor/js/helpers.js')
-  // loadScript('/vendor/js/template-customizer.js')
-  // loadScript('/js/config.js')
-  loadScript('/vendor/js/menu.js')
-  loadScript('/js/main.js')
-  // loadScript('/js/dashboards-analytics.js')
-})
 </script>
 
 <style lang="scss" scoped></style>