From 6931e06952e96f53af8bc1125ed09be0fd8b1fa3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 24 Oct 2023 08:56:29 +0700
Subject: [PATCH 01/20] update condition sidebar menu active

---
 src/components/Navigation/Aside/AsideMenuMultiple.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index d8f0af4..b2ad9fa 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -36,7 +36,7 @@ const isMenuSelected = computed(() => {
         <Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
             <!-- Nested item with children -->
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
-                :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 text-primary-500 font-bold' : 'text-gray-600 font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
+                :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
                 <embed :src="isChildren ? DotOutline : item.icon"
                     :class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
                     type="image/svg+xml" />

From 96d8550cfeaae6f26ab50120059d30f399871fde Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 24 Oct 2023 15:24:21 +0700
Subject: [PATCH 02/20] update

---
 package-lock.json                  |  66 ++++++++-----
 package.json                       |  10 +-
 src/App.vue                        |  13 +--
 src/components/CommandPalettes.vue | 103 ++++---------------
 src/router/index.ts                | 152 ++++++++++++++++-------------
 src/stores/auth.ts                 |   2 +-
 src/stores/command.ts              |  48 +++++++--
 src/utils/route.ts                 |  20 ----
 src/{stores => utils}/storage.ts   |   0
 9 files changed, 199 insertions(+), 215 deletions(-)
 rename src/{stores => utils}/storage.ts (100%)

diff --git a/package-lock.json b/package-lock.json
index 474335c..44ba8b7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,23 +1,25 @@
 {
-  "name": "apkt",
-  "version": "0.0.0",
+  "name": "eis",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "apkt",
-      "version": "0.0.0",
+      "name": "eis",
+      "version": "0.0.1",
       "dependencies": {
         "@headlessui/tailwindcss": "^0.2.0",
         "@headlessui/vue": "^1.7.16",
         "@heroicons/vue": "^2.0.18",
         "@lottiefiles/lottie-player": "^2.0.2",
+        "@types/qs": "^6.9.9",
         "@types/uuid": "^9.0.2",
         "devextreme": "23.1.5",
         "devextreme-vue": "23.1.5",
         "dotenv": "^16.3.1",
         "encrypt-storage": "^2.12.16",
         "pinia": "^2.1.3",
+        "qs": "^6.11.2",
         "uuid": "^9.0.0",
         "vue": "^3.3.4",
         "vue-router": "^4.2.2",
@@ -1308,6 +1310,11 @@
       "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.5.tgz",
       "integrity": "sha512-cg6x1RjMyCYoAdhOyNC/144EqhdHJXXZiiTgN3o+ZtOu4+ZQVN5msZgNyxzDI1w+dMYDdRamDzto3+bkR3FFQQ=="
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.9",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
+      "integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
+    },
     "node_modules/@types/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
@@ -2578,7 +2585,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -4114,8 +4120,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -4174,7 +4179,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -4374,7 +4378,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -4386,7 +4389,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5759,7 +5761,6 @@
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
       "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6365,6 +6366,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -6906,7 +6921,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -9141,6 +9155,11 @@
       "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.5.tgz",
       "integrity": "sha512-cg6x1RjMyCYoAdhOyNC/144EqhdHJXXZiiTgN3o+ZtOu4+ZQVN5msZgNyxzDI1w+dMYDdRamDzto3+bkR3FFQQ=="
     },
+    "@types/qs": {
+      "version": "6.9.9",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
+      "integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
+    },
     "@types/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
@@ -10051,7 +10070,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -11226,8 +11244,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "function.prototype.name": {
       "version": "1.1.6",
@@ -11268,7 +11285,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -11412,14 +11428,12 @@
     "has-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
     },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
       "version": "1.0.0",
@@ -12445,8 +12459,7 @@
     "object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "object-keys": {
       "version": "1.1.1",
@@ -12843,6 +12856,14 @@
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
       "dev": true
     },
+    "qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
+    },
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -13246,7 +13267,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
diff --git a/package.json b/package.json
index 2a48ee9..0d11ff4 100644
--- a/package.json
+++ b/package.json
@@ -18,16 +18,18 @@
     "@headlessui/vue": "^1.7.16",
     "@heroicons/vue": "^2.0.18",
     "@lottiefiles/lottie-player": "^2.0.2",
+    "@types/qs": "^6.9.9",
     "@types/uuid": "^9.0.2",
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
+    "dotenv": "^16.3.1",
+    "encrypt-storage": "^2.12.16",
     "pinia": "^2.1.3",
+    "qs": "^6.11.2",
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
-    "vue-tailwind-datepicker": "^1.4.5",
-    "encrypt-storage": "^2.12.16",
-    "dotenv": "^16.3.1"
+    "vue-tailwind-datepicker": "^1.4.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.5.1",
@@ -57,4 +59,4 @@
     "vitest": "^0.34.6",
     "vue-tsc": "^1.6.5"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 25b53f2..e7bf172 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,9 @@
 import { RouterView } from 'vue-router'
 import { NotificationProvider } from '@/components/Notification'
 import { useDialogStore } from '@/stores/dialog'
-import ActionDialog from '@/components/Dialogs/ActionDialog.vue';
-import CommandPalettes from '@/components/CommandPalettes.vue';
-import { useCommandPalattesStore } from '@/stores/command';
-
+import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
+import CommandPalettes from '@/components/CommandPalettes.vue'
 const dialog = useDialogStore()
-const command = useCommandPalattesStore()
 </script>
 
 <template>
@@ -16,9 +13,7 @@ const command = useCommandPalattesStore()
       :open="dialog.open" :title="dialog.title" :message="dialog.content" :confirm-text="dialog.confirmText"
       :cancel-text="dialog.cancelText" @on-close="dialog.open = false" @on-confirm="dialog.onConfirm"
       @on-cancel="dialog.onCancel" :type="dialog.type" />
-    <CommandPalettes :open="command.open" @onClose="command.handleOnDismissCommandPalettes" />
+    <CommandPalettes />
     <RouterView />
   </NotificationProvider>
-</template>
-
-<style scoped></style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index aed0065..de1335a 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -1,5 +1,5 @@
 <template>
-    <TransitionRoot :show="open" as="template" @after-leave="onQueryChange('')" appear>
+    <TransitionRoot :show="command.open" as="template" @after-leave="onQueryChange('')" appear>
         <Dialog as="div" class="relative z-10" @close="onClose">
             <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
                 leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
@@ -27,13 +27,14 @@
                                 <li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
                                     <h2 v-if="query === '' && recent.length > 0"
                                         class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
-                                        Pencarian terakhir</h2>
+                                        Terakhir Diakses
+                                    </h2>
                                     <ul class="text-sm text-gray-700">
                                         <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
-                                            :key="menu.href" v-slot="{ active }">
+                                            :key="menu.path" v-slot="{ active }">
                                             <li @click="openMenu(menu)"
                                                 :class="['flex cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
-                                                <component :is="menu.icon"
+                                                <DocumentTextIcon
                                                     :class="['h-6 w-6 flex-none text-gray-900 text-opacity-40', active && 'text-opacity-100']"
                                                     aria-hidden="true" />
                                                 <span class="flex-auto ml-3 truncate">
@@ -69,7 +70,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
-import { FolderIcon } from '@heroicons/vue/24/outline'
+import { DocumentTextIcon } from '@heroicons/vue/24/outline'
 import {
     Combobox,
     ComboboxInput,
@@ -80,80 +81,28 @@ import {
     TransitionChild,
     TransitionRoot,
 } from '@headlessui/vue'
-import { useMenuStore } from '@/stores/menu';
-import { useRouter } from 'vue-router';
+import { useRouter, type RouteRecordRaw } from 'vue-router'
+import { routes, extractLeafRoutes } from '@/router'
+import { useCommandPalattesStore } from '@/stores/command'
 
-// const menus = [
-//     { id: 1, name: 'Workflow Inc. / Website Redesign', url: '#' },
-// ]
-const nav = useMenuStore()
-const menus = nav.navigation
-
-// var recent = computed(() => readRecentMenu())
-
-const props = defineProps({
-    open: Boolean
-})
-
-const emit = defineEmits(['onClose'])
-
-function searchMenus(query: string) {
-    const result: typeof menus = []
-    menus.forEach((menu) => {
-        if (menu.children.length > 0) {
-            menu.children.forEach((child) => {
-                if (child.children.length > 0) {
-                    child.children.forEach((grandChild) => {
-                        if (grandChild.name.toLowerCase().includes(query.toLowerCase())) {
-                            result.push(grandChild)
-                        }
-                    })
-                } else {
-                    if (child.name.toLowerCase().includes(query.toLowerCase())) {
-                        result.push(child)
-                    }
-                }
-            })
-        } else {
-            if (menu.name.toLowerCase().includes(query.toLowerCase())) {
-                result.push(menu)
-            }
-        }
-
-    })
-    return result;
+const command = useCommandPalattesStore()
+const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
+    const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+    return matchingRoutes
 }
 
 const route = useRouter()
-const recent = computed(() => query.value === '' ? readRecentMenu() : [])
-const open = ref(props.open)
+const recent = computed(() => query.value === '' ? command.readRecent() : [])
 const query = ref('')
 const filteredMenus = computed(() =>
     query.value === ''
         ? []
-        : searchMenus(query.value)
+        : searchRoutesByName(routes, query.value)
 )
+const onClose = () => command.open = false
 
-function onClose() {
-    open.value = false
-    emit('onClose')
-}
-
-function addMenuToRecent(menu: any) {
-    const lastRecent = readRecentMenu()
-    const index = lastRecent.findIndex((item: any) => item.href === menu.href)
-    if (index > -1) {
-        lastRecent.splice(index, 1)
-    }
-    lastRecent.unshift(menu)
-    if (lastRecent.length > 5) {
-        lastRecent.pop()
-    }
-
-    localStorage.setItem('recentmenu', JSON.stringify(lastRecent))
-}
 let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
-function onQueryChange(value: string) {
+const onQueryChange = (value: string) => {
     if (debounceTimeout) {
         clearTimeout(debounceTimeout);
     }
@@ -164,25 +113,15 @@ function onQueryChange(value: string) {
             return
         }
         query.value = value
+        const data = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().includes(value))
+        console.log(data)
     }, 300);
 }
 
-function readRecentMenu() {
-    const recent = localStorage.getItem('recentmenu')
-    if (recent) {
-        return JSON.parse(recent)
-    }
-    return []
-}
-
-function openMenu(menu: typeof menus[0]) {
-    addMenuToRecent(menu)
+const openMenu = (menu: RouteRecordRaw) => {
+    command.addRecent(menu)
     route.push(menu.path)
     onClose()
 }
 
-watch(() => props.open, (value) => {
-    open.value = value;
-});
-
 </script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 7936d9a..495b57f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,9 +6,9 @@ import LoginView from '@/views/LoginView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 import EmptyPage from '@/components/Pages/HomeEmpty.vue'
 import TestPage from '@/components/Pages/TestPage.vue'
-import { hasMoreThanTwoSlashes, removeExtraSlashes } from '@/utils/route'
+import qs from 'qs'
 
-const routes: RouteRecordRaw[] = [
+export const routes: RouteRecordRaw[] = [
   {
     path: '/home',
     name: 'Home',
@@ -24,7 +24,7 @@ const routes: RouteRecordRaw[] = [
         name: 'Gangguan',
         children: [
           {
-            path: 'a',
+            path: 'daftar',
             name: 'Daftar',
             children: [
               {
@@ -65,7 +65,7 @@ const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'b',
+            path: 'rekapitulasi',
             name: 'Rekapitulasi',
             children: [
               {
@@ -147,7 +147,7 @@ const routes: RouteRecordRaw[] = [
         name: 'Keluhan',
         children: [
           {
-            path: 'a',
+            path: 'daftar',
             name: 'Daftar',
             children: [
               {
@@ -188,7 +188,7 @@ const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'b',
+            path: 'rekapitulasi',
             name: 'Rekapitulasi',
             children: [
               {
@@ -240,11 +240,11 @@ const routes: RouteRecordRaw[] = [
         name: 'Monalisa',
         children: [
           {
-            path: 'a',
+            path: 'gangguan',
             name: 'Gangguan',
             children: [
               {
-                path: 'a',
+                path: 'rekapitulasi',
                 name: 'Rekapitulasi',
                 children: [
                   {
@@ -254,31 +254,41 @@ const routes: RouteRecordRaw[] = [
                   },
                   {
                     path: '2',
-                    name: 'Recovery Time (RCT) Gangguan',
+                    name: 'Dispacthing Time (DT) Gangguan',
                     component: TestPage,
                   },
                   {
                     path: '3',
-                    name: 'Response Time (RPT) Gangguan',
+                    name: 'Recovery Time (RCT) Gangguan',
                     component: TestPage,
                   },
                   {
                     path: '4',
-                    name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+                    name: 'Response Time (RPT) Gangguan',
                     component: TestPage,
                   },
                   {
                     path: '5',
-                    name: 'Rekapitulasi Lapor Ulang Gangguan',
+                    name: 'Jumlah dan Durasi RPT RCT Gangguan',
                     component: TestPage,
                   },
                   {
                     path: '6',
-                    name: 'Rekapitulasi ENS Gangguan',
+                    name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
                     component: TestPage,
                   },
                   {
                     path: '7',
+                    name: 'Rekapitulasi Lapor Ulang Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '8',
+                    name: 'Rekapitulasi ENS Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '9',
                     name: 'Rekapitulasi Gangguan Belum Selesai',
                     component: TestPage,
                   },
@@ -287,11 +297,11 @@ const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'b',
+            path: 'keluhan',
             name: 'Keluhan',
             children: [
               {
-                path: 'a',
+                path: 'rekapitulasi',
                 name: 'Rekapitulasi',
                 children: [
                   {
@@ -311,16 +321,21 @@ const routes: RouteRecordRaw[] = [
                   },
                   {
                     path: '4',
-                    name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
+                    name: 'Jumlah dan Durasi RPT RCT Keluhan',
                     component: TestPage,
                   },
                   {
                     path: '5',
-                    name: 'Rekapitulasi Lapor Ulang Keluhan',
+                    name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
                     component: TestPage,
                   },
                   {
                     path: '6',
+                    name: 'Rekapitulasi Lapor Ulang Keluhan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '7',
                     name: 'Rekapitulasi Keluhan Belum Selesai',
                     component: TestPage,
                   },
@@ -329,11 +344,11 @@ const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'c',
+            path: 'kpi',
             name: 'Laporan KPI',
             children: [
               {
-                path: 'a',
+                path: 'bulanan',
                 name: 'Bulanan',
                 children: [
                   {
@@ -359,7 +374,7 @@ const routes: RouteRecordRaw[] = [
                 ],
               },
               {
-                path: '2',
+                path: 'kumulatif',
                 name: 'Kumulatif',
                 children: [
                   {
@@ -393,7 +408,7 @@ const routes: RouteRecordRaw[] = [
         name: 'Check In OutCheck In Dan Check Out',
         children: [
           {
-            path: 'a',
+            path: 'laporan',
             name: 'Laporan Check In /Check Out (CICO)',
             children: [
               {
@@ -410,7 +425,7 @@ const routes: RouteRecordRaw[] = [
         name: 'Anomali Penangan Pengaduan',
         children: [
           {
-            path: 'a',
+            path: 'gangguan',
             name: 'Gangguan',
             children: [
               {
@@ -426,7 +441,7 @@ const routes: RouteRecordRaw[] = [
             ],
           },
           {
-            path: 'b',
+            path: 'keluhan',
             name: 'Keluhan',
             children: [
               {
@@ -463,50 +478,50 @@ const routes: RouteRecordRaw[] = [
   },
 ]
 
-// const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
-//   var newRoute: RouteRecordRaw[] = []
+export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
+  const mergedRoutes: RouteRecordRaw[] = [];
 
-//   const getRoute = (route: RouteRecordRaw[], parent: string = '') => {
-//     route.forEach((r) => {
-//       if (r.children) {
-//         if (r.component) {
-//           var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}`
-//           fullPath = hasMoreThanTwoSlashes(fullPath) ? removeExtraSlashes(fullPath) : fullPath
-//           newRoute.push({
-//             path: fullPath,
-//             name: r.name,
-//             component: r.component
-//           } as RouteRecordRaw)
-//         }
-//         getRoute(r.children, `${parent}/${r.path}`)
-//       } else {
-//         var fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}`
-//         if (newRoute.find((nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path))) {
-//           const index = newRoute.findIndex((nr) => nr.path !== '/' && fullPath.includes(nr.path))
-//           newRoute[index] = {
-//             ...newRoute[index], children: [...newRoute[index].children ?? [], {
-//               path: fullPath === '/home/' ? '' : fullPath.includes('/home/') ? fullPath.replace('/home/', '').split('/').join('-') : fullPath.split('/').join('-'),
-//               name: r.name,
-//               component: r.component
-//             } as RouteRecordRaw]
-//           }
-//         } else {
-//           newRoute.push({
-//             path: fullPath,
-//             name: r.name,
-//             component: r.component
-//           } as RouteRecordRaw)
-//         }
-//       }
-//     })
-//   }
-//   getRoute(route)
-//   console.log(newRoute);
+  for (const route of routes) {
+    if (route.children && route.children.length > 0) {
+      // Buat salinan route tanpa children
+      const topLevelRoute: RouteRecordRaw = { ...route, children: [] };
 
-//   return newRoute
-// }
+      // Salin setiap route children ke children route paling atas
+      for (const childRoute of route.children) {
+        const fullPath = `${route.path}/${childRoute.path}`.replace(/\/+/g, '/');
+        const mergedChildRoute: RouteRecordRaw = { ...childRoute, path: fullPath };
+        topLevelRoute.children?.push(mergedChildRoute);
+      }
 
-const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
+      mergedRoutes.push(topLevelRoute);
+    } else {
+      // Jika route tidak memiliki children, tambahkan as is
+      mergedRoutes.push(route);
+    }
+  }
+
+  return mergedRoutes;
+}
+
+export const extractLeafRoutes = (routes: RouteRecordRaw[], parentPath = ''): RouteRecordRaw[] => {
+  const leafRoutes: RouteRecordRaw[] = [];
+
+  for (const route of routes) {
+
+    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
+
+    if (route.children && route.children.length > 0) {
+      leafRoutes.push(...extractLeafRoutes(route.children, fullPath));
+    } else {
+      const leafRoute = { ...route, path: fullPath };
+      leafRoutes.push(leafRoute);
+    }
+  }
+
+  return leafRoutes;
+}
+
+export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
   var newRoute: RouteRecordRaw[] = []
 
   const getRoute = (route: RouteRecordRaw[], parent: string = '') => {
@@ -550,13 +565,13 @@ const createRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
   return uniqueRoute
 }
 
+
 const router = createRouter({
   history: createWebHistory(),
   linkActiveClass: 'active',
-  routes: createRoute(routes)
+  stringifyQuery: qs.stringify,
+  routes: fixRoute(routes)
 })
-console.log(router.getRoutes());
-
 
 router.beforeEach((to, from, next) => {
   // redirect to login page if not logged in and trying to access a restricted page
@@ -594,6 +609,3 @@ router.beforeEach((to, from, next) => {
 })
 
 export default router
-export {
-  routes
-}
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 1386cfb..1fc73da 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { dispatchNotification } from '@/components/Notification'
-import { readData, removeData, writeData } from './storage'
+import { readData, removeData, writeData } from '@/utils/storage'
 import router from '@/router'
 
 export const useAuthStore = defineStore('auth', () => {
diff --git a/src/stores/command.ts b/src/stores/command.ts
index 1f3d667..743df78 100644
--- a/src/stores/command.ts
+++ b/src/stores/command.ts
@@ -1,21 +1,23 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
+import type { RouteRecordRaw } from 'vue-router'
+import { readDataJson, writeDataJson } from '@/utils/storage'
 
 export const useCommandPalattesStore = defineStore('command_palettes', () => {
-    const open = ref(false);
+    const open = ref(false)
 
     const controlStatus = ref(false)
     const keyFStatus = ref(false)
 
-    function showCommandPalettes() {
+    const showCommandPalettes = () => {
         open.value = true;
     }
 
-    function handleOnDismissCommandPalettes() {
+    const handleOnDismissCommandPalettes = () => {
         open.value = false;
     }
 
-    function onKeyPressed(event: KeyboardEvent) {
+    const onKeyPressed = (event: KeyboardEvent) => {
         if (event.key === 'Control') {
             console.log('control pressed');
             controlStatus.value = true
@@ -31,7 +33,7 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
         }
     }
 
-    function onKeyUp(event: KeyboardEvent) {
+    const onKeyUp = (event: KeyboardEvent) => {
         if (event.key === 'Control') {
             console.log('control released');
             controlStatus.value = false
@@ -43,5 +45,39 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
         }
     }
 
-    return { open, showCommandPalettes, handleOnDismissCommandPalettes, onKeyPressed, onKeyUp }
+    const readRecent = (): RouteRecordRaw[] => {
+        const recent = readDataJson('recentmenu')
+        if (recent) {
+            try {
+                JSON.parse(recent)
+            } catch (error) {
+                return recent as RouteRecordRaw[]
+            }
+        }
+        return [] as RouteRecordRaw[]
+    }
+
+    const addRecent = (menu: RouteRecordRaw) => {
+        const lastRecent = readRecent()
+        const index = lastRecent.findIndex((item: RouteRecordRaw) => item.path === menu.path)
+        if (index > -1) {
+            lastRecent.splice(index, 1)
+        }
+        lastRecent.unshift(menu)
+        if (lastRecent.length > 5) {
+            lastRecent.pop()
+        }
+
+        writeDataJson('recentmenu', lastRecent)
+    }
+
+    return {
+        open,
+        showCommandPalettes,
+        handleOnDismissCommandPalettes,
+        onKeyPressed,
+        onKeyUp,
+        addRecent,
+        readRecent
+    }
 })
\ No newline at end of file
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 3626c86..1bff7b3 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -30,26 +30,6 @@ const convertToDashedString = (input: string): string => {
     return `/${parts.join('-')}`;
 }
 
-// export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => {
-//     return data.filter((i) => i.path !== '').map((item) => {
-//         const convertedItem: MenuItemModel = {
-//             name: item.name?.toString() || '',
-//             path: convertToDashedString(`${basePath}/${item.path}`).replace('/home-', '/home/'),
-//             expanded: false,
-//             icon: undefined,
-//             children: [],
-//         };
-
-//         if (item.children) {
-//             convertedItem.icon = navigationIcon[iconIndex];
-//             iconIndex = (iconIndex + 1) % navigationIcon.length;
-//             convertedItem.children = convertRouteToMenu(item.children, `${basePath}/${item.path}`, iconIndex);
-//         }
-
-//         return convertedItem
-//     })
-// }
-
 export const convertRouteToMenu = (data: RouteRecordRaw[], basePath: string = '/home', iconIndex: number = 0): MenuItemModel[] => {
     return data.filter((i) => i.path !== '').map((item) => {
         const convertedItem: MenuItemModel = {
diff --git a/src/stores/storage.ts b/src/utils/storage.ts
similarity index 100%
rename from src/stores/storage.ts
rename to src/utils/storage.ts

From ecce46ea3e227d2171f7596c2c5369213043fc2d Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 24 Oct 2023 15:25:45 +0700
Subject: [PATCH 03/20] update

---
 src/components/CommandPalettes.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index de1335a..b8a3fae 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -113,8 +113,6 @@ const onQueryChange = (value: string) => {
             return
         }
         query.value = value
-        const data = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().includes(value))
-        console.log(data)
     }, 300);
 }
 

From 0feda7a39b2123c0d67de3d5cbeee277f0fc555c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 24 Oct 2023 16:49:15 +0700
Subject: [PATCH 04/20] fix sidebar not expand when load

---
 src/components/Navigation/Aside/Aside.vue     |  23 +-
 .../Navigation/Aside/AsideMenuMultiple.vue    |   2 +-
 .../Pages/Gangguan/Daftar/Data_1.vue          | 203 ++++++++++++++++++
 src/components/Pages/Gangguan/Daftar/index.ts |   1 +
 src/router/index.ts                           |   3 +-
 src/stores/menu.ts                            |  27 ++-
 6 files changed, 244 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Pages/Gangguan/Daftar/Data_1.vue
 create mode 100644 src/components/Pages/Gangguan/Daftar/index.ts

diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index 9b60d6d..c2dff9d 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -24,18 +24,19 @@ watch(route, (to, _) => {
     closeSideBar()
 })
 
-onMounted(() => {
-    menu.menuSelected = router.currentRoute.value.fullPath
-    if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
-        const result = splitRoutePath(menu.menuSelected)
+// onMounted(() => {
+//     menu.menuSelected = router.currentRoute.value.fullPath
 
-        for (const route of result) {
-            if (route !== '/home') {
-                menu.toggleSidebarMenu(route, true)
-            }
-        }
-    }
-})
+//     if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
+//         const result = splitRoutePath(menu.menuSelected)
+
+//         for (const route of result) {
+//             if (route !== '/home') {
+//                 menu.toggleSidebarMenu(route, true)
+//             }
+//         }
+//     }
+// })
 
 const isMenu = (name: string) => {
     return menu.menuSelected === name
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index b2ad9fa..f46a8b8 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -33,7 +33,7 @@ const isMenuSelected = computed(() => {
 
 <template>
     <div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
-        <Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
+        <Disclosure :defaultOpen="item.expanded" as="dev">
             <!-- Nested item with children -->
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
                 :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
diff --git a/src/components/Pages/Gangguan/Daftar/Data_1.vue b/src/components/Pages/Gangguan/Daftar/Data_1.vue
new file mode 100644
index 0000000..905c25a
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/Data_1.vue
@@ -0,0 +1,203 @@
+<template>
+    <div>
+        <DxDataGrid :data-source="employees" key-expr="ID" :show-column-lines="showColumnLines"
+            :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged">
+            <DxSelection mode="single" />
+            <DxColumn :width="80" data-field="Prefix" caption="Title" />
+            <DxColumn data-field="FirstName" />
+            <DxColumn data-field="LastName" />
+            <DxColumn data-field="City" />
+            <DxColumn data-field="State" />
+            <DxColumn :width="130" data-field="Position" />
+            <DxColumn :width="100" data-field="BirthDate" data-type="date" />
+            <DxColumn :width="100" data-field="HireDate" data-type="date" />
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxCheckBox, DxDataGrid } from 'devextreme-vue';
+import { DxColumn, DxSelection } from 'devextreme-vue/data-grid';
+import { ref } from 'vue';
+
+const showColumnLines = ref(false);
+const showRowLines = ref(false);
+const showBorders = ref(false);
+const rowAlternationEnabled = ref(true);
+interface Employee {
+    ID: number;
+    FirstName: string;
+    LastName: string;
+    Prefix: string;
+    Position: string;
+    Picture: string;
+    BirthDate: string;
+    HireDate: string;
+    Notes: string;
+    Address: string;
+    State: string;
+    City: string;
+}
+
+const employees: Employee[] = [{
+    ID: 1,
+    FirstName: 'John',
+    LastName: 'Heart',
+    Prefix: 'Mr.',
+    Position: 'CEO',
+    Picture: 'images/employees/01.png',
+    BirthDate: '1964/03/16',
+    HireDate: '1995/01/15',
+    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
+    Address: '351 S Hill St.',
+    State: 'California',
+    City: 'Los Angeles',
+}, {
+    ID: 2,
+    FirstName: 'Olivia',
+    LastName: 'Peyton',
+    Prefix: 'Mrs.',
+    Position: 'Sales Assistant',
+    Picture: 'images/employees/09.png',
+    BirthDate: '1981/06/03',
+    HireDate: '2012/05/14',
+    Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
+    Address: '807 W Paseo Del Mar',
+    State: 'California',
+    City: 'Los Angeles',
+}, {
+    ID: 3,
+    FirstName: 'Robert',
+    LastName: 'Reagan',
+    Prefix: 'Mr.',
+    Position: 'CMO',
+    Picture: 'images/employees/03.png',
+    BirthDate: '1974/09/07',
+    HireDate: '2002/11/08',
+    Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
+    Address: '4 Westmoreland Pl.',
+    State: 'Arkansas',
+    City: 'Bentonville',
+}, {
+    ID: 4,
+    FirstName: 'Greta',
+    LastName: 'Sims',
+    Prefix: 'Ms.',
+    Position: 'HR Manager',
+    Picture: 'images/employees/04.png',
+    BirthDate: '1977/11/22',
+    HireDate: '1998/04/23',
+    Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
+    Address: '1700 S Grandview Dr.',
+    State: 'Georgia',
+    City: 'Atlanta',
+}, {
+    ID: 5,
+    FirstName: 'Brett',
+    LastName: 'Wade',
+    Prefix: 'Mr.',
+    Position: 'IT Manager',
+    Picture: 'images/employees/05.png',
+    BirthDate: '1968/12/01',
+    HireDate: '2009/03/06',
+    Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
+    Address: '1120 Old Mill Rd.',
+    State: 'Idaho',
+    City: 'Boise',
+}, {
+    ID: 6,
+    FirstName: 'Sandra',
+    LastName: 'Johnson',
+    Prefix: 'Mrs.',
+    Position: 'Controller',
+    Picture: 'images/employees/06.png',
+    BirthDate: '1974/11/15',
+    HireDate: '2005/05/11',
+    Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
+    Address: '4600 N Virginia Rd.',
+    State: 'Utah',
+    City: 'Beaver',
+}, {
+    ID: 7,
+    FirstName: 'Kevin',
+    LastName: 'Carter',
+    Prefix: 'Mr.',
+    Position: 'Shipping Manager',
+    Picture: 'images/employees/07.png',
+    BirthDate: '1978/01/09',
+    HireDate: '2009/08/11',
+    Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
+    Address: '424 N Main St.',
+    State: 'California',
+    City: 'San Diego',
+}, {
+    ID: 8,
+    FirstName: 'Cynthia',
+    LastName: 'Stanwick',
+    Prefix: 'Ms.',
+    Position: 'HR Assistant',
+    Picture: 'images/employees/08.png',
+    BirthDate: '1985/06/05',
+    HireDate: '2008/03/24',
+    Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
+    Address: '2211 Bonita Dr.',
+    State: 'Arkansas',
+    City: 'Little Rock',
+}, {
+    ID: 9,
+    FirstName: 'Kent',
+    LastName: 'Samuelson',
+    Prefix: 'Dr.',
+    Position: 'Ombudsman',
+    Picture: 'images/employees/02.png',
+    BirthDate: '1972/09/11',
+    HireDate: '2009/04/22',
+    Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.',
+    Address: '12100 Mora Dr',
+    State: 'Missouri',
+    City: 'St. Louis',
+}, {
+    ID: 10,
+    FirstName: 'Taylor',
+    LastName: 'Riley',
+    Prefix: 'Mr.',
+    Position: 'Network Admin',
+    Picture: '',
+    BirthDate: '1982/08/14',
+    HireDate: '2012/04/14',
+    Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
+    Address: '7776 Torreyson Dr',
+    State: 'California',
+    City: 'San Jose',
+}];
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0];
+    console.log(data);
+};
+
+</script>
+<style scoped>
+.options {
+    padding: 20px;
+    background-color: rgba(191, 191, 191, 0.15);
+    margin-top: 20px;
+}
+
+.caption {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.option {
+    width: 24%;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.options-container {
+    display: flex;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/index.ts b/src/components/Pages/Gangguan/Daftar/index.ts
new file mode 100644
index 0000000..c01eea3
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/index.ts
@@ -0,0 +1 @@
+export { default as Data1 } from './Data_1.vue'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 495b57f..71a54bd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,7 @@ import NotFoundView from '@/views/NotFoundView.vue'
 import EmptyPage from '@/components/Pages/HomeEmpty.vue'
 import TestPage from '@/components/Pages/TestPage.vue'
 import qs from 'qs'
+import { Data1 } from '@/components/Pages/Gangguan/Daftar'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -30,7 +31,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
-                component: TestPage,
+                component: Data1,
               },
               {
                 path: '2',
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 1cff66a..75a4617 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -1,18 +1,22 @@
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { convertRouteToMenu } from '@/utils/route'
 import { routes } from '@/router'
 import type { MenuItemModel } from '@/utils/interfaces'
+import { splitRoutePath } from '@/utils/texts'
 
 export const useMenuStore = defineStore('menu', () => {
     const route = useRoute()
     const navigation = ref<MenuItemModel[]>([])
     const sidebarOpen = ref(false)
     const sidebarShowed = ref(true)
+    const router = useRouter()
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
     const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
+        console.log('expanded', path);
+
         const toggleItemExpanded = (items: MenuItemModel[]): void => {
             for (const item of items) {
                 if (item.path === path) {
@@ -37,6 +41,25 @@ export const useMenuStore = defineStore('menu', () => {
     onMounted(() => {
         const menuData = convertRouteToMenu(routes.at(0)?.children || [])
         navigation.value = menuData
+        menuSelected.value = router.currentRoute.value.fullPath
+
+        if (menuSelected.value !== '/' && menuSelected.value !== '/home' && menuSelected.value.includes('/home')) {
+            const result = splitRoutePath(menuSelected.value)
+
+            for (const route of result) {
+                if (route !== '/home') {
+                    toggleSidebarMenu(route, true)
+                }
+            }
+        }
+    })
+
+    watch(router, () => {
+        if (router.currentRoute.value.fullPath === '/' || router.currentRoute.value.fullPath === '/home') {
+            for (const item of navigation.value) {
+                item.expanded = false
+            }
+        }
     })
 
     return {

From 700bf849221a5388994de9fc35c59d7b9b39664b Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 25 Oct 2023 08:28:00 +0700
Subject: [PATCH 05/20] fix conflix tailwind.css

---
 src/assets/css/style.css                        | 2 --
 src/assets/css/tailwind.css                     | 2 +-
 src/components/Pages/Gangguan/Daftar/Data_1.vue | 1 +
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 23af27c..fb72f88 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -809,13 +809,11 @@ select {
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 600;
-  color: rgb(46 53 54 / var(--tw-text-opacity));
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
 .group:hover .aside-single-item-inactive {
-  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index c41025a..64e37b3 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -24,7 +24,7 @@
         @apply aside-single-item bg-primary-500 text-white font-bold;
     }
     .aside-single-item-inactive {
-        @apply aside-single-item font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500;
+        @apply aside-single-item font-semibold text-gray-600 group-hover:text-white group-hover:bg-primary-500;
     }
     .aside-single-item-icon{
         @apply h-6 w-6;
diff --git a/src/components/Pages/Gangguan/Daftar/Data_1.vue b/src/components/Pages/Gangguan/Daftar/Data_1.vue
index 905c25a..234d1ad 100644
--- a/src/components/Pages/Gangguan/Daftar/Data_1.vue
+++ b/src/components/Pages/Gangguan/Daftar/Data_1.vue
@@ -4,6 +4,7 @@
             :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
             :hover-state-enabled="true" @selection-changed="onSelectionChanged">
             <DxSelection mode="single" />
+            <DxColumn data-field="OrderNumber" data-type="number" />
             <DxColumn :width="80" data-field="Prefix" caption="Title" />
             <DxColumn data-field="FirstName" />
             <DxColumn data-field="LastName" />

From fcd3d2f91a3aff83e8432d4f1ce3d7c99c11ed37 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 08:33:38 +0700
Subject: [PATCH 06/20] update

---
 index.html                                    |   20 +-
 package-lock.json                             | 1605 ++++++++++++++++-
 package.json                                  |    4 +
 src/App.vue                                   |    5 +
 src/assets/css/style.css                      |  105 +-
 .../Navigation/Aside/AsideMenuMultiple.vue    |    2 +-
 .../Navigation/Aside/AsideMenuSingle.vue      |    2 +-
 .../Pages/Gangguan/Daftar/Daftar_1.vue        |  118 ++
 .../Pages/Gangguan/Daftar/Daftar_2.vue        |  108 ++
 .../Pages/Gangguan/Daftar/Daftar_3.vue        |  106 ++
 .../Pages/Gangguan/Daftar/Data_1.vue          |  204 ---
 src/components/Pages/Gangguan/Daftar/index.ts |    4 +-
 .../Pages/Gangguan/Rekapitulasi/Rekap_1.vue   |  114 ++
 .../Pages/Gangguan/Rekapitulasi/index.ts      |    1 +
 src/components/Pages/HomeEmpty.vue            |   93 +
 src/components/Pages/MenuProvider.vue         |    7 +-
 src/router/index.ts                           |   25 +-
 src/stores/menu.ts                            |    4 +-
 src/types/gangguan.ts                         |   78 +
 src/{utils/interfaces.ts => types/menu.ts}    |    4 +-
 src/utils/route.ts                            |    2 +-
 21 files changed, 2334 insertions(+), 277 deletions(-)
 create mode 100644 src/components/Pages/Gangguan/Daftar/Daftar_1.vue
 create mode 100644 src/components/Pages/Gangguan/Daftar/Daftar_2.vue
 create mode 100644 src/components/Pages/Gangguan/Daftar/Daftar_3.vue
 delete mode 100644 src/components/Pages/Gangguan/Daftar/Data_1.vue
 create mode 100644 src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
 create mode 100644 src/components/Pages/Gangguan/Rekapitulasi/index.ts
 create mode 100644 src/types/gangguan.ts
 rename src/{utils/interfaces.ts => types/menu.ts} (79%)

diff --git a/index.html b/index.html
index 352e599..6c78738 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en" class="h-full bg-layout">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/assets/images/pln.ico">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Executive Information System</title>
-</head>
-<body class="h-full ">
-  <div id="app" class="h-full"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/assets/images/pln.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Executive Information System</title>
+  </head>
+  <body class="h-full ">
+    <div id="app" class="h-full"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 44ba8b7..33c2a51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,9 @@
         "devextreme-vue": "23.1.5",
         "dotenv": "^16.3.1",
         "encrypt-storage": "^2.12.16",
+        "exceljs": "^4.4.0",
+        "file-saver": "^2.0.5",
+        "jspdf": "^2.5.1",
         "pinia": "^2.1.3",
         "qs": "^6.11.2",
         "uuid": "^9.0.0",
@@ -32,6 +35,7 @@
         "@tailwindcss/forms": "^0.5.6",
         "@tailwindcss/typography": "^0.5.10",
         "@tsconfig/node18": "^2.0.1",
+        "@types/file-saver": "^2.0.6",
         "@types/jsdom": "^21.1.1",
         "@types/node": "^18.16.17",
         "@vitejs/plugin-vue": "^4.2.3",
@@ -969,6 +973,43 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fast-csv/format": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz",
+      "integrity": "sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0"
+      }
+    },
+    "node_modules/@fast-csv/format/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
+    },
+    "node_modules/@fast-csv/parse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz",
+      "integrity": "sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==",
+      "dependencies": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.groupby": "^4.6.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/@fast-csv/parse/node_modules/@types/node": {
+      "version": "14.18.63",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+      "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
+    },
     "node_modules/@headlessui/tailwindcss": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
@@ -1283,6 +1324,12 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.6.tgz",
+      "integrity": "sha512-Mw671DVqoMHbjw0w4v2iiOro01dlT/WhWp5uwecBa0Wg8c+bcZOjgF1ndBnlaxhtvFCgTRBtsGivSVhrK/vnag==",
+      "dev": true
+    },
     "node_modules/@types/jsdom": {
       "version": "21.1.3",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.3.tgz",
@@ -1315,6 +1362,12 @@
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
       "integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.2.tgz",
+      "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
+      "optional": true
+    },
     "node_modules/@types/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
@@ -2225,6 +2278,75 @@
         "node": ">= 8"
       }
     },
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/archiver/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -2304,12 +2426,28 @@
         "node": "*"
       }
     },
+    "node_modules/async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -2364,15 +2502,54 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
       "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
-      "dev": true,
       "engines": {
         "node": ">=0.6"
       }
     },
+    "node_modules/binary": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+      "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
+      "dependencies": {
+        "buffers": "~0.1.1",
+        "chainsaw": "~0.1.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2381,6 +2558,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+      "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA=="
+    },
     "node_modules/bn.js": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@@ -2552,11 +2757,69 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/buffer-indexof-polyfill": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
+      "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
     },
+    "node_modules/buffers": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+      "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==",
+      "engines": {
+        "node": ">=0.2.0"
+      }
+    },
     "node_modules/bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -2642,6 +2905,31 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
     "node_modules/chai": {
       "version": "4.3.10",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
@@ -2660,6 +2948,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chainsaw": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+      "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+      "dependencies": {
+        "traverse": ">=0.3.0 <0.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2781,6 +3080,33 @@
         "node": ">=14"
       }
     },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/compress-commons/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2817,6 +3143,42 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/crc32-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -2901,6 +3263,15 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
       "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2946,8 +3317,7 @@
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "peer": true
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
@@ -3267,6 +3637,12 @@
       "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
       "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
     },
+    "node_modules/dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "node_modules/dotenv": {
       "version": "16.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
@@ -3278,6 +3654,14 @@
         "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
+    "node_modules/duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "dependencies": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "node_modules/editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -3396,6 +3780,14 @@
         "url": "https://github.com/sponsors/michelonsouza"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -3924,6 +4316,57 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "node_modules/exceljs": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
+      "integrity": "sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==",
+      "dependencies": {
+        "archiver": "^5.0.0",
+        "dayjs": "^1.8.34",
+        "fast-csv": "^4.3.1",
+        "jszip": "^3.10.1",
+        "readable-stream": "^3.6.0",
+        "saxes": "^5.0.1",
+        "tmp": "^0.2.0",
+        "unzipper": "^0.10.11",
+        "uuid": "^8.3.0"
+      },
+      "engines": {
+        "node": ">=8.3.0"
+      }
+    },
+    "node_modules/exceljs/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/exceljs/node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/exceljs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/execa": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
@@ -3947,6 +4390,18 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/fast-csv": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
+      "integrity": "sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==",
+      "dependencies": {
+        "@fast-csv/format": "4.3.5",
+        "@fast-csv/parse": "4.3.6"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4004,6 +4459,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -4016,6 +4476,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -4099,6 +4564,11 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4117,6 +4587,50 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/fstream/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fstream/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -4327,8 +4841,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -4514,6 +5027,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -4562,6 +5088,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -5156,6 +5701,23 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "node_modules/jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "dependencies": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.4.8"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -5181,6 +5743,17 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5215,6 +5788,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/listenercount": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
+      "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ=="
+    },
     "node_modules/lit": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
@@ -5302,22 +5880,76 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
     },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
+    },
+    "node_modules/lodash.escaperegexp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
+      "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw=="
+    },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
+    },
+    "node_modules/lodash.groupby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
+      "integrity": "sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw=="
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
+    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
     },
+    "node_modules/lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw=="
+    },
+    "node_modules/lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng=="
+    },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "node_modules/lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw=="
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+    },
     "node_modules/lottie-web": {
       "version": "5.12.2",
       "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
@@ -5482,6 +6114,25 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/mlly": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
@@ -6017,6 +6668,12 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -6418,6 +7075,15 @@
         "node": ">= 12.0.0"
       }
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -6497,6 +7163,33 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-glob/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -6583,11 +7276,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -6602,7 +7303,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -6997,6 +7697,15 @@
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/std-env": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.4.3.tgz",
@@ -7213,6 +7922,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -7295,6 +8013,43 @@
         "node": ">=4"
       }
     },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tar-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -7356,6 +8111,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "dependencies": {
+        "rimraf": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8.17.0"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -7403,6 +8169,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -7629,6 +8403,23 @@
         "node": ">=8"
       }
     },
+    "node_modules/unzipper": {
+      "version": "0.10.14",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
+      "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
+      "dependencies": {
+        "big-integer": "^1.6.17",
+        "binary": "~0.3.0",
+        "bluebird": "~3.4.1",
+        "buffer-indexof-polyfill": "~1.0.0",
+        "duplexer2": "~0.1.4",
+        "fstream": "^1.0.12",
+        "graceful-fs": "^4.2.2",
+        "listenercount": "~1.0.1",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "~1.0.4"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -7683,6 +8474,15 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -8241,8 +9041,7 @@
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
     "node_modules/y18n": {
       "version": "5.0.8",
@@ -8310,6 +9109,71 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/zip-stream/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     }
   },
   "dependencies": {
@@ -8874,6 +9738,47 @@
       "integrity": "sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==",
       "dev": true
     },
+    "@fast-csv/format": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/@fast-csv/format/-/format-4.3.5.tgz",
+      "integrity": "sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==",
+      "requires": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.18.63",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+          "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
+        }
+      }
+    },
+    "@fast-csv/parse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/@fast-csv/parse/-/parse-4.3.6.tgz",
+      "integrity": "sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==",
+      "requires": {
+        "@types/node": "^14.0.1",
+        "lodash.escaperegexp": "^4.1.2",
+        "lodash.groupby": "^4.6.0",
+        "lodash.isfunction": "^3.0.9",
+        "lodash.isnil": "^4.0.0",
+        "lodash.isundefined": "^3.0.1",
+        "lodash.uniq": "^4.5.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.18.63",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
+          "integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
+        }
+      }
+    },
     "@headlessui/tailwindcss": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.0.tgz",
@@ -9128,6 +10033,12 @@
         "@types/chai": "*"
       }
     },
+    "@types/file-saver": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.6.tgz",
+      "integrity": "sha512-Mw671DVqoMHbjw0w4v2iiOro01dlT/WhWp5uwecBa0Wg8c+bcZOjgF1ndBnlaxhtvFCgTRBtsGivSVhrK/vnag==",
+      "dev": true
+    },
     "@types/jsdom": {
       "version": "21.1.3",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.3.tgz",
@@ -9160,6 +10071,12 @@
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
       "integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
     },
+    "@types/raf": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.2.tgz",
+      "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
+      "optional": true
+    },
     "@types/semver": {
       "version": "7.5.3",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
@@ -9808,6 +10725,64 @@
         "picomatch": "^2.0.4"
       }
     },
+    "archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "requires": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "requires": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -9874,12 +10849,22 @@
       "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
       "dev": true
     },
+    "async": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
+      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -9905,17 +10890,63 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
     "big-integer": {
       "version": "1.6.51",
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
-      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
-      "dev": true
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
+    },
+    "binary": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+      "integrity": "sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==",
+      "requires": {
+        "buffers": "~0.1.1",
+        "chainsaw": "~0.1.0"
+      }
     },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
+    "bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "requires": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "bluebird": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+      "integrity": "sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA=="
+    },
     "bn.js": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.1.tgz",
@@ -10046,11 +11077,40 @@
         "update-browserslist-db": "^1.0.13"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="
+    },
+    "buffer-indexof-polyfill": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz",
+      "integrity": "sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A=="
+    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
     },
+    "buffers": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+      "integrity": "sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ=="
+    },
     "bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -10098,6 +11158,30 @@
       "integrity": "sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==",
       "dev": true
     },
+    "canvg": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+      "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+          "optional": true
+        }
+      }
+    },
     "chai": {
       "version": "4.3.10",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
@@ -10113,6 +11197,14 @@
         "type-detect": "^4.0.8"
       }
     },
+    "chainsaw": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+      "integrity": "sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==",
+      "requires": {
+        "traverse": ">=0.3.0 <0.4"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -10207,6 +11299,29 @@
       "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
       "dev": true
     },
+    "compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "requires": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10238,6 +11353,32 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
     },
+    "crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+    },
+    "crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "requires": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -10318,6 +11459,15 @@
       "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
       "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -10351,8 +11501,7 @@
     "dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==",
-      "peer": true
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "de-indent": {
       "version": "1.0.2",
@@ -10604,11 +11753,25 @@
       "resolved": "https://registry.npmjs.org/domino/-/domino-2.1.6.tgz",
       "integrity": "sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ=="
     },
+    "dompurify": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
+      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "optional": true
+    },
     "dotenv": {
       "version": "16.3.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
       "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
     },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      }
+    },
     "editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -10706,6 +11869,14 @@
         "crypto-js": "^4.1.1"
       }
     },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
     "entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -11090,6 +12261,47 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "exceljs": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/exceljs/-/exceljs-4.4.0.tgz",
+      "integrity": "sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==",
+      "requires": {
+        "archiver": "^5.0.0",
+        "dayjs": "^1.8.34",
+        "fast-csv": "^4.3.1",
+        "jszip": "^3.10.1",
+        "readable-stream": "^3.6.0",
+        "saxes": "^5.0.1",
+        "tmp": "^0.2.0",
+        "unzipper": "^0.10.11",
+        "uuid": "^8.3.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "saxes": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+          "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+          "requires": {
+            "xmlchars": "^2.2.0"
+          }
+        },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
+      }
+    },
     "execa": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
@@ -11107,6 +12319,15 @@
         "strip-final-newline": "^3.0.0"
       }
     },
+    "fast-csv": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
+      "integrity": "sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==",
+      "requires": {
+        "@fast-csv/format": "4.3.5",
+        "@fast-csv/parse": "4.3.6"
+      }
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -11160,6 +12381,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -11169,6 +12395,11 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -11230,6 +12461,11 @@
       "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==",
       "dev": true
     },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -11241,6 +12477,40 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "optional": true
     },
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "inherits": "~2.0.0",
+        "mkdirp": ">=0.5 0",
+        "rimraf": "2"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -11390,8 +12660,7 @@
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
     "graphemer": {
       "version": "1.4.0",
@@ -11517,6 +12786,16 @@
       "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -11553,6 +12832,11 @@
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
     },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
     "ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -11973,6 +13257,21 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "jspdf": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
+      "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.2.0",
+        "fflate": "^0.4.8",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -12000,6 +13299,14 @@
         "json-buffer": "3.0.1"
       }
     },
+    "lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "requires": {
+        "readable-stream": "^2.0.5"
+      }
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -12028,6 +13335,11 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "listenercount": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/listenercount/-/listenercount-1.0.1.tgz",
+      "integrity": "sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ=="
+    },
     "lit": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
@@ -12100,22 +13412,76 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
     },
+    "lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ=="
+    },
+    "lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA=="
+    },
+    "lodash.escaperegexp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
+      "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw=="
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
+    },
+    "lodash.groupby": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.groupby/-/lodash.groupby-4.6.0.tgz",
+      "integrity": "sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw=="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
     },
+    "lodash.isfunction": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
+      "integrity": "sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw=="
+    },
+    "lodash.isnil": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/lodash.isnil/-/lodash.isnil-4.0.0.tgz",
+      "integrity": "sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng=="
+    },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
+    },
+    "lodash.isundefined": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isundefined/-/lodash.isundefined-3.0.1.tgz",
+      "integrity": "sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA=="
     },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw=="
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+    },
     "lottie-web": {
       "version": "5.12.2",
       "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz",
@@ -12249,6 +13615,19 @@
         "brace-expansion": "^1.1.7"
       }
     },
+    "minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+    },
+    "mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "requires": {
+        "minimist": "^1.2.6"
+      }
+    },
     "mlly": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
@@ -12647,6 +14026,12 @@
         "sha.js": "^2.4.8"
       }
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -12885,6 +14270,15 @@
         "lodash.isequal": "^4.5.0"
       }
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12959,6 +14353,32 @@
         "util-deprecate": "~1.0.1"
       }
     },
+    "readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "requires": {
+        "minimatch": "^5.1.0"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -13020,11 +14440,16 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
       "requires": {
         "glob": "^7.1.3"
       },
@@ -13033,7 +14458,6 @@
           "version": "7.2.3",
           "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
           "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-          "dev": true,
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
@@ -13334,6 +14758,12 @@
       "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
       "dev": true
     },
+    "stackblur-canvas": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
+      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "optional": true
+    },
     "std-env": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.4.3.tgz",
@@ -13485,6 +14915,12 @@
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -13555,6 +14991,39 @@
         }
       }
     },
+    "tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "requires": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -13601,6 +15070,14 @@
       "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
       "dev": true
     },
+    "tmp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+      "requires": {
+        "rimraf": "^3.0.0"
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -13636,6 +15113,11 @@
         "punycode": "^2.3.0"
       }
     },
+    "traverse": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ=="
+    },
     "ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -13791,6 +15273,23 @@
       "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
       "dev": true
     },
+    "unzipper": {
+      "version": "0.10.14",
+      "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
+      "integrity": "sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==",
+      "requires": {
+        "big-integer": "^1.6.17",
+        "binary": "~0.3.0",
+        "bluebird": "~3.4.1",
+        "buffer-indexof-polyfill": "~1.0.0",
+        "duplexer2": "~0.1.4",
+        "fstream": "^1.0.12",
+        "graceful-fs": "^4.2.2",
+        "listenercount": "~1.0.1",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "~1.0.4"
+      }
+    },
     "update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -13825,6 +15324,15 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -14171,8 +15679,7 @@
     "xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="
     },
     "y18n": {
       "version": "5.0.8",
@@ -14219,6 +15726,58 @@
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "requires": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "archiver-utils": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+          "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+          "requires": {
+            "glob": "^7.2.3",
+            "graceful-fs": "^4.2.0",
+            "lazystream": "^1.0.0",
+            "lodash.defaults": "^4.2.0",
+            "lodash.difference": "^4.5.0",
+            "lodash.flatten": "^4.4.0",
+            "lodash.isplainobject": "^4.0.6",
+            "lodash.union": "^4.6.0",
+            "normalize-path": "^3.0.0",
+            "readable-stream": "^3.6.0"
+          }
+        },
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 0d11ff4..6076041 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "devextreme-vue": "23.1.5",
     "dotenv": "^16.3.1",
     "encrypt-storage": "^2.12.16",
+    "exceljs": "^4.4.0",
+    "file-saver": "^2.0.5",
+    "jspdf": "^2.5.1",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
     "uuid": "^9.0.0",
@@ -38,6 +41,7 @@
     "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/node18": "^2.0.1",
+    "@types/file-saver": "^2.0.6",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.16.17",
     "@vitejs/plugin-vue": "^4.2.3",
diff --git a/src/App.vue b/src/App.vue
index e7bf172..c146d58 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,12 @@ import { NotificationProvider } from '@/components/Notification'
 import { useDialogStore } from '@/stores/dialog'
 import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
 import CommandPalettes from '@/components/CommandPalettes.vue'
+import { onMounted } from 'vue'
 const dialog = useDialogStore()
+
+onMounted(() => {
+  // remove all local storage
+})
 </script>
 
 <template>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index fb72f88..e7493c8 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -989,11 +989,6 @@ select {
   margin-bottom: 0.25rem;
 }
 
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -1207,6 +1202,10 @@ select {
   max-height: 0px;
 }
 
+.max-h-60 {
+  max-height: 15rem;
+}
+
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1215,6 +1214,10 @@ select {
   max-height: 1000px;
 }
 
+.max-h-\[calc\(100vh-140px\)\] {
+  max-height: calc(100vh - 140px);
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -1538,6 +1541,10 @@ select {
   --tw-divide-opacity: 0.1;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1637,6 +1644,10 @@ select {
   border-style: solid;
 }
 
+.border-none {
+  border-style: none;
+}
+
 .border-black\/\[\.1\] {
   border-color: rgb(0 0 0 / .1);
 }
@@ -1735,6 +1746,11 @@ select {
   background-color: rgb(204 235 239 / var(--tw-bg-opacity));
 }
 
+.bg-teal-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -1951,6 +1967,10 @@ select {
   padding-left: 0.25rem;
 }
 
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
 .pl-11 {
   padding-left: 2.75rem;
 }
@@ -1959,6 +1979,10 @@ select {
   padding-left: 0.75rem;
 }
 
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2232,6 +2256,11 @@ select {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
+.text-teal-600 {
+  --tw-text-opacity: 1;
+  color: rgb(13 148 136 / var(--tw-text-opacity));
+}
+
 .text-vtd-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2304,6 +2333,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2650,6 +2685,29 @@ select {
   outline-color: #4f46e5;
 }
 
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-white:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:ring-opacity-75:focus-visible {
+  --tw-ring-opacity: 0.75;
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus-visible\:ring-offset-teal-300:focus-visible {
+  --tw-ring-offset-color: #5eead4;
+}
+
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -2754,11 +2812,6 @@ select {
     margin-right: 0.25rem;
   }
 
-  .sm\:my-4 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-
   .sm\:my-8 {
     margin-top: 2rem;
     margin-bottom: 2rem;
@@ -2808,6 +2861,10 @@ select {
     margin-top: 0.625rem;
   }
 
+  .sm\:mt-4 {
+    margin-top: 1rem;
+  }
+
   .sm\:mt-5 {
     margin-top: 1.25rem;
   }
@@ -2965,6 +3022,11 @@ select {
     padding-right: 0.5rem;
   }
 
+  .sm\:px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
   .sm\:px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2988,6 +3050,10 @@ select {
     padding-right: 1.5rem;
   }
 
+  .sm\:pt-4 {
+    padding-top: 1rem;
+  }
+
   .sm\:text-left {
     text-align: left;
   }
@@ -3035,8 +3101,8 @@ select {
     margin-left: 20rem;
   }
 
-  .md\:mr-4 {
-    margin-right: 1rem;
+  .md\:mr-3 {
+    margin-right: 0.75rem;
   }
 
   .md\:mr-6 {
@@ -3092,14 +3158,9 @@ select {
     padding: 5rem;
   }
 
-  .md\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .md\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
   .md\:pl-4 {
@@ -3110,6 +3171,10 @@ select {
     padding-left: 20rem;
   }
 
+  .md\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
   .md\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index f46a8b8..6b4da2a 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -71,4 +71,4 @@ const isMenuSelected = computed(() => {
 
         </Disclosure>
     </div>
-</template>
\ No newline at end of file
+</template>@/utils/menu
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index f7b5d44..4879614 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -41,4 +41,4 @@ defineProps({
             {{ item.name }}
         </RouterLink>
     </div>
-</template>
\ No newline at end of file
+</template>@/utils/menu
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_1.vue b/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
new file mode 100644
index 0000000..9ac84cd
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
@@ -0,0 +1,118 @@
+<template>
+    <div>
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            <DxSelection mode="single" />
+            <DxPaging :enabled="false" />
+            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxLoadPanel :enabled="true" />
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+
+            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
+            <DxColumn :width="170" alignment="center" data-field="posko_awal" caption="Posko Awal" />
+            <DxColumn :width="170" alignment="center" data-field="posko_tujuan" caption="Posko Tujuan" />
+            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { onMounted, ref } from 'vue'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import type { Data1 } from '@/types/gangguan'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+import { readDataJson, writeDataJson } from '@/utils/storage'
+
+const data = ref<Data1[]>([])
+
+const onExporting = (e: any) => {
+    if (e.format === 'pdf') {
+        const doc = new jsPDF()
+
+        exportToPdf({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+        }).then(() => {
+            doc.save(`.pdf`)
+        })
+    } else {
+        const workbook = new Workbook()
+        const worksheet = workbook.addWorksheet('Employees')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const createDummy = () => {
+    for (let i = 0; i < 100; i++) {
+        data.value.push({
+            number: i + 1,
+            no_laporan: 'G5223091' + (900002 + i),
+            pembuat_laporan: 'agentjateng',
+            tanggal_laporan: '19/09/2023 12:26:42',
+            tanggal_dialihkan: '19/09/2023 12:33:46',
+            tanggal_respon: '19/09/2023 13:14:15',
+            tanggal_recovery: '19/09/2023 13:14:15',
+            durasi_respon: '0-0:47:32',
+            durasi_recovery: '0-0:49:35',
+            posko_awal: 'POSKO ULP UNGARAN.',
+            posko_tujuan: 'POSKO ULP UNGARAN.',
+            status: 'Selesai',
+            id_pelanggan: '-',
+            nama_pelapor: 'Moegy',
+            alamat_pelapor: '-',
+            no_telp_pelapor: '085136661313',
+            keterangan_pelapor: '-',
+            sumber_laporan: 'Contact Center',
+            posko: 'POSKO ULP UNGGARAN'
+        });
+    }
+    writeDataJson('data-daftar-1', data.value)
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+};
+
+onMounted(() => {
+    createDummy()
+    console.log(readDataJson('data-daftar-1'));
+
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
new file mode 100644
index 0000000..28321bf
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            <DxSelection mode="single" />
+            <DxPaging :enabled="false" />
+            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxLoadPanel :enabled="true" />
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+
+            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
+            <DxColumn alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { onMounted, ref } from 'vue'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import type { Data2 } from '@/types/gangguan'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+
+const data = ref<Data2[]>([])
+
+const onExporting = (e: any) => {
+    if (e.format === 'pdf') {
+        const doc = new jsPDF()
+
+        exportToPdf({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+        }).then(() => {
+            doc.save(`.pdf`)
+        })
+    } else {
+        const workbook = new Workbook()
+        const worksheet = workbook.addWorksheet('Employees')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const createDummy = () => {
+    for (let i = 0; i < 10; i++) {
+        data.value.push({
+            number: i + 1,
+            no_laporan: 'G5223091' + (900002 + i),
+            tanggal_laporan: '19/09/2023 12:26:42',
+            tanggal_respon: '19/09/2023 13:14:15',
+            tanggal_recovery: '19/09/2023 13:14:15',
+            durasi_respon: '0-0:47:32',
+            durasi_recovery: '0-0:49:35',
+            jumlah_lapor: 1,
+            status: 'Selesai',
+            id_pelanggan: '523013252126 / 1731807',
+            nama_pelapor: 'IBU FELISIA',
+            alamat_pelapor: 'JL KWS INDUSTRI CIPT GINA KAV 5 BLOK B1',
+            no_telp_pelapor: '082229870235',
+            keterangan_pelapor: '-',
+            sumber_laporan: 'Contact Center',
+            posko: 'POSKO ULP SEMARANG'
+        });
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+};
+
+onMounted(() => {
+    createDummy()
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
new file mode 100644
index 0000000..d82e1d7
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            <DxSelection mode="single" />
+            <DxPaging :enabled="false" />
+            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxLoadPanel :enabled="true" />
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+
+            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
+            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking" />
+            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { onMounted, ref } from 'vue'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import type { Data3 } from '@/types/gangguan'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+
+const data = ref<Data3[]>([])
+
+const onExporting = (e: any) => {
+    if (e.format === 'pdf') {
+        const doc = new jsPDF()
+
+        exportToPdf({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+        }).then(() => {
+            doc.save(`.pdf`)
+        })
+    } else {
+        const workbook = new Workbook()
+        const worksheet = workbook.addWorksheet('Employees')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const createDummy = () => {
+    for (let i = 0; i < 10; i++) {
+        data.value.push({
+            number: i + 1,
+            no_laporan: 'G5223091' + (900002 + i),
+            tanggal_laporan: '19/09/2023 12:26:42',
+            tanggal_respon: '19/09/2023 13:14:15',
+            tanggal_recovery: '19/09/2023 13:14:15',
+            durasi_respon: '0-0:47:32',
+            durasi_recovery: '0-0:49:35',
+            referensi_marking: '-',
+            status: 'Selesai',
+            id_pelanggan: '-',
+            nama_pelapor: 'Moegy',
+            alamat_pelapor: '-',
+            no_telp_pelapor: '085136661313',
+            keterangan_pelapor: '-',
+            posko: 'POSKO ULP UNGGARAN'
+        });
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+};
+
+onMounted(() => {
+    createDummy()
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/Data_1.vue b/src/components/Pages/Gangguan/Daftar/Data_1.vue
deleted file mode 100644
index 234d1ad..0000000
--- a/src/components/Pages/Gangguan/Daftar/Data_1.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-    <div>
-        <DxDataGrid :data-source="employees" key-expr="ID" :show-column-lines="showColumnLines"
-            :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
-            :hover-state-enabled="true" @selection-changed="onSelectionChanged">
-            <DxSelection mode="single" />
-            <DxColumn data-field="OrderNumber" data-type="number" />
-            <DxColumn :width="80" data-field="Prefix" caption="Title" />
-            <DxColumn data-field="FirstName" />
-            <DxColumn data-field="LastName" />
-            <DxColumn data-field="City" />
-            <DxColumn data-field="State" />
-            <DxColumn :width="130" data-field="Position" />
-            <DxColumn :width="100" data-field="BirthDate" data-type="date" />
-            <DxColumn :width="100" data-field="HireDate" data-type="date" />
-        </DxDataGrid>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { DxCheckBox, DxDataGrid } from 'devextreme-vue';
-import { DxColumn, DxSelection } from 'devextreme-vue/data-grid';
-import { ref } from 'vue';
-
-const showColumnLines = ref(false);
-const showRowLines = ref(false);
-const showBorders = ref(false);
-const rowAlternationEnabled = ref(true);
-interface Employee {
-    ID: number;
-    FirstName: string;
-    LastName: string;
-    Prefix: string;
-    Position: string;
-    Picture: string;
-    BirthDate: string;
-    HireDate: string;
-    Notes: string;
-    Address: string;
-    State: string;
-    City: string;
-}
-
-const employees: Employee[] = [{
-    ID: 1,
-    FirstName: 'John',
-    LastName: 'Heart',
-    Prefix: 'Mr.',
-    Position: 'CEO',
-    Picture: 'images/employees/01.png',
-    BirthDate: '1964/03/16',
-    HireDate: '1995/01/15',
-    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
-    Address: '351 S Hill St.',
-    State: 'California',
-    City: 'Los Angeles',
-}, {
-    ID: 2,
-    FirstName: 'Olivia',
-    LastName: 'Peyton',
-    Prefix: 'Mrs.',
-    Position: 'Sales Assistant',
-    Picture: 'images/employees/09.png',
-    BirthDate: '1981/06/03',
-    HireDate: '2012/05/14',
-    Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
-    Address: '807 W Paseo Del Mar',
-    State: 'California',
-    City: 'Los Angeles',
-}, {
-    ID: 3,
-    FirstName: 'Robert',
-    LastName: 'Reagan',
-    Prefix: 'Mr.',
-    Position: 'CMO',
-    Picture: 'images/employees/03.png',
-    BirthDate: '1974/09/07',
-    HireDate: '2002/11/08',
-    Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
-    Address: '4 Westmoreland Pl.',
-    State: 'Arkansas',
-    City: 'Bentonville',
-}, {
-    ID: 4,
-    FirstName: 'Greta',
-    LastName: 'Sims',
-    Prefix: 'Ms.',
-    Position: 'HR Manager',
-    Picture: 'images/employees/04.png',
-    BirthDate: '1977/11/22',
-    HireDate: '1998/04/23',
-    Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
-    Address: '1700 S Grandview Dr.',
-    State: 'Georgia',
-    City: 'Atlanta',
-}, {
-    ID: 5,
-    FirstName: 'Brett',
-    LastName: 'Wade',
-    Prefix: 'Mr.',
-    Position: 'IT Manager',
-    Picture: 'images/employees/05.png',
-    BirthDate: '1968/12/01',
-    HireDate: '2009/03/06',
-    Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
-    Address: '1120 Old Mill Rd.',
-    State: 'Idaho',
-    City: 'Boise',
-}, {
-    ID: 6,
-    FirstName: 'Sandra',
-    LastName: 'Johnson',
-    Prefix: 'Mrs.',
-    Position: 'Controller',
-    Picture: 'images/employees/06.png',
-    BirthDate: '1974/11/15',
-    HireDate: '2005/05/11',
-    Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
-    Address: '4600 N Virginia Rd.',
-    State: 'Utah',
-    City: 'Beaver',
-}, {
-    ID: 7,
-    FirstName: 'Kevin',
-    LastName: 'Carter',
-    Prefix: 'Mr.',
-    Position: 'Shipping Manager',
-    Picture: 'images/employees/07.png',
-    BirthDate: '1978/01/09',
-    HireDate: '2009/08/11',
-    Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
-    Address: '424 N Main St.',
-    State: 'California',
-    City: 'San Diego',
-}, {
-    ID: 8,
-    FirstName: 'Cynthia',
-    LastName: 'Stanwick',
-    Prefix: 'Ms.',
-    Position: 'HR Assistant',
-    Picture: 'images/employees/08.png',
-    BirthDate: '1985/06/05',
-    HireDate: '2008/03/24',
-    Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
-    Address: '2211 Bonita Dr.',
-    State: 'Arkansas',
-    City: 'Little Rock',
-}, {
-    ID: 9,
-    FirstName: 'Kent',
-    LastName: 'Samuelson',
-    Prefix: 'Dr.',
-    Position: 'Ombudsman',
-    Picture: 'images/employees/02.png',
-    BirthDate: '1972/09/11',
-    HireDate: '2009/04/22',
-    Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.',
-    Address: '12100 Mora Dr',
-    State: 'Missouri',
-    City: 'St. Louis',
-}, {
-    ID: 10,
-    FirstName: 'Taylor',
-    LastName: 'Riley',
-    Prefix: 'Mr.',
-    Position: 'Network Admin',
-    Picture: '',
-    BirthDate: '1982/08/14',
-    HireDate: '2012/04/14',
-    Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
-    Address: '7776 Torreyson Dr',
-    State: 'California',
-    City: 'San Jose',
-}];
-
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0];
-    console.log(data);
-};
-
-</script>
-<style scoped>
-.options {
-    padding: 20px;
-    background-color: rgba(191, 191, 191, 0.15);
-    margin-top: 20px;
-}
-
-.caption {
-    font-size: 18px;
-    font-weight: 500;
-}
-
-.option {
-    width: 24%;
-    display: inline-block;
-    margin-top: 10px;
-}
-
-.options-container {
-    display: flex;
-    align-items: center;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/index.ts b/src/components/Pages/Gangguan/Daftar/index.ts
index c01eea3..c74a0e9 100644
--- a/src/components/Pages/Gangguan/Daftar/index.ts
+++ b/src/components/Pages/Gangguan/Daftar/index.ts
@@ -1 +1,3 @@
-export { default as Data1 } from './Data_1.vue'
\ No newline at end of file
+export { default as GangguanDaftar1 } from './Daftar_1.vue'
+export { default as GangguanDaftar2 } from './Daftar_2.vue'
+export { default as GangguanDaftar3 } from './Daftar_3.vue'
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue b/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
new file mode 100644
index 0000000..d269dd2
--- /dev/null
+++ b/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            <DxSelection mode="single" />
+            <DxPaging :enabled="false" />
+            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+            <DxLoadPanel :enabled="true" />
+            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+
+            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
+            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
+            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
+            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
+            <DxColumn :width="170" alignment="center" data-field="posko_awal" caption="Posko Awal" />
+            <DxColumn :width="170" alignment="center" data-field="posko_tujuan" caption="Posko Tujuan" />
+            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
+            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
+            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
+            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
+            <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
+            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
+
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxDataGrid } from 'devextreme-vue'
+import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { onMounted, ref } from 'vue'
+import { jsPDF } from 'jspdf'
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import type { Data1 } from '@/types/gangguan'
+import { saveAs } from 'file-saver'
+import { Workbook } from 'exceljs'
+
+const data = ref<Data1[]>([])
+
+const onExporting = (e: any) => {
+    if (e.format === 'pdf') {
+        const doc = new jsPDF()
+
+        exportToPdf({
+            jsPDFDocument: doc,
+            component: e.component,
+            indent: 5,
+        }).then(() => {
+            doc.save(`.pdf`)
+        })
+    } else {
+        const workbook = new Workbook()
+        const worksheet = workbook.addWorksheet('Employees')
+
+        exportToExcel({
+            component: e.component,
+            worksheet,
+            autoFilterEnabled: true,
+        }).then(() => {
+            workbook.xlsx.writeBuffer().then((buffer: any) => {
+                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+            })
+        })
+
+        e.cancel = true
+    }
+}
+
+const createDummy = () => {
+    for (let i = 0; i < 100; i++) {
+        data.value.push({
+            number: i + 1,
+            no_laporan: 'G5223091' + (900002 + i),
+            pembuat_laporan: 'agentjateng',
+            tanggal_laporan: '19/09/2023 12:26:42',
+            tanggal_dialihkan: '19/09/2023 12:33:46',
+            tanggal_respon: '19/09/2023 13:14:15',
+            tanggal_recovery: '19/09/2023 13:14:15',
+            durasi_respon: '0-0:47:32',
+            durasi_recovery: '0-0:49:35',
+            posko_awal: 'POSKO ULP UNGARAN.',
+            posko_tujuan: 'POSKO ULP UNGARAN.',
+            status: 'Selesai',
+            id_pelanggan: '-',
+            nama_pelapor: 'Moegy',
+            alamat_pelapor: '-',
+            no_telp_pelapor: '085136661313',
+            keterangan_pelapor: '-',
+            sumber_laporan: 'Contact Center',
+            posko: 'POSKO ULP UNGGARAN'
+        });
+    }
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0]
+    console.log(data)
+};
+
+onMounted(() => {
+    createDummy()
+})
+
+</script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Rekapitulasi/index.ts b/src/components/Pages/Gangguan/Rekapitulasi/index.ts
new file mode 100644
index 0000000..0f1e6c0
--- /dev/null
+++ b/src/components/Pages/Gangguan/Rekapitulasi/index.ts
@@ -0,0 +1 @@
+export { default as GangguanRekap1 } from './Rekap_1.vue'
\ No newline at end of file
diff --git a/src/components/Pages/HomeEmpty.vue b/src/components/Pages/HomeEmpty.vue
index 7e1c5c2..1ee39cf 100644
--- a/src/components/Pages/HomeEmpty.vue
+++ b/src/components/Pages/HomeEmpty.vue
@@ -8,10 +8,103 @@
         <h1 class="mt-1 text-2xl font-semibold text-gray-500 whitespace-pre-wrap">
             {{ appName }}
         </h1>
+
+        <Combobox v-model="selected" v-show="show" v-slot="{ open }">
+            <div class="relative mt-1">
+                <div
+                    class="relative w-full overflow-hidden text-left bg-white rounded-lg shadow-md cursor-default focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+                    <ComboboxInput class="w-full py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 border-none focus:ring-0"
+                        :displayValue="(person: any) => (show || open) ? '' : person.name"
+                        @change="query = $event.target.value" @click="show = !show" @blur="show = false" />
+                    <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
+                        <ChevronUpDownIcon class="w-5 h-5 text-gray-400" aria-hidden="true" />
+                    </ComboboxButton>
+                </div>
+                <TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
+                    leaveTo="opacity-0" @after-leave="query = ''">
+                    <ComboboxOptions
+                        class="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        <div v-if="filteredPeople.length === 0 && query !== ''"
+                            class="relative px-4 py-2 text-gray-700 cursor-default select-none">
+                            Nothing found.
+                        </div>
+
+                        <ComboboxOption v-for="person in filteredPeople" as="template" :key="person.id" :value="person"
+                            v-slot="{ selected, active }">
+                            <li class="relative py-2 pl-10 pr-4 cursor-default select-none" :class="{
+                                'bg-teal-600 text-white': active,
+                                'text-gray-900': !active,
+                            }">
+                                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                                    {{ person.name }}
+                                </span>
+                                <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
+                                    :class="{ 'text-white': active, 'text-teal-600': !active }">
+                                    <CheckIcon class="w-5 h-5" aria-hidden="true" />
+                                </span>
+                            </li>
+                        </ComboboxOption>
+                    </ComboboxOptions>
+
+                </TransitionRoot>
+            </div>
+        </Combobox>
     </div>
 </template>
 
 <script setup lang="ts">
+import { readData, writeData } from '@/utils/storage';
+import {
+    Combobox,
+    ComboboxInput,
+    ComboboxButton,
+    ComboboxOptions,
+    ComboboxOption,
+    TransitionRoot,
+} from '@headlessui/vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+
 import { HomeIcon } from '@heroicons/vue/20/solid'
+import { computed, onMounted, ref, watch } from 'vue';
 const appName = import.meta.env.VITE_APP_NAME
+
+const people = [
+    { id: 1, name: 'Wade Cooper' },
+    { id: 2, name: 'Arlene Mccoy' },
+    { id: 3, name: 'Devon Webb' },
+    { id: 4, name: 'Tom Cook' },
+    { id: 5, name: 'Tanya Fox' },
+    { id: 6, name: 'Hellen Schmidt' },
+]
+
+let selected = ref(people[0])
+let query = ref('')
+
+let filteredPeople = computed(() =>
+    query.value === ''
+        ? people
+        : people.filter((person) =>
+            person.name
+                .toLowerCase()
+                .replace(/\s+/g, '')
+                .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+        )
+)
+const show = ref(false)
+
+watch(selected, (value) => {
+    writeData('home-1', value.id)
+})
+
+onMounted(() => {
+    const last = readData('home-1')
+
+    if (last) {
+        try {
+            selected.value = people.find((person) => person.id === last) ?? people[0]
+        } catch (error) {
+            console.log('error', error)
+        }
+    }
+})
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 6f314ac..b0cbf7b 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -1,10 +1,9 @@
 <template>
-    <main
-        class="flex-1 px-2 py-2 overflow-y-auto bg-white md:mr-4 sm:px-4 md:px-6 sm:py-4 md:py-6 rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="mx-auto max-w-7xl">
+    <main class="flex-1 px-2 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-3xl no-scroll-bar">
+        <div v-if="route.path !== '/home'" class="pt-2 mx-auto max-w-7xl sm:pt-4 md:pt-6">
             <h1 class="text-lg font-medium md:text-2xl lg:text-3xl text-dark">{{ currentRouteName }}</h1>
         </div>
-        <div class="my-2 sm:my-4">
+        <div class="mt-2 sm:mt-4 dx-viewport">
             <slot></slot>
         </div>
     </main>
diff --git a/src/router/index.ts b/src/router/index.ts
index 71a54bd..7c6e81a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,14 @@ import NotFoundView from '@/views/NotFoundView.vue'
 import EmptyPage from '@/components/Pages/HomeEmpty.vue'
 import TestPage from '@/components/Pages/TestPage.vue'
 import qs from 'qs'
-import { Data1 } from '@/components/Pages/Gangguan/Daftar'
+import {
+  GangguanDaftar1,
+  GangguanDaftar2,
+  GangguanDaftar3
+} from '@/components/Pages/Gangguan/Daftar'
+import {
+  GangguanRekap1,
+} from '@/components/Pages/Gangguan/Rekapitulasi'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -31,37 +38,37 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
-                component: Data1,
+                component: GangguanDaftar1,
               },
               {
                 path: '2',
                 name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
-                component: TestPage,
+                component: GangguanDaftar2,
               },
               {
                 path: '3',
                 name: 'Daftar Gangguan Response Time',
-                component: TestPage,
+                component: GangguanDaftar3,
               },
               {
                 path: '4',
                 name: 'Daftar Gangguan Recovery Time',
-                component: TestPage,
+                component: GangguanDaftar3,
               },
               {
                 path: '5',
                 name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
-                component: TestPage,
+                component: GangguanDaftar3,
               },
               {
                 path: '6',
                 name: 'Daftar Gangguan Berdasarkan Media',
-                component: TestPage,
+                component: GangguanDaftar3,
               },
               {
                 path: '7',
                 name: 'Daftar Gangguan Diselesaikan Mobile APKT',
-                component: TestPage,
+                component: GangguanDaftar3,
               },
             ],
           },
@@ -72,7 +79,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Gangguan All',
-                component: TestPage,
+                component: GangguanRekap1,
               },
               {
                 path: '2',
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 75a4617..5d81338 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 import { useRoute, useRouter } from 'vue-router'
 import { convertRouteToMenu } from '@/utils/route'
 import { routes } from '@/router'
-import type { MenuItemModel } from '@/utils/interfaces'
+import type { MenuItemModel } from '@/types/menu'
 import { splitRoutePath } from '@/utils/texts'
 
 export const useMenuStore = defineStore('menu', () => {
@@ -15,7 +15,7 @@ export const useMenuStore = defineStore('menu', () => {
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
     const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
-        console.log('expanded', path);
+        // console.log('expanded', path);
 
         const toggleItemExpanded = (items: MenuItemModel[]): void => {
             for (const item of items) {
diff --git a/src/types/gangguan.ts b/src/types/gangguan.ts
new file mode 100644
index 0000000..659748f
--- /dev/null
+++ b/src/types/gangguan.ts
@@ -0,0 +1,78 @@
+interface Data1 {
+    number: number;
+    no_laporan: string;
+    pembuat_laporan: string;
+    tanggal_laporan: string;
+    tanggal_dialihkan: string;
+    tanggal_respon: string;
+    tanggal_recovery: string;
+    durasi_respon: string;
+    durasi_recovery: string;
+    posko_awal: string;
+    posko_tujuan: string;
+    status: string;
+    id_pelanggan: string;
+    nama_pelapor: string;
+    alamat_pelapor: string;
+    no_telp_pelapor: string;
+    keterangan_pelapor: string;
+    sumber_laporan: string;
+    posko: string;
+}
+
+interface Data2 {
+    number: number;
+    no_laporan: string;
+    tanggal_laporan: string;
+    tanggal_respon: string;
+    tanggal_recovery: string;
+    jumlah_lapor: number;
+    durasi_respon: string;
+    durasi_recovery: string;
+    status: string;
+    id_pelanggan: string;
+    nama_pelapor: string;
+    alamat_pelapor: string;
+    no_telp_pelapor: string;
+    keterangan_pelapor: string;
+    sumber_laporan: string;
+    posko: string;
+}
+
+interface Data3 {
+    number: number;
+    no_laporan: string;
+    tanggal_laporan: string;
+    tanggal_respon: string;
+    tanggal_recovery: string;
+    durasi_respon: string;
+    durasi_recovery: string;
+    status: string;
+    referensi_marking: string;
+    id_pelanggan: string;
+    nama_pelapor: string;
+    alamat_pelapor: string;
+    no_telp_pelapor: string;
+    keterangan_pelapor: string;
+    posko: string;
+}
+
+interface Rekap1 {
+    id: number;
+    nama_unit: string;
+    total: number;
+    selesai: string;
+    progress_1: number;
+    in_progress: number;
+    progress_2: number;
+    avg: number;
+    max: number;
+    min: number;
+
+}
+
+export type {
+    Data1,
+    Data2,
+    Data3
+}
\ No newline at end of file
diff --git a/src/utils/interfaces.ts b/src/types/menu.ts
similarity index 79%
rename from src/utils/interfaces.ts
rename to src/types/menu.ts
index 4faeed8..a9a4db0 100644
--- a/src/utils/interfaces.ts
+++ b/src/types/menu.ts
@@ -6,4 +6,6 @@ interface MenuItemModel {
     children: MenuItemModel[];
 }
 
-export type { MenuItemModel }
\ No newline at end of file
+export type {
+    MenuItemModel,
+}
\ No newline at end of file
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 1bff7b3..2c77c62 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -1,5 +1,5 @@
 
-import type { MenuItemModel } from './interfaces'
+import type { MenuItemModel } from '../types/menu'
 import type { RouteRecordRaw } from 'vue-router'
 import {
     Gauge,

From be26419c295082978944d49130dac6a9343d3e49 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 09:47:23 +0700
Subject: [PATCH 07/20] update

---
 .../Navigation/Aside/AsideMenuMultiple.vue    |  2 +-
 .../Pages/Gangguan/Rekapitulasi/Rekap_1.vue   | 97 +++++++++++--------
 src/types/gangguan.ts                         | 21 +++-
 3 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index 6b4da2a..6d1ef10 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { MenuItemModel } from '@/utils/interfaces'
+import type { MenuItemModel } from '@/types/menu'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
 import { DotOutline } from '@/utils/icons'
diff --git a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue b/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
index d269dd2..e104d5a 100644
--- a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
+++ b/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
@@ -10,26 +10,33 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-            <DxColumn :width="40" alignment="center" data-field="number" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_laporan" caption="Tgl Lapor" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_dialihkan" caption="Tgl Dialihkan" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_respon" caption="Tgl Response" />
-            <DxColumn :width="150" alignment="center" data-field="tanggal_recovery" caption="Tgl Recovery" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_respon" caption="Durasi Response Time" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery" caption="Durasi Recovery Time" />
-            <DxColumn :width="170" alignment="center" data-field="posko_awal" caption="Posko Awal" />
-            <DxColumn :width="170" alignment="center" data-field="posko_tujuan" caption="Posko Tujuan" />
-            <DxColumn :width="150" alignment="center" data-field="status" caption="Status" />
-            <DxColumn :width="150" alignment="center" data-field="id_pelanggan" caption="IDPEL/NO METER" />
-            <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor" />
-            <DxColumn :width="150" alignment="center" data-field="sumber_laporan" caption="Sumber Lapor" />
-            <DxColumn :width="170" alignment="center" data-field="posko" caption="Posko" />
-
+            <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
+            <DxColumn alignment="center" caption="Dispatching Time">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="Response Time">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
+            </DxColumn>
+            <DxColumn alignment="center" caption="Recovery Time">
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
+            </DxColumn>
         </DxDataGrid>
     </div>
 </template>
@@ -41,11 +48,11 @@ import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Data1 } from '@/types/gangguan'
+import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
-const data = ref<Data1[]>([])
+const data = ref<Rekap1[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -79,25 +86,29 @@ const onExporting = (e: any) => {
 const createDummy = () => {
     for (let i = 0; i < 100; i++) {
         data.value.push({
-            number: i + 1,
-            no_laporan: 'G5223091' + (900002 + i),
-            pembuat_laporan: 'agentjateng',
-            tanggal_laporan: '19/09/2023 12:26:42',
-            tanggal_dialihkan: '19/09/2023 12:33:46',
-            tanggal_respon: '19/09/2023 13:14:15',
-            tanggal_recovery: '19/09/2023 13:14:15',
-            durasi_respon: '0-0:47:32',
-            durasi_recovery: '0-0:49:35',
-            posko_awal: 'POSKO ULP UNGARAN.',
-            posko_tujuan: 'POSKO ULP UNGARAN.',
-            status: 'Selesai',
-            id_pelanggan: '-',
-            nama_pelapor: 'Moegy',
-            alamat_pelapor: '-',
-            no_telp_pelapor: '085136661313',
-            keterangan_pelapor: '-',
-            sumber_laporan: 'Contact Center',
-            posko: 'POSKO ULP UNGGARAN'
+            id: i,
+            nama_unit: '-',
+            total: 0,
+            selesai: '-',
+            in_progress: 0,
+            avg: 0,
+            max: 0,
+            min: 0,
+            dt_avg: 0,
+            dt_max: 0,
+            dt_min: 0,
+            dt_more_sla: 0,
+            dt_less_sla: 0,
+            rt_avg: 0,
+            rt_max: 0,
+            rt_min: 0,
+            rt_more_sla: 0,
+            rt_less_sla: 0,
+            ret_avg: 0,
+            ret_max: 0,
+            ret_min: 0,
+            ret_more_sla: 0,
+            ret_less_sla: 0,
         });
     }
 }
diff --git a/src/types/gangguan.ts b/src/types/gangguan.ts
index 659748f..1adbe32 100644
--- a/src/types/gangguan.ts
+++ b/src/types/gangguan.ts
@@ -62,17 +62,30 @@ interface Rekap1 {
     nama_unit: string;
     total: number;
     selesai: string;
-    progress_1: number;
     in_progress: number;
-    progress_2: number;
     avg: number;
     max: number;
     min: number;
-
+    dt_avg: number;
+    dt_max: number;
+    dt_min: number;
+    dt_more_sla: number;
+    dt_less_sla: number;
+    rt_avg: number;
+    rt_max: number;
+    rt_min: number;
+    rt_more_sla: number;
+    rt_less_sla: number;
+    ret_avg: number;
+    ret_max: number;
+    ret_min: number;
+    ret_more_sla: number;
+    ret_less_sla: number;
 }
 
 export type {
     Data1,
     Data2,
-    Data3
+    Data3,
+    Rekap1
 }
\ No newline at end of file

From a87a29fb392628727eb7086e621c5588e245ad2c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 09:49:37 +0700
Subject: [PATCH 08/20] fix build error

---
 src/components/Navigation/Aside/AsideMenuSingle.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 4879614..5cedd6c 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuItemModel } from '@/utils/interfaces'
+import type { MenuItemModel } from '@/types/menu'
 
 defineProps({
     item: {

From 52ce48604d5560efe427005ebac1280ae6699f00 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 13:07:57 +0700
Subject: [PATCH 09/20] add walcome page

---
 src/assets/css/style.css                      |  85 ++++++++++
 src/components/CommandPalettes.vue            |  35 +++-
 src/components/Navigation/Aside/Aside.vue     |   9 +-
 .../Pages/Gangguan/Daftar/Daftar_1.vue        |   3 +-
 .../Pages/Gangguan/Daftar/Daftar_2.vue        |   3 +-
 .../Pages/Gangguan/Daftar/Daftar_3.vue        |   3 +-
 .../Pages/Gangguan/Rekapitulasi/Rekap_1.vue   |  67 +++++---
 src/components/Pages/HomeEmpty.vue            |   1 -
 src/components/Pages/Welcome.vue              | 151 ++++++++++++++++++
 src/router/index.ts                           |   4 +-
 src/utils/route.ts                            |   2 +-
 11 files changed, 326 insertions(+), 37 deletions(-)
 create mode 100644 src/components/Pages/Welcome.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index e7493c8..f65583e 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1098,6 +1098,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-12 {
+  margin-top: 3rem;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1198,6 +1202,10 @@ select {
   height: 80vh;
 }
 
+.h-\[66px\] {
+  height: 66px;
+}
+
 .max-h-0 {
   max-height: 0px;
 }
@@ -1526,6 +1534,12 @@ select {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1829,10 +1843,19 @@ select {
   fill: #fff;
 }
 
+.fill-gray-600 {
+  fill: #4b5563;
+}
+
 .stroke-white {
   stroke: #fff;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2281,6 +2304,11 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-opacity-100 {
   --tw-text-opacity: 1;
 }
@@ -2315,6 +2343,10 @@ select {
   opacity: 0.5;
 }
 
+.opacity-40 {
+  opacity: 0.4;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2717,6 +2749,28 @@ select {
   background-color: rgb(53 124 141 / var(--tw-bg-opacity));
 }
 
+.group:hover .group-hover\:block {
+  display: block;
+}
+
+.group:hover .group-hover\:bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
+.group:hover .group-hover\:bg-opacity-5 {
+  --tw-bg-opacity: 0.05;
+}
+
+.group:hover .group-hover\:bg-opacity-80 {
+  --tw-bg-opacity: 0.8;
+}
+
 .group:hover .group-hover\:fill-gray-500 {
   fill: #6b7280;
 }
@@ -2735,6 +2789,15 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:bg-opacity-50 {
     --tw-bg-opacity: 0.5;
@@ -3109,6 +3172,10 @@ select {
     margin-right: 1.5rem;
   }
 
+  .md\:mt-8 {
+    margin-top: 2rem;
+  }
+
   .md\:block {
     display: block;
   }
@@ -3133,6 +3200,10 @@ select {
     width: 300px;
   }
 
+  .md\:w-\[440px\] {
+    width: 440px;
+  }
+
   .md\:max-w-\[220px\] {
     max-width: 220px;
   }
@@ -3163,6 +3234,16 @@ select {
     padding-right: 1rem;
   }
 
+  .md\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  .md\:py-0 {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .md\:pl-4 {
     padding-left: 1rem;
   }
@@ -3203,6 +3284,10 @@ select {
     margin-top: 0px;
   }
 
+  .lg\:mt-12 {
+    margin-top: 3rem;
+  }
+
   .lg\:block {
     display: block;
   }
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index b8a3fae..6956a51 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -33,13 +33,35 @@
                                         <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
                                             :key="menu.path" v-slot="{ active }">
                                             <li @click="openMenu(menu)"
-                                                :class="['flex cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
-                                                <DocumentTextIcon
+                                                :class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
+                                                <img v-if="menu.path.includes('/gangguan/')" :src="navigationIcon[0]"
+                                                    alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <img v-else-if="menu.path.includes('/keluhan/')" :src="navigationIcon[1]"
+                                                    alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <img v-else-if="menu.path.includes('/monalisa/')" :src="navigationIcon[2]"
+                                                    alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <img v-else-if="menu.path.includes('/check-in-out/')"
+                                                    :src="navigationIcon[3]" alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <img v-else-if="menu.path.includes('/anomali-pengaduan/')"
+                                                    :src="navigationIcon[4]" alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <img v-else :src="navigationIcon[5]" alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <!-- <DocumentTextIcon
                                                     :class="['h-6 w-6 flex-none text-gray-900 text-opacity-40', active && 'text-opacity-100']"
-                                                    aria-hidden="true" />
-                                                <span class="flex-auto ml-3 truncate">
-                                                    {{ menu.name }}
-                                                </span>
+                                                    aria-hidden="true" /> -->
+                                                <div class="flex flex-col flex-auto ml-3 space-y-1">
+                                                    <span class="text-sm font-medium text-gray-800 truncate">
+                                                        {{ menu.name }}
+                                                    </span>
+                                                    <span class="text-xs text-gray-500 ">
+                                                        {{ menu.path.replace('/home/', '') }}
+                                                    </span>
+                                                </div>
                                                 <span v-if="active" class="flex-none ml-3 text-gray-500">
                                                     Buka
                                                 </span>
@@ -84,6 +106,7 @@ import {
 import { useRouter, type RouteRecordRaw } from 'vue-router'
 import { routes, extractLeafRoutes } from '@/router'
 import { useCommandPalattesStore } from '@/stores/command'
+import { navigationIcon } from '@/utils/route'
 
 const command = useCommandPalattesStore()
 const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index c2dff9d..66e6b7e 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -106,7 +106,14 @@ const closeSideBar = () => menu.toggleSidebar()
                 class="px-4 py-4 text-gray-500 rounded-full hover:bg-primary-100 focus:outline-none focus:ring-0"
                 @click="menu.toggleSidebarDesktop()">
                 <span class="sr-only">Open sidebar</span>
-                <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
+                <!-- <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" /> -->
+                <svg class="w-6 h-6" width="32" height="32" viewBox="0 0 32 32" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z"
+                        fill="#343330" />
+                </svg>
+
             </button>
             <RouterLink to="/">
                 <img class="w-auto h-11" :src="IconApp" alt="PLN" />
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_1.vue b/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
index 9ac84cd..e6135d5 100644
--- a/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
@@ -2,7 +2,8 @@
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
index 28321bf..5dee180 100644
--- a/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_2.vue
@@ -2,7 +2,8 @@
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
index d82e1d7..a213274 100644
--- a/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_3.vue
@@ -2,7 +2,8 @@
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" key-expr="no_laporan" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
diff --git a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue b/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
index e104d5a..9709634 100644
--- a/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
+++ b/src/components/Pages/Gangguan/Rekapitulasi/Rekap_1.vue
@@ -2,40 +2,61 @@
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting">
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+            <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress" />
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                :allow-resizing="false" />
+            <DxColumn :width="150" alignment="center" data-field="" caption="Selesai" :allow-resizing="false" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                :allow-resizing="false" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="In Progress"
+                :allow-resizing="false" />
+            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                :allow-resizing="false" />
             <DxColumn alignment="center" caption="Dispatching Time">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    :allow-resizing="false" />
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    :allow-resizing="false" />
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    :allow-resizing="false" />
+                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    :allow-resizing="false" />
             </DxColumn>
         </DxDataGrid>
     </div>
@@ -43,7 +64,7 @@
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { onMounted, ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -116,7 +137,7 @@ const createDummy = () => {
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
-};
+}
 
 onMounted(() => {
     createDummy()
diff --git a/src/components/Pages/HomeEmpty.vue b/src/components/Pages/HomeEmpty.vue
index 1ee39cf..a15e264 100644
--- a/src/components/Pages/HomeEmpty.vue
+++ b/src/components/Pages/HomeEmpty.vue
@@ -1,7 +1,6 @@
 <template>
     <div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
 
-        <!-- <HomeIcon class="w-12 h-12 mx-auto text-gray-400" aria-hidden="true" /> -->
         <h3 class="mt-2 text-gray-400 whitespace-pre-wrap text-md">
             Selamat datang di aplikasi
         </h3>
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
new file mode 100644
index 0000000..db8eaf9
--- /dev/null
+++ b/src/components/Pages/Welcome.vue
@@ -0,0 +1,151 @@
+<template>
+    <div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
+        <div class="w-full md:w-[440px] px-4 py-4 md:px-0 md:py-0 flex flex-col items-center">
+            <img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
+            <button @click="command.showCommandPalettes" type="button"
+                class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0">
+                <span class="sr-only">Search</span>
+                <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
+                <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
+            </button>
+
+            <div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
+                <div class="flex flex-col items-start w-full p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
+                    <h2 v-if="query === '' && recent.length > 0" class="mb-2 text-xs font-semibold text-gray-900 ">
+                        Terakhir Dikunjungi
+                    </h2>
+                    <div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
+                        :key="menu.path">
+                        <div @click="openMenu(menu)" class="group">
+                            <div
+                                class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
+
+                                <svg v-if="menu.path.includes('/gangguan/')"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="32" height="32"
+                                    viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path opacity="0.2" d="M12 30L14 20L6 17L20 2L18 12L26 15L12 30Z" />
+                                    <path
+                                        d="M6.73976 4.32749C6.65194 4.2285 6.54535 4.14792 6.42616 4.09043C6.30697 4.03294 6.17756 3.99967 6.04542 3.99256C5.91328 3.98545 5.78104 4.00464 5.65637 4.04902C5.53171 4.09339 5.41708 4.16207 5.31915 4.25106C5.22122 4.34006 5.14193 4.44761 5.08587 4.56748C5.02981 4.68735 4.99809 4.81716 4.99257 4.94937C4.98705 5.08159 5.00782 5.21359 5.05369 5.33771C5.09955 5.46184 5.1696 5.57563 5.25976 5.67249L10.166 11.07L5.26851 16.32C5.15481 16.4398 5.07255 16.5859 5.02909 16.7453C4.98563 16.9046 4.98233 17.0723 5.01947 17.2332C5.05661 17.3942 5.13305 17.5434 5.24194 17.6676C5.35084 17.7918 5.4888 17.8871 5.64351 17.945L12.8473 20.6462L11.0198 29.8037C10.9783 30.0167 11.0072 30.2374 11.1021 30.4325C11.197 30.6276 11.3529 30.7866 11.546 30.8853C11.7392 30.9841 11.9593 31.0174 12.1731 30.9801C12.3868 30.9429 12.5827 30.8371 12.731 30.6787L20.4635 22.3937L25.2598 27.6687C25.3476 27.7677 25.4542 27.8483 25.5734 27.9058C25.6926 27.9633 25.822 27.9966 25.9541 28.0037C26.0862 28.0108 26.2185 27.9916 26.3432 27.9472C26.4678 27.9028 26.5824 27.8342 26.6804 27.7452C26.7783 27.6562 26.8576 27.5486 26.9137 27.4287C26.9697 27.3089 27.0014 27.1791 27.007 27.0469C27.0125 26.9146 26.9917 26.7826 26.9458 26.6585C26.9 26.5344 26.8299 26.4206 26.7398 26.3237L6.73976 4.32749ZM13.671 26.75L14.9798 20.2025C15.0266 19.9703 14.9895 19.729 14.875 19.5216C14.7606 19.3142 14.5762 19.1541 14.3548 19.07L7.74976 16.5887L11.5148 12.555L19.1123 20.9125L13.671 26.75ZM13.5823 8.87499C13.4862 8.78538 13.4087 8.67772 13.3543 8.55817C13.2999 8.43861 13.2695 8.3095 13.265 8.17822C13.2605 8.04693 13.2818 7.91603 13.3279 7.79301C13.374 7.66999 13.4439 7.55725 13.5335 7.46124L19.2685 1.31624C19.4169 1.15791 19.6127 1.05213 19.8265 1.01486C20.0402 0.977594 20.2603 1.01086 20.4535 1.10964C20.6467 1.20842 20.8025 1.36736 20.8974 1.56247C20.9924 1.75758 21.0213 1.97827 20.9798 2.19124L19.1473 11.3625L26.351 14.0637C26.5046 14.122 26.6414 14.2172 26.7495 14.3409C26.8575 14.4646 26.9334 14.613 26.9705 14.773C27.0076 14.9331 27.0047 15.0997 26.962 15.2583C26.9194 15.417 26.8383 15.5626 26.726 15.6825L23.9385 18.6687C23.7564 18.8572 23.5075 18.9666 23.2454 18.9734C22.9834 18.9803 22.7292 18.8839 22.5375 18.7052C22.3458 18.5264 22.2319 18.2795 22.2204 18.0176C22.2089 17.7558 22.3007 17.4999 22.476 17.305L24.2498 15.4112L17.6498 12.9362C17.4283 12.8521 17.244 12.6921 17.1295 12.4847C17.015 12.2773 16.9779 12.036 17.0248 11.8037L18.3335 5.25624L14.9998 8.82749C14.91 8.92402 14.8021 9.00186 14.6821 9.05652C14.5622 9.11119 14.4326 9.1416 14.3009 9.14602C14.1692 9.15043 14.0378 9.12876 13.9145 9.08224C13.7912 9.03573 13.6783 8.9653 13.5823 8.87499Z" />
+                                </svg>
+                                <svg v-else-if="menu.path.includes('/keluhan/')"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <g id="SmileySad">
+                                        <path id="Vector" opacity="0.2"
+                                            d="M21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.387 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" />
+                                        <path id="Vector_2"
+                                            d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM7.5 10.125C7.5 9.9025 7.56598 9.68499 7.6896 9.49998C7.81322 9.31498 7.98892 9.17078 8.19449 9.08564C8.40005 9.00049 8.62625 8.97821 8.84448 9.02162C9.06271 9.06502 9.26317 9.17217 9.4205 9.3295C9.57783 9.48684 9.68498 9.68729 9.72839 9.90552C9.7718 10.1238 9.74952 10.35 9.66437 10.5555C9.57922 10.7611 9.43503 10.9368 9.25002 11.0604C9.06502 11.184 8.84751 11.25 8.625 11.25C8.32664 11.25 8.04049 11.1315 7.82951 10.9205C7.61853 10.7095 7.5 10.4234 7.5 10.125ZM16.5 10.125C16.5 10.3475 16.434 10.565 16.3104 10.75C16.1868 10.935 16.0111 11.0792 15.8055 11.1644C15.6 11.2495 15.3738 11.2718 15.1555 11.2284C14.9373 11.185 14.7368 11.0778 14.5795 10.9205C14.4222 10.7632 14.315 10.5627 14.2716 10.3445C14.2282 10.1262 14.2505 9.90005 14.3356 9.69448C14.4208 9.48891 14.565 9.31321 14.75 9.1896C14.935 9.06598 15.1525 9 15.375 9C15.6734 9 15.9595 9.11853 16.1705 9.3295C16.3815 9.54048 16.5 9.82663 16.5 10.125ZM16.3988 16.125C16.453 16.2104 16.4895 16.3058 16.5059 16.4056C16.5223 16.5054 16.5183 16.6075 16.4943 16.7058C16.4702 16.804 16.4265 16.8964 16.3658 16.9773C16.3052 17.0583 16.2287 17.1261 16.1412 17.1767C16.0536 17.2273 15.9567 17.2597 15.8563 17.2719C15.7558 17.2841 15.654 17.2758 15.5569 17.2477C15.4597 17.2195 15.3693 17.1719 15.291 17.1079C15.2127 17.0438 15.1481 16.9646 15.1013 16.875C14.4009 15.6647 13.3003 15 12 15C10.6997 15 9.59907 15.6656 8.89875 16.875C8.85187 16.9646 8.78734 17.0438 8.70904 17.1079C8.63074 17.1719 8.5403 17.2195 8.44316 17.2477C8.34601 17.2758 8.24417 17.2841 8.14375 17.2719C8.04334 17.2597 7.94643 17.2273 7.85886 17.1767C7.77128 17.1261 7.69485 17.0583 7.63417 16.9773C7.57348 16.8964 7.52979 16.804 7.50573 16.7058C7.48166 16.6075 7.47772 16.5054 7.49413 16.4056C7.51055 16.3058 7.54699 16.2104 7.60125 16.125C8.56594 14.4572 10.1691 13.5 12 13.5C13.8309 13.5 15.4341 14.4563 16.3988 16.125Z" />
+                                    </g>
+                                </svg>
+                                <svg v-else-if="menu.path.includes('/monalisa/')"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <g id="Monitor">
+                                        <path id="Vector" opacity="0.2"
+                                            d="M21 6V16.5C21 16.8978 20.842 17.2794 20.5607 17.5607C20.2794 17.842 19.8978 18 19.5 18H4.5C4.10218 18 3.72064 17.842 3.43934 17.5607C3.15804 17.2794 3 16.8978 3 16.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6Z" />
+                                        <path id="Vector_2"
+                                            d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" />
+                                    </g>
+                                </svg>
+                                <svg v-else-if="menu.path.includes('/check-in-out/')"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <g id="Swap">
+                                        <path id="Vector" opacity="0.2"
+                                            d="M20.25 4.5V14.25C20.25 14.4489 20.171 14.6397 20.0303 14.7803C19.8897 14.921 19.6989 15 19.5 15H15.75V19.5C15.75 19.6989 15.671 19.8897 15.5303 20.0303C15.3897 20.171 15.1989 20.25 15 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25V4.5C8.25 4.30109 8.32902 4.11032 8.46967 3.96967C8.61032 3.82902 8.80109 3.75 9 3.75H19.5C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5Z" />
+                                        <path id="Vector_2"
+                                            d="M21 4.5V14.25C21 14.6478 20.842 15.0294 20.5607 15.3107C20.2794 15.592 19.8978 15.75 19.5 15.75H9.31031L10.2806 16.7194C10.3503 16.7891 10.4056 16.8718 10.4433 16.9628C10.481 17.0539 10.5004 17.1515 10.5004 17.25C10.5004 17.3485 10.481 17.4461 10.4433 17.5372C10.4056 17.6282 10.3503 17.7109 10.2806 17.7806C10.2109 17.8503 10.1282 17.9056 10.0372 17.9433C9.94613 17.981 9.84855 18.0004 9.75 18.0004C9.65145 18.0004 9.55387 17.981 9.46283 17.9433C9.37178 17.9056 9.28906 17.8503 9.21937 17.7806L6.96937 15.5306C6.89964 15.461 6.84432 15.3783 6.80658 15.2872C6.76884 15.1962 6.74941 15.0986 6.74941 15C6.74941 14.9014 6.76884 14.8038 6.80658 14.7128C6.84432 14.6217 6.89964 14.539 6.96937 14.4694L9.21937 12.2194C9.36011 12.0786 9.55098 11.9996 9.75 11.9996C9.94902 11.9996 10.1399 12.0786 10.2806 12.2194C10.4214 12.3601 10.5004 12.551 10.5004 12.75C10.5004 12.949 10.4214 13.1399 10.2806 13.2806L9.31031 14.25H19.5V4.5H9V5.25C9 5.44891 8.92098 5.63968 8.78033 5.78033C8.63968 5.92098 8.44891 6 8.25 6C8.05109 6 7.86032 5.92098 7.71967 5.78033C7.57902 5.63968 7.5 5.44891 7.5 5.25V4.5C7.5 4.10218 7.65804 3.72064 7.93934 3.43934C8.22064 3.15804 8.60218 3 9 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5ZM15.75 18C15.5511 18 15.3603 18.079 15.2197 18.2197C15.079 18.3603 15 18.5511 15 18.75V19.5H4.5V9.75H14.6897L13.7194 10.7194C13.5786 10.8601 13.4996 11.051 13.4996 11.25C13.4996 11.449 13.5786 11.6399 13.7194 11.7806C13.8601 11.9214 14.051 12.0004 14.25 12.0004C14.449 12.0004 14.6399 11.9214 14.7806 11.7806L17.0306 9.53063C17.1004 9.46097 17.1557 9.37825 17.1934 9.28721C17.2312 9.19616 17.2506 9.09856 17.2506 9C17.2506 8.90144 17.2312 8.80384 17.1934 8.71279C17.1557 8.62175 17.1004 8.53903 17.0306 8.46937L14.7806 6.21937C14.6399 6.07864 14.449 5.99958 14.25 5.99958C14.051 5.99958 13.8601 6.07864 13.7194 6.21937C13.5786 6.36011 13.4996 6.55098 13.4996 6.75C13.4996 6.94902 13.5786 7.13989 13.7194 7.28063L14.6897 8.25H4.5C4.10218 8.25 3.72064 8.40804 3.43934 8.68934C3.15804 8.97064 3 9.35218 3 9.75V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H15C15.3978 21 15.7794 20.842 16.0607 20.5607C16.342 20.2794 16.5 19.8978 16.5 19.5V18.75C16.5 18.5511 16.421 18.3603 16.2803 18.2197C16.1397 18.079 15.9489 18 15.75 18Z" />
+                                    </g>
+                                </svg>
+                                <svg v-else-if="menu.path.includes('/anomali-pengaduan/')"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
+                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <g id="Plugs">
+                                        <path id="Vector" opacity="0.2"
+                                            d="M7.12508 11.625L12.3751 16.875L9.65633 19.5937C9.23438 20.0157 8.66211 20.2527 8.06539 20.2527C7.46868 20.2527 6.89641 20.0157 6.47446 19.5937L4.40633 17.5228C3.98527 17.101 3.74878 16.5293 3.74878 15.9333C3.74878 15.3373 3.98527 14.7656 4.40633 14.3437L7.12508 11.625ZM19.5938 6.47718L17.5229 4.40625C17.1011 3.98518 16.5294 3.7487 15.9334 3.7487C15.3373 3.7487 14.7657 3.98518 14.3438 4.40625L11.6251 7.125L16.8751 12.375L19.5938 9.65625C20.0149 9.23441 20.2514 8.66274 20.2514 8.06672C20.2514 7.47069 20.0149 6.89902 19.5938 6.47718Z" />
+                                        <path id="Vector_2"
+                                            d="M14.0306 12.9694C13.9609 12.8996 13.8782 12.8443 13.7871 12.8066C13.6961 12.7688 13.5985 12.7494 13.4999 12.7494C13.4014 12.7494 13.3038 12.7688 13.2127 12.8066C13.1217 12.8443 13.039 12.8996 12.9693 12.9694L11.2499 14.6897L9.31024 12.75L11.0306 11.0306C11.1713 10.8899 11.2503 10.699 11.2503 10.5C11.2503 10.301 11.1713 10.1101 11.0306 9.96938C10.8898 9.82865 10.699 9.74959 10.4999 9.74959C10.3009 9.74959 10.11 9.82865 9.9693 9.96938L8.24993 11.6897L6.53055 9.96938C6.38982 9.82865 6.19895 9.74959 5.99993 9.74959C5.80091 9.74959 5.61003 9.82865 5.4693 9.96938C5.32857 10.1101 5.24951 10.301 5.24951 10.5C5.24951 10.699 5.32857 10.8899 5.4693 11.0306L6.06462 11.625L3.87837 13.8103C3.59972 14.0889 3.37868 14.4196 3.22787 14.7837C3.07706 15.1477 2.99944 15.5379 2.99944 15.9319C2.99944 16.3259 3.07706 16.7161 3.22787 17.0801C3.37868 17.4441 3.59972 17.7749 3.87837 18.0534L4.38274 18.5569L1.7193 21.2194C1.64962 21.2891 1.59435 21.3718 1.55663 21.4628C1.51892 21.5539 1.49951 21.6515 1.49951 21.75C1.49951 21.8485 1.51892 21.9461 1.55663 22.0372C1.59435 22.1282 1.64962 22.2109 1.7193 22.2806C1.86003 22.4214 2.05091 22.5004 2.24993 22.5004C2.34847 22.5004 2.44606 22.481 2.5371 22.4433C2.62815 22.4056 2.71087 22.3503 2.78055 22.2806L5.44305 19.6172L5.94649 20.1216C6.22508 20.4002 6.55582 20.6213 6.91984 20.7721C7.28387 20.9229 7.67403 21.0005 8.06805 21.0005C8.46208 21.0005 8.85224 20.9229 9.21626 20.7721C9.58028 20.6213 9.91103 20.4002 10.1896 20.1216L12.3749 17.9353L12.9693 18.5306C13.039 18.6003 13.1217 18.6556 13.2128 18.6933C13.3038 18.731 13.4014 18.7504 13.4999 18.7504C13.5985 18.7504 13.6961 18.731 13.7871 18.6933C13.8781 18.6556 13.9609 18.6003 14.0306 18.5306C14.1002 18.4609 14.1555 18.3782 14.1932 18.2872C14.2309 18.1961 14.2503 18.0985 14.2503 18C14.2503 17.9015 14.2309 17.8039 14.1932 17.7128C14.1555 17.6218 14.1002 17.5391 14.0306 17.4694L12.3102 15.75L14.0306 14.0306C14.1003 13.961 14.1556 13.8783 14.1933 13.7872C14.2311 13.6962 14.2505 13.5986 14.2505 13.5C14.2505 13.4014 14.2311 13.3038 14.1933 13.2128C14.1556 13.1217 14.1003 13.039 14.0306 12.9694ZM9.12837 19.0631C8.84709 19.3442 8.46571 19.5021 8.06805 19.5021C7.6704 19.5021 7.28902 19.3442 7.00774 19.0631L4.93962 16.9922C4.65852 16.7109 4.50062 16.3295 4.50062 15.9319C4.50062 15.5342 4.65852 15.1528 4.93962 14.8716L7.12493 12.6853L11.3146 16.875L9.12837 19.0631ZM22.2806 1.71938C22.2109 1.64965 22.1282 1.59433 22.0371 1.55658C21.9461 1.51884 21.8485 1.49941 21.7499 1.49941C21.6514 1.49941 21.5538 1.51884 21.4627 1.55658C21.3717 1.59433 21.289 1.64965 21.2193 1.71938L18.5568 4.38282L18.0534 3.87844C17.4901 3.31683 16.7272 3.00146 15.9318 3.00146C15.1364 3.00146 14.3735 3.31683 13.8102 3.87844L11.6249 6.06469L11.0306 5.46938C10.8898 5.32865 10.699 5.24959 10.4999 5.24959C10.3009 5.24959 10.11 5.32865 9.9693 5.46938C9.82857 5.61011 9.74951 5.80098 9.74951 6C9.74951 6.19903 9.82857 6.3899 9.9693 6.53063L17.4693 14.0306C17.539 14.1003 17.6217 14.1556 17.7128 14.1933C17.8038 14.231 17.9014 14.2504 17.9999 14.2504C18.0985 14.2504 18.1961 14.231 18.2871 14.1933C18.3781 14.1556 18.4609 14.1003 18.5306 14.0306C18.6002 13.9609 18.6555 13.8782 18.6932 13.7872C18.7309 13.6961 18.7503 13.5985 18.7503 13.5C18.7503 13.4015 18.7309 13.3039 18.6932 13.2128C18.6555 13.1218 18.6002 13.0391 18.5306 12.9694L17.9352 12.375L20.1215 10.1897C20.4001 9.91111 20.6212 9.58036 20.772 9.21634C20.9228 8.85231 21.0004 8.46215 21.0004 8.06813C21.0004 7.6741 20.9228 7.28394 20.772 6.91992C20.6212 6.5559 20.4001 6.22515 20.1215 5.94657L19.6171 5.44313L22.2806 2.78063C22.3503 2.71097 22.4056 2.62826 22.4433 2.53721C22.4811 2.44616 22.5005 2.34856 22.5005 2.25C22.5005 2.15144 22.4811 2.05385 22.4433 1.9628C22.4056 1.87175 22.3503 1.78903 22.2806 1.71938ZM19.0602 9.12563L16.8749 11.3147L12.6852 7.125L14.8715 4.93969C15.1528 4.6586 15.5342 4.5007 15.9318 4.5007C16.3295 4.5007 16.7108 4.6586 16.9921 4.93969L19.0602 7.00219C19.2003 7.14157 19.3114 7.30723 19.3872 7.48968C19.463 7.67212 19.5021 7.86774 19.5021 8.06532C19.5021 8.26289 19.463 8.45851 19.3872 8.64095C19.3114 8.8234 19.2003 8.98906 19.0602 9.12844V9.12563Z" />
+                                    </g>
+                                </svg>
+                                <svg v-else :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
+                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <g id="Gauge">
+                                        <path id="Vector" opacity="0.2"
+                                            d="M21.75 15V17.25C21.75 17.4489 21.671 17.6397 21.5303 17.7803C21.3897 17.921 21.1989 18 21 18H3C2.80109 18 2.61032 17.921 2.46967 17.7803C2.32902 17.6397 2.25 17.4489 2.25 17.25V15.1059C2.25 9.71719 6.57656 5.26875 11.9653 5.25C13.2486 5.24544 14.5202 5.49426 15.7071 5.9822C16.8941 6.47013 17.973 7.18759 18.882 8.09342C19.7911 8.99924 20.5124 10.0756 21.0045 11.2608C21.4967 12.446 21.75 13.7167 21.75 15Z" />
+                                        <path id="Vector_2"
+                                            d="M19.4119 7.56282C18.4397 6.58843 17.2842 5.81613 16.0121 5.29046C14.74 4.76478 13.3764 4.49614 12 4.5H11.9625C6.19406 4.51969 1.5 9.28125 1.5 15.1059V17.25C1.5 17.6478 1.65804 18.0294 1.93934 18.3107C2.22064 18.592 2.60218 18.75 3 18.75H21C21.3978 18.75 21.7794 18.592 22.0607 18.3107C22.342 18.0294 22.5 17.6478 22.5 17.25V15C22.5039 13.6175 22.2328 12.2481 21.7027 10.9713C21.1725 9.69457 20.3938 8.53594 19.4119 7.56282ZM21 17.25H11.2228L16.3566 10.1906C16.4737 10.0298 16.5221 9.82895 16.4911 9.63239C16.4602 9.43583 16.3524 9.25961 16.1916 9.1425C16.0307 9.02539 15.8299 8.97699 15.6333 9.00793C15.4368 9.03887 15.2605 9.14663 15.1434 9.3075L9.3675 17.25H3V15.1059C3 14.8172 3.01406 14.5322 3.04031 14.25H5.25C5.44891 14.25 5.63968 14.171 5.78033 14.0303C5.92098 13.8897 6 13.6989 6 13.5C6 13.3011 5.92098 13.1103 5.78033 12.9697C5.63968 12.829 5.44891 12.75 5.25 12.75H3.30656C4.27406 9.10688 7.43156 6.3525 11.25 6.03188V8.25C11.25 8.44892 11.329 8.63968 11.4697 8.78033C11.6103 8.92099 11.8011 9 12 9C12.1989 9 12.3897 8.92099 12.5303 8.78033C12.671 8.63968 12.75 8.44892 12.75 8.25V6.03094C14.6106 6.18752 16.3767 6.9181 17.8042 8.12172C19.2316 9.32534 20.2501 10.9426 20.7188 12.75H18.75C18.5511 12.75 18.3603 12.829 18.2197 12.9697C18.079 13.1103 18 13.3011 18 13.5C18 13.6989 18.079 13.8897 18.2197 14.0303C18.3603 14.171 18.5511 14.25 18.75 14.25H20.9691C20.9888 14.4984 21 14.7478 21 15V17.25Z" />
+                                    </g>
+                                </svg>
+
+                                <div class="flex flex-col items-start flex-1 ml-3 space-y-1">
+                                    <span class="text-sm font-medium text-gray-800 truncate group-hover:text-white">
+                                        {{ menu.name }}
+                                    </span>
+                                    <span class="text-xs text-gray-500 group-hover:text-white">
+                                        {{ menu.path.replace('/home/', '') }}
+                                    </span>
+                                </div>
+                                <span
+                                    class="flex-none hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
+                                    Buka
+                                </span>
+                            </div>
+
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { readData, writeData } from '@/utils/storage'
+import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
+import { computed, onMounted, ref, watch } from 'vue'
+import { useCommandPalattesStore } from '@/stores/command'
+import { IconApp } from '@/utils/icons'
+import { useRouter, type RouteRecordRaw } from 'vue-router'
+import { routes, extractLeafRoutes } from '@/router'
+import { navigationIcon } from '@/utils/route';
+
+const command = useCommandPalattesStore()
+const route = useRouter()
+const recent = computed(() => query.value === '' ? command.readRecent() : [])
+const query = ref('')
+
+const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
+    const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+    return matchingRoutes
+}
+
+const filteredMenus = computed(() =>
+    query.value === ''
+        ? []
+        : searchRoutesByName(routes, query.value)
+)
+const onClose = () => command.open = false
+
+let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
+const onQueryChange = (value: string) => {
+    if (debounceTimeout) {
+        clearTimeout(debounceTimeout);
+    }
+    debounceTimeout = setTimeout(() => {
+        // check if value is empty or only spaces
+        if (value.trim() === '') {
+            query.value = ''
+            return
+        }
+        query.value = value
+    }, 300);
+}
+
+const openMenu = (menu: RouteRecordRaw) => {
+    command.addRecent(menu)
+    route.push(menu.path)
+    onClose()
+}
+
+</script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 7c6e81a..a9eb3ec 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,7 +4,7 @@ import { useAuthStore } from '@/stores/auth'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
-import EmptyPage from '@/components/Pages/HomeEmpty.vue'
+import WelcomePage from '@/components/Pages/Welcome.vue'
 import TestPage from '@/components/Pages/TestPage.vue'
 import qs from 'qs'
 import {
@@ -25,7 +25,7 @@ export const routes: RouteRecordRaw[] = [
       {
         path: '',
         name: 'Home Page',
-        component: EmptyPage,
+        component: WelcomePage,
       },
       {
         path: 'gangguan',
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 2c77c62..31049eb 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -10,7 +10,7 @@ import {
     Swap
 } from '@/utils/icons'
 
-const navigationIcon = [
+export const navigationIcon = [
     LightningSlash,
     SmileySad,
     Monitor,

From 474c32870abdfb4fd0f74dc8f09addced26718f5 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 13:12:11 +0700
Subject: [PATCH 10/20] remove mx-auto from title page

---
 src/components/Pages/MenuProvider.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index b0cbf7b..959b3d5 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -1,6 +1,6 @@
 <template>
     <main class="flex-1 px-2 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="pt-2 mx-auto max-w-7xl sm:pt-4 md:pt-6">
+        <div v-if="route.path !== '/home'" class="pt-2 max-w-7xl sm:pt-4 md:pt-6">
             <h1 class="text-lg font-medium md:text-2xl lg:text-3xl text-dark">{{ currentRouteName }}</h1>
         </div>
         <div class="mt-2 sm:mt-4 dx-viewport">

From f8aa37248750ad83a74f16af4621e3c43431eb07 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:24:46 +0700
Subject: [PATCH 11/20] change method to use svg icon

---
 src/components/icons/IconBox.vue            |  8 ++++++++
 src/components/icons/IconDotOutline.vue     | 10 ++++++++++
 src/components/icons/IconFileSearch.vue     |  7 +++++++
 src/components/icons/IconGauge.vue          | 10 ++++++++++
 src/components/icons/IconLightningSlash.vue |  7 +++++++
 src/components/icons/IconMonitor.vue        | 10 ++++++++++
 src/components/icons/IconPlugs.vue          | 10 ++++++++++
 src/components/icons/IconSmileySad.vue      | 10 ++++++++++
 src/components/icons/IconSwap.vue           | 10 ++++++++++
 src/components/icons/IconWallet.vue         |  8 ++++++++
 src/utils/icons.ts                          | 19 +++++++++++--------
 11 files changed, 101 insertions(+), 8 deletions(-)
 create mode 100644 src/components/icons/IconBox.vue
 create mode 100644 src/components/icons/IconDotOutline.vue
 create mode 100644 src/components/icons/IconFileSearch.vue
 create mode 100644 src/components/icons/IconGauge.vue
 create mode 100644 src/components/icons/IconLightningSlash.vue
 create mode 100644 src/components/icons/IconMonitor.vue
 create mode 100644 src/components/icons/IconPlugs.vue
 create mode 100644 src/components/icons/IconSmileySad.vue
 create mode 100644 src/components/icons/IconSwap.vue
 create mode 100644 src/components/icons/IconWallet.vue

diff --git a/src/components/icons/IconBox.vue b/src/components/icons/IconBox.vue
new file mode 100644
index 0000000..df77d9e
--- /dev/null
+++ b/src/components/icons/IconBox.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2"
+            d="M12 12.1022V21.75C11.874 21.7494 11.7502 21.7172 11.64 21.6562L3.39 17.1393C3.2722 17.0749 3.17386 16.98 3.10526 16.8646C3.03666 16.7491 3.0003 16.6174 3 16.4831V7.51685C3.0003 7.41181 3.02266 7.308 3.06563 7.21216L12 12.1022Z" />
+        <path
+            d="M20.97 6.20158L12.72 1.68752C12.4996 1.56572 12.2518 1.50183 12 1.50183C11.7482 1.50183 11.5004 1.56572 11.28 1.68752L3.03 6.20345C2.7944 6.33237 2.59772 6.52217 2.46052 6.75304C2.32331 6.98391 2.25061 7.24739 2.25 7.51595V16.4822C2.25061 16.7508 2.32331 17.0142 2.46052 17.2451C2.59772 17.476 2.7944 17.6658 3.03 17.7947L11.28 22.3106C11.5004 22.4324 11.7482 22.4963 12 22.4963C12.2518 22.4963 12.4996 22.4324 12.72 22.3106L20.97 17.7947C21.2056 17.6658 21.4023 17.476 21.5395 17.2451C21.6767 17.0142 21.7494 16.7508 21.75 16.4822V7.51689C21.7499 7.24785 21.6774 6.98379 21.5402 6.75238C21.403 6.52096 21.206 6.33072 20.97 6.20158ZM12 3.00002L19.5319 7.12502L16.7409 8.65314L9.20813 4.52814L12 3.00002ZM12 11.25L4.46812 7.12502L7.64625 5.38502L15.1781 9.51002L12 11.25ZM3.75 8.43752L11.25 12.5419V20.5847L3.75 16.4831V8.43752ZM20.25 16.4794L12.75 20.5847V12.5456L15.75 10.9041V14.25C15.75 14.4489 15.829 14.6397 15.9697 14.7803C16.1103 14.921 16.3011 15 16.5 15C16.6989 15 16.8897 14.921 17.0303 14.7803C17.171 14.6397 17.25 14.4489 17.25 14.25V10.0828L20.25 8.43752V16.4785V16.4794Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconDotOutline.vue b/src/components/icons/IconDotOutline.vue
new file mode 100644
index 0000000..6b1f216
--- /dev/null
+++ b/src/components/icons/IconDotOutline.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <g id="DotOutline">
+            <path id="Vector" opacity="0.2"
+                d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z" />
+            <path id="Vector_2"
+                d="M8 6C7.60444 6 7.21776 6.1173 6.88886 6.33706C6.55996 6.55682 6.30362 6.86918 6.15224 7.23463C6.00087 7.60009 5.96126 8.00222 6.03843 8.39018C6.1156 8.77814 6.30608 9.13451 6.58579 9.41421C6.86549 9.69392 7.22186 9.8844 7.60982 9.96157C7.99778 10.0387 8.39992 9.99913 8.76537 9.84776C9.13082 9.69638 9.44318 9.44004 9.66294 9.11114C9.8827 8.78224 10 8.39556 10 8C10 7.46957 9.78929 6.96086 9.41421 6.58579C9.03914 6.21071 8.53043 6 8 6ZM8 9C7.80222 9 7.60888 8.94135 7.44443 8.83147C7.27998 8.72159 7.15181 8.56541 7.07612 8.38268C7.00043 8.19996 6.98063 7.99889 7.01922 7.80491C7.0578 7.61093 7.15304 7.43275 7.29289 7.29289C7.43275 7.15304 7.61093 7.0578 7.80491 7.01921C7.99889 6.98063 8.19996 7.00043 8.38268 7.07612C8.56541 7.15181 8.72159 7.27998 8.83147 7.44443C8.94135 7.60888 9 7.80222 9 8C9 8.26522 8.89464 8.51957 8.70711 8.70711C8.51957 8.89464 8.26522 9 8 9Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconFileSearch.vue b/src/components/icons/IconFileSearch.vue
new file mode 100644
index 0000000..d42b897
--- /dev/null
+++ b/src/components/icons/IconFileSearch.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2" d="M19.5 8.25H14.25V3L19.5 8.25Z" />
+        <path
+            d="M20.0306 7.71938L14.7806 2.46938C14.7109 2.39975 14.6282 2.34454 14.5371 2.3069C14.4461 2.26926 14.3485 2.24992 14.25 2.25H5.25C4.85218 2.25 4.47064 2.40804 4.18934 2.68934C3.90804 2.97064 3.75 3.35218 3.75 3.75V20.25C3.75 20.6478 3.90804 21.0294 4.18934 21.3107C4.47064 21.592 4.85218 21.75 5.25 21.75H18.75C19.1478 21.75 19.5294 21.592 19.8107 21.3107C20.092 21.0294 20.25 20.6478 20.25 20.25V8.25C20.2501 8.15148 20.2307 8.05391 20.1931 7.96286C20.1555 7.87182 20.1003 7.78908 20.0306 7.71938ZM15 4.81031L17.6897 7.5H15V4.81031ZM18.75 20.25H5.25V3.75H13.5V8.25C13.5 8.44891 13.579 8.63968 13.7197 8.78033C13.8603 8.92098 14.0511 9 14.25 9H18.75V20.25ZM14.4806 15.6703C14.9233 14.967 15.0912 14.1252 14.9524 13.3058C14.8137 12.4865 14.3779 11.747 13.7283 11.2286C13.0788 10.7102 12.261 10.4494 11.4313 10.4958C10.6016 10.5423 9.81804 10.8928 9.23042 11.4804C8.64279 12.068 8.29226 12.8516 8.24581 13.6813C8.19936 14.511 8.46024 15.3288 8.9786 15.9783C9.49697 16.6279 10.2365 17.0637 11.0558 17.2024C11.8752 17.3412 12.717 17.1733 13.4203 16.7306L14.4694 17.7806C14.5391 17.8503 14.6218 17.9056 14.7128 17.9433C14.8039 17.981 14.9015 18.0004 15 18.0004C15.0985 18.0004 15.1961 17.981 15.2872 17.9433C15.3782 17.9056 15.4609 17.8503 15.5306 17.7806C15.6003 17.7109 15.6556 17.6282 15.6933 17.5372C15.731 17.4461 15.7504 17.3485 15.7504 17.25C15.7504 17.1515 15.731 17.0539 15.6933 16.9628C15.6556 16.8718 15.6003 16.7891 15.5306 16.7194L14.4806 15.6703ZM9.75 13.875C9.75 13.5042 9.85997 13.1416 10.066 12.8333C10.272 12.525 10.5649 12.2846 10.9075 12.1427C11.2501 12.0008 11.6271 11.9637 11.9908 12.036C12.3545 12.1084 12.6886 12.287 12.9508 12.5492C13.213 12.8114 13.3916 13.1455 13.464 13.5092C13.5363 13.8729 13.4992 14.2499 13.3573 14.5925C13.2154 14.9351 12.975 15.228 12.6667 15.434C12.3584 15.64 11.9958 15.75 11.625 15.75C11.1277 15.75 10.6508 15.5525 10.2992 15.2008C9.94754 14.8492 9.75 14.3723 9.75 13.875Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconGauge.vue b/src/components/icons/IconGauge.vue
new file mode 100644
index 0000000..48b4627
--- /dev/null
+++ b/src/components/icons/IconGauge.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <g id="Gauge">
+            <path id="Vector" opacity="0.2"
+                d="M21.75 15V17.25C21.75 17.4489 21.671 17.6397 21.5303 17.7803C21.3897 17.921 21.1989 18 21 18H3C2.80109 18 2.61032 17.921 2.46967 17.7803C2.32902 17.6397 2.25 17.4489 2.25 17.25V15.1059C2.25 9.71719 6.57656 5.26875 11.9653 5.25C13.2486 5.24544 14.5202 5.49426 15.7071 5.9822C16.8941 6.47013 17.973 7.18759 18.882 8.09342C19.7911 8.99924 20.5124 10.0756 21.0045 11.2608C21.4967 12.446 21.75 13.7167 21.75 15Z" />
+            <path id="Vector_2"
+                d="M19.4119 7.56282C18.4397 6.58843 17.2842 5.81613 16.0121 5.29046C14.74 4.76478 13.3764 4.49614 12 4.5H11.9625C6.19406 4.51969 1.5 9.28125 1.5 15.1059V17.25C1.5 17.6478 1.65804 18.0294 1.93934 18.3107C2.22064 18.592 2.60218 18.75 3 18.75H21C21.3978 18.75 21.7794 18.592 22.0607 18.3107C22.342 18.0294 22.5 17.6478 22.5 17.25V15C22.5039 13.6175 22.2328 12.2481 21.7027 10.9713C21.1725 9.69457 20.3938 8.53594 19.4119 7.56282ZM21 17.25H11.2228L16.3566 10.1906C16.4737 10.0298 16.5221 9.82895 16.4911 9.63239C16.4602 9.43583 16.3524 9.25961 16.1916 9.1425C16.0307 9.02539 15.8299 8.97699 15.6333 9.00793C15.4368 9.03887 15.2605 9.14663 15.1434 9.3075L9.3675 17.25H3V15.1059C3 14.8172 3.01406 14.5322 3.04031 14.25H5.25C5.44891 14.25 5.63968 14.171 5.78033 14.0303C5.92098 13.8897 6 13.6989 6 13.5C6 13.3011 5.92098 13.1103 5.78033 12.9697C5.63968 12.829 5.44891 12.75 5.25 12.75H3.30656C4.27406 9.10688 7.43156 6.3525 11.25 6.03188V8.25C11.25 8.44892 11.329 8.63968 11.4697 8.78033C11.6103 8.92099 11.8011 9 12 9C12.1989 9 12.3897 8.92099 12.5303 8.78033C12.671 8.63968 12.75 8.44892 12.75 8.25V6.03094C14.6106 6.18752 16.3767 6.9181 17.8042 8.12172C19.2316 9.32534 20.2501 10.9426 20.7188 12.75H18.75C18.5511 12.75 18.3603 12.829 18.2197 12.9697C18.079 13.1103 18 13.3011 18 13.5C18 13.6989 18.079 13.8897 18.2197 14.0303C18.3603 14.171 18.5511 14.25 18.75 14.25H20.9691C20.9888 14.4984 21 14.7478 21 15V17.25Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconLightningSlash.vue b/src/components/icons/IconLightningSlash.vue
new file mode 100644
index 0000000..2930beb
--- /dev/null
+++ b/src/components/icons/IconLightningSlash.vue
@@ -0,0 +1,7 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2" d="M9 22.5L10.5 15L4.5 12.75L15 1.5L13.5 9L19.5 11.25L9 22.5Z" />
+        <path
+            d="M5.05519 3.24562C4.98932 3.17137 4.90938 3.11094 4.81999 3.06782C4.7306 3.0247 4.63354 2.99975 4.53443 2.99442C4.43533 2.98909 4.33615 3.00348 4.24265 3.03676C4.14915 3.07004 4.06318 3.12155 3.98973 3.1883C3.91628 3.25505 3.85681 3.33571 3.81477 3.42561C3.77272 3.51552 3.74894 3.61287 3.74479 3.71203C3.74065 3.81119 3.75623 3.91019 3.79063 4.00329C3.82503 4.09638 3.87756 4.18172 3.94519 4.25437L7.62488 8.30249L3.95175 12.24C3.86647 12.3299 3.80478 12.4394 3.77219 12.559C3.73959 12.6785 3.73711 12.8042 3.76497 12.9249C3.79283 13.0456 3.85015 13.1576 3.93182 13.2507C4.01349 13.3439 4.11697 13.4153 4.233 13.4587L9.63581 15.4847L8.26519 22.3528C8.23407 22.5125 8.25574 22.6781 8.32694 22.8244C8.39815 22.9707 8.51501 23.0899 8.6599 23.164C8.80479 23.2381 8.96985 23.263 9.13016 23.2351C9.29048 23.2071 9.43736 23.1278 9.54863 23.0091L15.348 16.7953L18.9452 20.7516C19.0111 20.8258 19.091 20.8862 19.1804 20.9294C19.2698 20.9725 19.3668 20.9974 19.4659 21.0028C19.5651 21.0081 19.6642 20.9937 19.7577 20.9604C19.8512 20.9271 19.9372 20.8756 20.0106 20.8089C20.0841 20.7421 20.1436 20.6615 20.1856 20.5716C20.2277 20.4817 20.2514 20.3843 20.2556 20.2851C20.2597 20.186 20.2441 20.087 20.2097 19.9939C20.1753 19.9008 20.1228 19.8154 20.0552 19.7428L5.05519 3.24562ZM10.2536 20.0625L11.2352 15.1519C11.2703 14.9777 11.2425 14.7967 11.1566 14.6412C11.0708 14.4856 10.9325 14.3656 10.7664 14.3025L5.81269 12.4416L8.63644 9.41624L14.3346 15.6844L10.2536 20.0625ZM10.1871 6.65624C10.115 6.58904 10.0569 6.50829 10.0161 6.41863C9.97526 6.32896 9.9525 6.23213 9.9491 6.13366C9.94571 6.0352 9.96175 5.93702 9.9963 5.84476C10.0309 5.75249 10.0833 5.66794 10.1505 5.59593L14.4518 0.987181C14.563 0.868433 14.7099 0.789097 14.8702 0.761147C15.0305 0.733196 15.1956 0.758146 15.3405 0.832232C15.4854 0.906318 15.6022 1.02552 15.6734 1.17185C15.7446 1.31818 15.7663 1.4837 15.7352 1.64343L14.3608 8.52187L19.7636 10.5478C19.8788 10.5915 19.9814 10.6629 20.0625 10.7557C20.1435 10.8485 20.2005 10.9598 20.2283 11.0798C20.2561 11.1998 20.2539 11.3248 20.2219 11.4438C20.1899 11.5627 20.1291 11.672 20.0449 11.7619L17.9543 14.0016C17.8176 14.1429 17.631 14.225 17.4344 14.2301C17.2379 14.2352 17.0473 14.1629 16.9035 14.0289C16.7597 13.8948 16.6743 13.7096 16.6657 13.5132C16.6571 13.3168 16.7259 13.1249 16.8574 12.9787L18.1877 11.5584L13.2377 9.70218C13.0716 9.63906 12.9333 9.51904 12.8475 9.36349C12.7616 9.20794 12.7338 9.02696 12.7689 8.85281L13.7505 3.94218L11.2502 6.62062C11.1829 6.69302 11.1019 6.75139 11.012 6.79239C10.922 6.83339 10.8248 6.8562 10.726 6.85951C10.6272 6.86282 10.5288 6.84657 10.4363 6.81168C10.3438 6.7768 10.2591 6.72397 10.1871 6.65624Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconMonitor.vue b/src/components/icons/IconMonitor.vue
new file mode 100644
index 0000000..0edec15
--- /dev/null
+++ b/src/components/icons/IconMonitor.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="Monitor">
+            <path id="Vector" opacity="0.2"
+                d="M21 6V16.5C21 16.8978 20.842 17.2794 20.5607 17.5607C20.2794 17.842 19.8978 18 19.5 18H4.5C4.10218 18 3.72064 17.842 3.43934 17.5607C3.15804 17.2794 3 16.8978 3 16.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6Z" />
+            <path id="Vector_2"
+                d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconPlugs.vue b/src/components/icons/IconPlugs.vue
new file mode 100644
index 0000000..b6b0c90
--- /dev/null
+++ b/src/components/icons/IconPlugs.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="Plugs">
+            <path id="Vector" opacity="0.2"
+                d="M7.12508 11.625L12.3751 16.875L9.65633 19.5937C9.23438 20.0157 8.66211 20.2527 8.06539 20.2527C7.46868 20.2527 6.89641 20.0157 6.47446 19.5937L4.40633 17.5228C3.98527 17.101 3.74878 16.5293 3.74878 15.9333C3.74878 15.3373 3.98527 14.7656 4.40633 14.3437L7.12508 11.625ZM19.5938 6.47718L17.5229 4.40625C17.1011 3.98518 16.5294 3.7487 15.9334 3.7487C15.3373 3.7487 14.7657 3.98518 14.3438 4.40625L11.6251 7.125L16.8751 12.375L19.5938 9.65625C20.0149 9.23441 20.2514 8.66274 20.2514 8.06672C20.2514 7.47069 20.0149 6.89902 19.5938 6.47718Z" />
+            <path id="Vector_2"
+                d="M14.0306 12.9694C13.9609 12.8996 13.8782 12.8443 13.7871 12.8066C13.6961 12.7688 13.5985 12.7494 13.4999 12.7494C13.4014 12.7494 13.3038 12.7688 13.2127 12.8066C13.1217 12.8443 13.039 12.8996 12.9693 12.9694L11.2499 14.6897L9.31024 12.75L11.0306 11.0306C11.1713 10.8899 11.2503 10.699 11.2503 10.5C11.2503 10.301 11.1713 10.1101 11.0306 9.96938C10.8898 9.82865 10.699 9.74959 10.4999 9.74959C10.3009 9.74959 10.11 9.82865 9.9693 9.96938L8.24993 11.6897L6.53055 9.96938C6.38982 9.82865 6.19895 9.74959 5.99993 9.74959C5.80091 9.74959 5.61003 9.82865 5.4693 9.96938C5.32857 10.1101 5.24951 10.301 5.24951 10.5C5.24951 10.699 5.32857 10.8899 5.4693 11.0306L6.06462 11.625L3.87837 13.8103C3.59972 14.0889 3.37868 14.4196 3.22787 14.7837C3.07706 15.1477 2.99944 15.5379 2.99944 15.9319C2.99944 16.3259 3.07706 16.7161 3.22787 17.0801C3.37868 17.4441 3.59972 17.7749 3.87837 18.0534L4.38274 18.5569L1.7193 21.2194C1.64962 21.2891 1.59435 21.3718 1.55663 21.4628C1.51892 21.5539 1.49951 21.6515 1.49951 21.75C1.49951 21.8485 1.51892 21.9461 1.55663 22.0372C1.59435 22.1282 1.64962 22.2109 1.7193 22.2806C1.86003 22.4214 2.05091 22.5004 2.24993 22.5004C2.34847 22.5004 2.44606 22.481 2.5371 22.4433C2.62815 22.4056 2.71087 22.3503 2.78055 22.2806L5.44305 19.6172L5.94649 20.1216C6.22508 20.4002 6.55582 20.6213 6.91984 20.7721C7.28387 20.9229 7.67403 21.0005 8.06805 21.0005C8.46208 21.0005 8.85224 20.9229 9.21626 20.7721C9.58028 20.6213 9.91103 20.4002 10.1896 20.1216L12.3749 17.9353L12.9693 18.5306C13.039 18.6003 13.1217 18.6556 13.2128 18.6933C13.3038 18.731 13.4014 18.7504 13.4999 18.7504C13.5985 18.7504 13.6961 18.731 13.7871 18.6933C13.8781 18.6556 13.9609 18.6003 14.0306 18.5306C14.1002 18.4609 14.1555 18.3782 14.1932 18.2872C14.2309 18.1961 14.2503 18.0985 14.2503 18C14.2503 17.9015 14.2309 17.8039 14.1932 17.7128C14.1555 17.6218 14.1002 17.5391 14.0306 17.4694L12.3102 15.75L14.0306 14.0306C14.1003 13.961 14.1556 13.8783 14.1933 13.7872C14.2311 13.6962 14.2505 13.5986 14.2505 13.5C14.2505 13.4014 14.2311 13.3038 14.1933 13.2128C14.1556 13.1217 14.1003 13.039 14.0306 12.9694ZM9.12837 19.0631C8.84709 19.3442 8.46571 19.5021 8.06805 19.5021C7.6704 19.5021 7.28902 19.3442 7.00774 19.0631L4.93962 16.9922C4.65852 16.7109 4.50062 16.3295 4.50062 15.9319C4.50062 15.5342 4.65852 15.1528 4.93962 14.8716L7.12493 12.6853L11.3146 16.875L9.12837 19.0631ZM22.2806 1.71938C22.2109 1.64965 22.1282 1.59433 22.0371 1.55658C21.9461 1.51884 21.8485 1.49941 21.7499 1.49941C21.6514 1.49941 21.5538 1.51884 21.4627 1.55658C21.3717 1.59433 21.289 1.64965 21.2193 1.71938L18.5568 4.38282L18.0534 3.87844C17.4901 3.31683 16.7272 3.00146 15.9318 3.00146C15.1364 3.00146 14.3735 3.31683 13.8102 3.87844L11.6249 6.06469L11.0306 5.46938C10.8898 5.32865 10.699 5.24959 10.4999 5.24959C10.3009 5.24959 10.11 5.32865 9.9693 5.46938C9.82857 5.61011 9.74951 5.80098 9.74951 6C9.74951 6.19903 9.82857 6.3899 9.9693 6.53063L17.4693 14.0306C17.539 14.1003 17.6217 14.1556 17.7128 14.1933C17.8038 14.231 17.9014 14.2504 17.9999 14.2504C18.0985 14.2504 18.1961 14.231 18.2871 14.1933C18.3781 14.1556 18.4609 14.1003 18.5306 14.0306C18.6002 13.9609 18.6555 13.8782 18.6932 13.7872C18.7309 13.6961 18.7503 13.5985 18.7503 13.5C18.7503 13.4015 18.7309 13.3039 18.6932 13.2128C18.6555 13.1218 18.6002 13.0391 18.5306 12.9694L17.9352 12.375L20.1215 10.1897C20.4001 9.91111 20.6212 9.58036 20.772 9.21634C20.9228 8.85231 21.0004 8.46215 21.0004 8.06813C21.0004 7.6741 20.9228 7.28394 20.772 6.91992C20.6212 6.5559 20.4001 6.22515 20.1215 5.94657L19.6171 5.44313L22.2806 2.78063C22.3503 2.71097 22.4056 2.62826 22.4433 2.53721C22.4811 2.44616 22.5005 2.34856 22.5005 2.25C22.5005 2.15144 22.4811 2.05385 22.4433 1.9628C22.4056 1.87175 22.3503 1.78903 22.2806 1.71938ZM19.0602 9.12563L16.8749 11.3147L12.6852 7.125L14.8715 4.93969C15.1528 4.6586 15.5342 4.5007 15.9318 4.5007C16.3295 4.5007 16.7108 4.6586 16.9921 4.93969L19.0602 7.00219C19.2003 7.14157 19.3114 7.30723 19.3872 7.48968C19.463 7.67212 19.5021 7.86774 19.5021 8.06532C19.5021 8.26289 19.463 8.45851 19.3872 8.64095C19.3114 8.8234 19.2003 8.98906 19.0602 9.12844V9.12563Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconSmileySad.vue b/src/components/icons/IconSmileySad.vue
new file mode 100644
index 0000000..96abaa3
--- /dev/null
+++ b/src/components/icons/IconSmileySad.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="SmileySad">
+            <path id="Vector" opacity="0.2"
+                d="M21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.387 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" />
+            <path id="Vector_2"
+                d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM7.5 10.125C7.5 9.9025 7.56598 9.68499 7.6896 9.49998C7.81322 9.31498 7.98892 9.17078 8.19449 9.08564C8.40005 9.00049 8.62625 8.97821 8.84448 9.02162C9.06271 9.06502 9.26317 9.17217 9.4205 9.3295C9.57783 9.48684 9.68498 9.68729 9.72839 9.90552C9.7718 10.1238 9.74952 10.35 9.66437 10.5555C9.57922 10.7611 9.43503 10.9368 9.25002 11.0604C9.06502 11.184 8.84751 11.25 8.625 11.25C8.32664 11.25 8.04049 11.1315 7.82951 10.9205C7.61853 10.7095 7.5 10.4234 7.5 10.125ZM16.5 10.125C16.5 10.3475 16.434 10.565 16.3104 10.75C16.1868 10.935 16.0111 11.0792 15.8055 11.1644C15.6 11.2495 15.3738 11.2718 15.1555 11.2284C14.9373 11.185 14.7368 11.0778 14.5795 10.9205C14.4222 10.7632 14.315 10.5627 14.2716 10.3445C14.2282 10.1262 14.2505 9.90005 14.3356 9.69448C14.4208 9.48891 14.565 9.31321 14.75 9.1896C14.935 9.06598 15.1525 9 15.375 9C15.6734 9 15.9595 9.11853 16.1705 9.3295C16.3815 9.54048 16.5 9.82663 16.5 10.125ZM16.3988 16.125C16.453 16.2104 16.4895 16.3058 16.5059 16.4056C16.5223 16.5054 16.5183 16.6075 16.4943 16.7058C16.4702 16.804 16.4265 16.8964 16.3658 16.9773C16.3052 17.0583 16.2287 17.1261 16.1412 17.1767C16.0536 17.2273 15.9567 17.2597 15.8563 17.2719C15.7558 17.2841 15.654 17.2758 15.5569 17.2477C15.4597 17.2195 15.3693 17.1719 15.291 17.1079C15.2127 17.0438 15.1481 16.9646 15.1013 16.875C14.4009 15.6647 13.3003 15 12 15C10.6997 15 9.59907 15.6656 8.89875 16.875C8.85187 16.9646 8.78734 17.0438 8.70904 17.1079C8.63074 17.1719 8.5403 17.2195 8.44316 17.2477C8.34601 17.2758 8.24417 17.2841 8.14375 17.2719C8.04334 17.2597 7.94643 17.2273 7.85886 17.1767C7.77128 17.1261 7.69485 17.0583 7.63417 16.9773C7.57348 16.8964 7.52979 16.804 7.50573 16.7058C7.48166 16.6075 7.47772 16.5054 7.49413 16.4056C7.51055 16.3058 7.54699 16.2104 7.60125 16.125C8.56594 14.4572 10.1691 13.5 12 13.5C13.8309 13.5 15.4341 14.4563 16.3988 16.125Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconSwap.vue b/src/components/icons/IconSwap.vue
new file mode 100644
index 0000000..f16a4a9
--- /dev/null
+++ b/src/components/icons/IconSwap.vue
@@ -0,0 +1,10 @@
+<template>
+    <svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g id="Swap">
+            <path id="Vector" opacity="0.2"
+                d="M20.25 4.5V14.25C20.25 14.4489 20.171 14.6397 20.0303 14.7803C19.8897 14.921 19.6989 15 19.5 15H15.75V19.5C15.75 19.6989 15.671 19.8897 15.5303 20.0303C15.3897 20.171 15.1989 20.25 15 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25V4.5C8.25 4.30109 8.32902 4.11032 8.46967 3.96967C8.61032 3.82902 8.80109 3.75 9 3.75H19.5C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5Z" />
+            <path id="Vector_2"
+                d="M21 4.5V14.25C21 14.6478 20.842 15.0294 20.5607 15.3107C20.2794 15.592 19.8978 15.75 19.5 15.75H9.31031L10.2806 16.7194C10.3503 16.7891 10.4056 16.8718 10.4433 16.9628C10.481 17.0539 10.5004 17.1515 10.5004 17.25C10.5004 17.3485 10.481 17.4461 10.4433 17.5372C10.4056 17.6282 10.3503 17.7109 10.2806 17.7806C10.2109 17.8503 10.1282 17.9056 10.0372 17.9433C9.94613 17.981 9.84855 18.0004 9.75 18.0004C9.65145 18.0004 9.55387 17.981 9.46283 17.9433C9.37178 17.9056 9.28906 17.8503 9.21937 17.7806L6.96937 15.5306C6.89964 15.461 6.84432 15.3783 6.80658 15.2872C6.76884 15.1962 6.74941 15.0986 6.74941 15C6.74941 14.9014 6.76884 14.8038 6.80658 14.7128C6.84432 14.6217 6.89964 14.539 6.96937 14.4694L9.21937 12.2194C9.36011 12.0786 9.55098 11.9996 9.75 11.9996C9.94902 11.9996 10.1399 12.0786 10.2806 12.2194C10.4214 12.3601 10.5004 12.551 10.5004 12.75C10.5004 12.949 10.4214 13.1399 10.2806 13.2806L9.31031 14.25H19.5V4.5H9V5.25C9 5.44891 8.92098 5.63968 8.78033 5.78033C8.63968 5.92098 8.44891 6 8.25 6C8.05109 6 7.86032 5.92098 7.71967 5.78033C7.57902 5.63968 7.5 5.44891 7.5 5.25V4.5C7.5 4.10218 7.65804 3.72064 7.93934 3.43934C8.22064 3.15804 8.60218 3 9 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5ZM15.75 18C15.5511 18 15.3603 18.079 15.2197 18.2197C15.079 18.3603 15 18.5511 15 18.75V19.5H4.5V9.75H14.6897L13.7194 10.7194C13.5786 10.8601 13.4996 11.051 13.4996 11.25C13.4996 11.449 13.5786 11.6399 13.7194 11.7806C13.8601 11.9214 14.051 12.0004 14.25 12.0004C14.449 12.0004 14.6399 11.9214 14.7806 11.7806L17.0306 9.53063C17.1004 9.46097 17.1557 9.37825 17.1934 9.28721C17.2312 9.19616 17.2506 9.09856 17.2506 9C17.2506 8.90144 17.2312 8.80384 17.1934 8.71279C17.1557 8.62175 17.1004 8.53903 17.0306 8.46937L14.7806 6.21937C14.6399 6.07864 14.449 5.99958 14.25 5.99958C14.051 5.99958 13.8601 6.07864 13.7194 6.21937C13.5786 6.36011 13.4996 6.55098 13.4996 6.75C13.4996 6.94902 13.5786 7.13989 13.7194 7.28063L14.6897 8.25H4.5C4.10218 8.25 3.72064 8.40804 3.43934 8.68934C3.15804 8.97064 3 9.35218 3 9.75V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H15C15.3978 21 15.7794 20.842 16.0607 20.5607C16.342 20.2794 16.5 19.8978 16.5 19.5V18.75C16.5 18.5511 16.421 18.3603 16.2803 18.2197C16.1397 18.079 15.9489 18 15.75 18Z" />
+        </g>
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/components/icons/IconWallet.vue b/src/components/icons/IconWallet.vue
new file mode 100644
index 0000000..40798e7
--- /dev/null
+++ b/src/components/icons/IconWallet.vue
@@ -0,0 +1,8 @@
+<template>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path opacity="0.2"
+            d="M21 8.25V18.75C21 18.9489 20.921 19.1397 20.7803 19.2803C20.6397 19.421 20.4489 19.5 20.25 19.5H5.25C4.85218 19.5 4.47064 19.342 4.18934 19.0607C3.90804 18.7794 3.75 18.3978 3.75 18V6C3.75 6.39782 3.90804 6.77936 4.18934 7.06066C4.47064 7.34196 4.85218 7.5 5.25 7.5H20.25C20.4489 7.5 20.6397 7.57902 20.7803 7.71967C20.921 7.86032 21 8.05109 21 8.25Z" />
+        <path
+            d="M20.25 6.75H5.25C5.05109 6.75 4.86032 6.67098 4.71967 6.53033C4.57902 6.38968 4.5 6.19891 4.5 6C4.5 5.80109 4.57902 5.61032 4.71967 5.46967C4.86032 5.32902 5.05109 5.25 5.25 5.25H18C18.1989 5.25 18.3897 5.17098 18.5303 5.03033C18.671 4.88968 18.75 4.69891 18.75 4.5C18.75 4.30109 18.671 4.11032 18.5303 3.96967C18.3897 3.82902 18.1989 3.75 18 3.75H5.25C4.65326 3.75 4.08097 3.98705 3.65901 4.40901C3.23705 4.83097 3 5.40326 3 6V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V8.25C21.75 7.85218 21.592 7.47064 21.3107 7.18934C21.0294 6.90804 20.6478 6.75 20.25 6.75ZM20.25 18.75H5.25C5.05109 18.75 4.86032 18.671 4.71967 18.5303C4.57902 18.3897 4.5 18.1989 4.5 18V8.12156C4.74082 8.20693 4.9945 8.25037 5.25 8.25H20.25V18.75ZM15.75 13.125C15.75 12.9025 15.816 12.685 15.9396 12.5C16.0632 12.315 16.2389 12.1708 16.4445 12.0856C16.65 12.0005 16.8762 11.9782 17.0945 12.0216C17.3127 12.065 17.5132 12.1722 17.6705 12.3295C17.8278 12.4868 17.935 12.6873 17.9784 12.9055C18.0218 13.1238 17.9995 13.35 17.9144 13.5555C17.8292 13.7611 17.685 13.9368 17.5 14.0604C17.315 14.184 17.0975 14.25 16.875 14.25C16.5766 14.25 16.2905 14.1315 16.0795 13.9205C15.8685 13.7095 15.75 13.4234 15.75 13.125Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index e237815..7409a00 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -1,10 +1,13 @@
 // png
 export { default as IconApp } from '@/assets/images/pln-with-text.png'
-// svg
-export { default as LightningSlash } from '@/assets/icons/lightning-slash.svg'
-export { default as SmileySad } from '@/assets/icons/smiley-sad.svg'
-export { default as Monitor } from '@/assets/icons/monitor.svg'
-export { default as Swap } from '@/assets/icons/swap.svg'
-export { default as DotOutline } from '@/assets/icons/dot-outline.svg'
-export { default as Plugs } from '@/assets/icons/plugs.svg'
-export { default as Gauge } from '@/assets/icons/gauge.svg'
+// Svg with Vue component
+export { default as IconLightningSlash } from '@/components/icons/IconLightningSlash.vue'
+export { default as IconSmileySad } from '@/components/icons/IconSmileySad.vue'
+export { default as IconMonitor } from '@/components/icons/IconMonitor.vue'
+export { default as IconSwap } from '@/components/icons/IconSwap.vue'
+export { default as IconDotOutline } from '@/components/icons/IconDotOutline.vue'
+export { default as IconPlugs } from '@/components/icons/IconPlugs.vue'
+export { default as IconGauge } from '@/components/icons/IconGauge.vue'
+export { default as IconBox } from '@/components/icons/IconBox.vue'
+export { default as IconFileSearch } from '@/components/icons/IconFileSearch.vue'
+export { default as IconWallet } from '@/components/icons/IconWallet.vue'

From bcfa85cd32b93a6d1cb29f986765e02b4181e3e3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:25:16 +0700
Subject: [PATCH 12/20] update for recent page list

---
 src/components/CommandPalettes.vue | 33 +++++++------
 src/components/Pages/Welcome.vue   | 75 +++++++-----------------------
 2 files changed, 38 insertions(+), 70 deletions(-)

diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index 6956a51..8b1ebfa 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -34,26 +34,33 @@
                                             :key="menu.path" v-slot="{ active }">
                                             <li @click="openMenu(menu)"
                                                 :class="['flex flex-row cursor-pointer select-none items-center rounded-md px-3 py-2', active && 'bg-gray-900 bg-opacity-5 text-gray-900']">
-                                                <img v-if="menu.path.includes('/gangguan/')" :src="navigationIcon[0]"
+                                                <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
                                                     alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
-                                                <img v-else-if="menu.path.includes('/keluhan/')" :src="navigationIcon[1]"
-                                                    alt="icon"
+                                                <component v-else-if="menu.path.includes('/keluhan/')"
+                                                    :is="navigationIcon[1]" alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
-                                                <img v-else-if="menu.path.includes('/monalisa/')" :src="navigationIcon[2]"
-                                                    alt="icon"
+                                                <component v-else-if="menu.path.includes('/monalisa/')"
+                                                    :is="navigationIcon[2]" alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
-                                                <img v-else-if="menu.path.includes('/check-in-out/')"
-                                                    :src="navigationIcon[3]" alt="icon"
+                                                <component v-else-if="menu.path.includes('/check-in-out/')"
+                                                    :is="navigationIcon[3]" alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
-                                                <img v-else-if="menu.path.includes('/anomali-pengaduan/')"
-                                                    :src="navigationIcon[4]" alt="icon"
+                                                <component v-else-if="menu.path.includes('/anomali-pengaduan/')"
+                                                    :is="navigationIcon[4]" alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
-                                                <img v-else :src="navigationIcon[5]" alt="icon"
+                                                <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
+                                                    :is="navigationIcon[5]" alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
-                                                <!-- <DocumentTextIcon
-                                                    :class="['h-6 w-6 flex-none text-gray-900 text-opacity-40', active && 'text-opacity-100']"
-                                                    aria-hidden="true" /> -->
+                                                <component v-else-if="menu.path.includes('/material/')"
+                                                    :is="navigationIcon[6]" alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <component v-else-if="menu.path.includes('/transaksi/')"
+                                                    :is="navigationIcon[7]" alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+                                                <component v-else :is="navigationIcon[8]" alt="icon"
+                                                    :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
+
                                                 <div class="flex flex-col flex-auto ml-3 space-y-1">
                                                     <span class="text-sm font-medium text-gray-800 truncate">
                                                         {{ menu.name }}
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
index db8eaf9..c768861 100644
--- a/src/components/Pages/Welcome.vue
+++ b/src/components/Pages/Welcome.vue
@@ -19,63 +19,24 @@
                         <div @click="openMenu(menu)" class="group">
                             <div
                                 class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
-
-                                <svg v-if="menu.path.includes('/gangguan/')"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="32" height="32"
-                                    viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path opacity="0.2" d="M12 30L14 20L6 17L20 2L18 12L26 15L12 30Z" />
-                                    <path
-                                        d="M6.73976 4.32749C6.65194 4.2285 6.54535 4.14792 6.42616 4.09043C6.30697 4.03294 6.17756 3.99967 6.04542 3.99256C5.91328 3.98545 5.78104 4.00464 5.65637 4.04902C5.53171 4.09339 5.41708 4.16207 5.31915 4.25106C5.22122 4.34006 5.14193 4.44761 5.08587 4.56748C5.02981 4.68735 4.99809 4.81716 4.99257 4.94937C4.98705 5.08159 5.00782 5.21359 5.05369 5.33771C5.09955 5.46184 5.1696 5.57563 5.25976 5.67249L10.166 11.07L5.26851 16.32C5.15481 16.4398 5.07255 16.5859 5.02909 16.7453C4.98563 16.9046 4.98233 17.0723 5.01947 17.2332C5.05661 17.3942 5.13305 17.5434 5.24194 17.6676C5.35084 17.7918 5.4888 17.8871 5.64351 17.945L12.8473 20.6462L11.0198 29.8037C10.9783 30.0167 11.0072 30.2374 11.1021 30.4325C11.197 30.6276 11.3529 30.7866 11.546 30.8853C11.7392 30.9841 11.9593 31.0174 12.1731 30.9801C12.3868 30.9429 12.5827 30.8371 12.731 30.6787L20.4635 22.3937L25.2598 27.6687C25.3476 27.7677 25.4542 27.8483 25.5734 27.9058C25.6926 27.9633 25.822 27.9966 25.9541 28.0037C26.0862 28.0108 26.2185 27.9916 26.3432 27.9472C26.4678 27.9028 26.5824 27.8342 26.6804 27.7452C26.7783 27.6562 26.8576 27.5486 26.9137 27.4287C26.9697 27.3089 27.0014 27.1791 27.007 27.0469C27.0125 26.9146 26.9917 26.7826 26.9458 26.6585C26.9 26.5344 26.8299 26.4206 26.7398 26.3237L6.73976 4.32749ZM13.671 26.75L14.9798 20.2025C15.0266 19.9703 14.9895 19.729 14.875 19.5216C14.7606 19.3142 14.5762 19.1541 14.3548 19.07L7.74976 16.5887L11.5148 12.555L19.1123 20.9125L13.671 26.75ZM13.5823 8.87499C13.4862 8.78538 13.4087 8.67772 13.3543 8.55817C13.2999 8.43861 13.2695 8.3095 13.265 8.17822C13.2605 8.04693 13.2818 7.91603 13.3279 7.79301C13.374 7.66999 13.4439 7.55725 13.5335 7.46124L19.2685 1.31624C19.4169 1.15791 19.6127 1.05213 19.8265 1.01486C20.0402 0.977594 20.2603 1.01086 20.4535 1.10964C20.6467 1.20842 20.8025 1.36736 20.8974 1.56247C20.9924 1.75758 21.0213 1.97827 20.9798 2.19124L19.1473 11.3625L26.351 14.0637C26.5046 14.122 26.6414 14.2172 26.7495 14.3409C26.8575 14.4646 26.9334 14.613 26.9705 14.773C27.0076 14.9331 27.0047 15.0997 26.962 15.2583C26.9194 15.417 26.8383 15.5626 26.726 15.6825L23.9385 18.6687C23.7564 18.8572 23.5075 18.9666 23.2454 18.9734C22.9834 18.9803 22.7292 18.8839 22.5375 18.7052C22.3458 18.5264 22.2319 18.2795 22.2204 18.0176C22.2089 17.7558 22.3007 17.4999 22.476 17.305L24.2498 15.4112L17.6498 12.9362C17.4283 12.8521 17.244 12.6921 17.1295 12.4847C17.015 12.2773 16.9779 12.036 17.0248 11.8037L18.3335 5.25624L14.9998 8.82749C14.91 8.92402 14.8021 9.00186 14.6821 9.05652C14.5622 9.11119 14.4326 9.1416 14.3009 9.14602C14.1692 9.15043 14.0378 9.12876 13.9145 9.08224C13.7912 9.03573 13.6783 8.9653 13.5823 8.87499Z" />
-                                </svg>
-                                <svg v-else-if="menu.path.includes('/keluhan/')"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
-                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <g id="SmileySad">
-                                        <path id="Vector" opacity="0.2"
-                                            d="M21 12C21 13.78 20.4722 15.5201 19.4832 17.0001C18.4943 18.4802 17.0887 19.6337 15.4442 20.3149C13.7996 20.9961 11.99 21.1743 10.2442 20.8271C8.49836 20.4798 6.89472 19.6226 5.63604 18.364C4.37737 17.1053 3.5202 15.5016 3.17294 13.7558C2.82567 12.01 3.0039 10.2004 3.68509 8.55585C4.36628 6.91131 5.51983 5.50571 6.99987 4.51677C8.47991 3.52784 10.22 3 12 3C14.387 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z" />
-                                        <path id="Vector_2"
-                                            d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96451 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7661 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM7.5 10.125C7.5 9.9025 7.56598 9.68499 7.6896 9.49998C7.81322 9.31498 7.98892 9.17078 8.19449 9.08564C8.40005 9.00049 8.62625 8.97821 8.84448 9.02162C9.06271 9.06502 9.26317 9.17217 9.4205 9.3295C9.57783 9.48684 9.68498 9.68729 9.72839 9.90552C9.7718 10.1238 9.74952 10.35 9.66437 10.5555C9.57922 10.7611 9.43503 10.9368 9.25002 11.0604C9.06502 11.184 8.84751 11.25 8.625 11.25C8.32664 11.25 8.04049 11.1315 7.82951 10.9205C7.61853 10.7095 7.5 10.4234 7.5 10.125ZM16.5 10.125C16.5 10.3475 16.434 10.565 16.3104 10.75C16.1868 10.935 16.0111 11.0792 15.8055 11.1644C15.6 11.2495 15.3738 11.2718 15.1555 11.2284C14.9373 11.185 14.7368 11.0778 14.5795 10.9205C14.4222 10.7632 14.315 10.5627 14.2716 10.3445C14.2282 10.1262 14.2505 9.90005 14.3356 9.69448C14.4208 9.48891 14.565 9.31321 14.75 9.1896C14.935 9.06598 15.1525 9 15.375 9C15.6734 9 15.9595 9.11853 16.1705 9.3295C16.3815 9.54048 16.5 9.82663 16.5 10.125ZM16.3988 16.125C16.453 16.2104 16.4895 16.3058 16.5059 16.4056C16.5223 16.5054 16.5183 16.6075 16.4943 16.7058C16.4702 16.804 16.4265 16.8964 16.3658 16.9773C16.3052 17.0583 16.2287 17.1261 16.1412 17.1767C16.0536 17.2273 15.9567 17.2597 15.8563 17.2719C15.7558 17.2841 15.654 17.2758 15.5569 17.2477C15.4597 17.2195 15.3693 17.1719 15.291 17.1079C15.2127 17.0438 15.1481 16.9646 15.1013 16.875C14.4009 15.6647 13.3003 15 12 15C10.6997 15 9.59907 15.6656 8.89875 16.875C8.85187 16.9646 8.78734 17.0438 8.70904 17.1079C8.63074 17.1719 8.5403 17.2195 8.44316 17.2477C8.34601 17.2758 8.24417 17.2841 8.14375 17.2719C8.04334 17.2597 7.94643 17.2273 7.85886 17.1767C7.77128 17.1261 7.69485 17.0583 7.63417 16.9773C7.57348 16.8964 7.52979 16.804 7.50573 16.7058C7.48166 16.6075 7.47772 16.5054 7.49413 16.4056C7.51055 16.3058 7.54699 16.2104 7.60125 16.125C8.56594 14.4572 10.1691 13.5 12 13.5C13.8309 13.5 15.4341 14.4563 16.3988 16.125Z" />
-                                    </g>
-                                </svg>
-                                <svg v-else-if="menu.path.includes('/monalisa/')"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
-                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <g id="Monitor">
-                                        <path id="Vector" opacity="0.2"
-                                            d="M21 6V16.5C21 16.8978 20.842 17.2794 20.5607 17.5607C20.2794 17.842 19.8978 18 19.5 18H4.5C4.10218 18 3.72064 17.842 3.43934 17.5607C3.15804 17.2794 3 16.8978 3 16.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6Z" />
-                                        <path id="Vector_2"
-                                            d="M19.5 3.75H4.5C3.90326 3.75 3.33097 3.98705 2.90901 4.40901C2.48705 4.83097 2.25 5.40326 2.25 6V16.5C2.25 17.0967 2.48705 17.669 2.90901 18.091C3.33097 18.5129 3.90326 18.75 4.5 18.75H19.5C20.0967 18.75 20.669 18.5129 21.091 18.091C21.5129 17.669 21.75 17.0967 21.75 16.5V6C21.75 5.40326 21.5129 4.83097 21.091 4.40901C20.669 3.98705 20.0967 3.75 19.5 3.75ZM20.25 16.5C20.25 16.6989 20.171 16.8897 20.0303 17.0303C19.8897 17.171 19.6989 17.25 19.5 17.25H4.5C4.30109 17.25 4.11032 17.171 3.96967 17.0303C3.82902 16.8897 3.75 16.6989 3.75 16.5V6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6V16.5ZM15.75 21C15.75 21.1989 15.671 21.3897 15.5303 21.5303C15.3897 21.671 15.1989 21.75 15 21.75H9C8.80109 21.75 8.61032 21.671 8.46967 21.5303C8.32902 21.3897 8.25 21.1989 8.25 21C8.25 20.8011 8.32902 20.6103 8.46967 20.4697C8.61032 20.329 8.80109 20.25 9 20.25H15C15.1989 20.25 15.3897 20.329 15.5303 20.4697C15.671 20.6103 15.75 20.8011 15.75 21Z" />
-                                    </g>
-                                </svg>
-                                <svg v-else-if="menu.path.includes('/check-in-out/')"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
-                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <g id="Swap">
-                                        <path id="Vector" opacity="0.2"
-                                            d="M20.25 4.5V14.25C20.25 14.4489 20.171 14.6397 20.0303 14.7803C19.8897 14.921 19.6989 15 19.5 15H15.75V19.5C15.75 19.6989 15.671 19.8897 15.5303 20.0303C15.3897 20.171 15.1989 20.25 15 20.25H4.5C4.30109 20.25 4.11032 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V9.75C3.75 9.55109 3.82902 9.36032 3.96967 9.21967C4.11032 9.07902 4.30109 9 4.5 9H8.25V4.5C8.25 4.30109 8.32902 4.11032 8.46967 3.96967C8.61032 3.82902 8.80109 3.75 9 3.75H19.5C19.6989 3.75 19.8897 3.82902 20.0303 3.96967C20.171 4.11032 20.25 4.30109 20.25 4.5Z" />
-                                        <path id="Vector_2"
-                                            d="M21 4.5V14.25C21 14.6478 20.842 15.0294 20.5607 15.3107C20.2794 15.592 19.8978 15.75 19.5 15.75H9.31031L10.2806 16.7194C10.3503 16.7891 10.4056 16.8718 10.4433 16.9628C10.481 17.0539 10.5004 17.1515 10.5004 17.25C10.5004 17.3485 10.481 17.4461 10.4433 17.5372C10.4056 17.6282 10.3503 17.7109 10.2806 17.7806C10.2109 17.8503 10.1282 17.9056 10.0372 17.9433C9.94613 17.981 9.84855 18.0004 9.75 18.0004C9.65145 18.0004 9.55387 17.981 9.46283 17.9433C9.37178 17.9056 9.28906 17.8503 9.21937 17.7806L6.96937 15.5306C6.89964 15.461 6.84432 15.3783 6.80658 15.2872C6.76884 15.1962 6.74941 15.0986 6.74941 15C6.74941 14.9014 6.76884 14.8038 6.80658 14.7128C6.84432 14.6217 6.89964 14.539 6.96937 14.4694L9.21937 12.2194C9.36011 12.0786 9.55098 11.9996 9.75 11.9996C9.94902 11.9996 10.1399 12.0786 10.2806 12.2194C10.4214 12.3601 10.5004 12.551 10.5004 12.75C10.5004 12.949 10.4214 13.1399 10.2806 13.2806L9.31031 14.25H19.5V4.5H9V5.25C9 5.44891 8.92098 5.63968 8.78033 5.78033C8.63968 5.92098 8.44891 6 8.25 6C8.05109 6 7.86032 5.92098 7.71967 5.78033C7.57902 5.63968 7.5 5.44891 7.5 5.25V4.5C7.5 4.10218 7.65804 3.72064 7.93934 3.43934C8.22064 3.15804 8.60218 3 9 3H19.5C19.8978 3 20.2794 3.15804 20.5607 3.43934C20.842 3.72064 21 4.10218 21 4.5ZM15.75 18C15.5511 18 15.3603 18.079 15.2197 18.2197C15.079 18.3603 15 18.5511 15 18.75V19.5H4.5V9.75H14.6897L13.7194 10.7194C13.5786 10.8601 13.4996 11.051 13.4996 11.25C13.4996 11.449 13.5786 11.6399 13.7194 11.7806C13.8601 11.9214 14.051 12.0004 14.25 12.0004C14.449 12.0004 14.6399 11.9214 14.7806 11.7806L17.0306 9.53063C17.1004 9.46097 17.1557 9.37825 17.1934 9.28721C17.2312 9.19616 17.2506 9.09856 17.2506 9C17.2506 8.90144 17.2312 8.80384 17.1934 8.71279C17.1557 8.62175 17.1004 8.53903 17.0306 8.46937L14.7806 6.21937C14.6399 6.07864 14.449 5.99958 14.25 5.99958C14.051 5.99958 13.8601 6.07864 13.7194 6.21937C13.5786 6.36011 13.4996 6.55098 13.4996 6.75C13.4996 6.94902 13.5786 7.13989 13.7194 7.28063L14.6897 8.25H4.5C4.10218 8.25 3.72064 8.40804 3.43934 8.68934C3.15804 8.97064 3 9.35218 3 9.75V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H15C15.3978 21 15.7794 20.842 16.0607 20.5607C16.342 20.2794 16.5 19.8978 16.5 19.5V18.75C16.5 18.5511 16.421 18.3603 16.2803 18.2197C16.1397 18.079 15.9489 18 15.75 18Z" />
-                                    </g>
-                                </svg>
-                                <svg v-else-if="menu.path.includes('/anomali-pengaduan/')"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
-                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <g id="Plugs">
-                                        <path id="Vector" opacity="0.2"
-                                            d="M7.12508 11.625L12.3751 16.875L9.65633 19.5937C9.23438 20.0157 8.66211 20.2527 8.06539 20.2527C7.46868 20.2527 6.89641 20.0157 6.47446 19.5937L4.40633 17.5228C3.98527 17.101 3.74878 16.5293 3.74878 15.9333C3.74878 15.3373 3.98527 14.7656 4.40633 14.3437L7.12508 11.625ZM19.5938 6.47718L17.5229 4.40625C17.1011 3.98518 16.5294 3.7487 15.9334 3.7487C15.3373 3.7487 14.7657 3.98518 14.3438 4.40625L11.6251 7.125L16.8751 12.375L19.5938 9.65625C20.0149 9.23441 20.2514 8.66274 20.2514 8.06672C20.2514 7.47069 20.0149 6.89902 19.5938 6.47718Z" />
-                                        <path id="Vector_2"
-                                            d="M14.0306 12.9694C13.9609 12.8996 13.8782 12.8443 13.7871 12.8066C13.6961 12.7688 13.5985 12.7494 13.4999 12.7494C13.4014 12.7494 13.3038 12.7688 13.2127 12.8066C13.1217 12.8443 13.039 12.8996 12.9693 12.9694L11.2499 14.6897L9.31024 12.75L11.0306 11.0306C11.1713 10.8899 11.2503 10.699 11.2503 10.5C11.2503 10.301 11.1713 10.1101 11.0306 9.96938C10.8898 9.82865 10.699 9.74959 10.4999 9.74959C10.3009 9.74959 10.11 9.82865 9.9693 9.96938L8.24993 11.6897L6.53055 9.96938C6.38982 9.82865 6.19895 9.74959 5.99993 9.74959C5.80091 9.74959 5.61003 9.82865 5.4693 9.96938C5.32857 10.1101 5.24951 10.301 5.24951 10.5C5.24951 10.699 5.32857 10.8899 5.4693 11.0306L6.06462 11.625L3.87837 13.8103C3.59972 14.0889 3.37868 14.4196 3.22787 14.7837C3.07706 15.1477 2.99944 15.5379 2.99944 15.9319C2.99944 16.3259 3.07706 16.7161 3.22787 17.0801C3.37868 17.4441 3.59972 17.7749 3.87837 18.0534L4.38274 18.5569L1.7193 21.2194C1.64962 21.2891 1.59435 21.3718 1.55663 21.4628C1.51892 21.5539 1.49951 21.6515 1.49951 21.75C1.49951 21.8485 1.51892 21.9461 1.55663 22.0372C1.59435 22.1282 1.64962 22.2109 1.7193 22.2806C1.86003 22.4214 2.05091 22.5004 2.24993 22.5004C2.34847 22.5004 2.44606 22.481 2.5371 22.4433C2.62815 22.4056 2.71087 22.3503 2.78055 22.2806L5.44305 19.6172L5.94649 20.1216C6.22508 20.4002 6.55582 20.6213 6.91984 20.7721C7.28387 20.9229 7.67403 21.0005 8.06805 21.0005C8.46208 21.0005 8.85224 20.9229 9.21626 20.7721C9.58028 20.6213 9.91103 20.4002 10.1896 20.1216L12.3749 17.9353L12.9693 18.5306C13.039 18.6003 13.1217 18.6556 13.2128 18.6933C13.3038 18.731 13.4014 18.7504 13.4999 18.7504C13.5985 18.7504 13.6961 18.731 13.7871 18.6933C13.8781 18.6556 13.9609 18.6003 14.0306 18.5306C14.1002 18.4609 14.1555 18.3782 14.1932 18.2872C14.2309 18.1961 14.2503 18.0985 14.2503 18C14.2503 17.9015 14.2309 17.8039 14.1932 17.7128C14.1555 17.6218 14.1002 17.5391 14.0306 17.4694L12.3102 15.75L14.0306 14.0306C14.1003 13.961 14.1556 13.8783 14.1933 13.7872C14.2311 13.6962 14.2505 13.5986 14.2505 13.5C14.2505 13.4014 14.2311 13.3038 14.1933 13.2128C14.1556 13.1217 14.1003 13.039 14.0306 12.9694ZM9.12837 19.0631C8.84709 19.3442 8.46571 19.5021 8.06805 19.5021C7.6704 19.5021 7.28902 19.3442 7.00774 19.0631L4.93962 16.9922C4.65852 16.7109 4.50062 16.3295 4.50062 15.9319C4.50062 15.5342 4.65852 15.1528 4.93962 14.8716L7.12493 12.6853L11.3146 16.875L9.12837 19.0631ZM22.2806 1.71938C22.2109 1.64965 22.1282 1.59433 22.0371 1.55658C21.9461 1.51884 21.8485 1.49941 21.7499 1.49941C21.6514 1.49941 21.5538 1.51884 21.4627 1.55658C21.3717 1.59433 21.289 1.64965 21.2193 1.71938L18.5568 4.38282L18.0534 3.87844C17.4901 3.31683 16.7272 3.00146 15.9318 3.00146C15.1364 3.00146 14.3735 3.31683 13.8102 3.87844L11.6249 6.06469L11.0306 5.46938C10.8898 5.32865 10.699 5.24959 10.4999 5.24959C10.3009 5.24959 10.11 5.32865 9.9693 5.46938C9.82857 5.61011 9.74951 5.80098 9.74951 6C9.74951 6.19903 9.82857 6.3899 9.9693 6.53063L17.4693 14.0306C17.539 14.1003 17.6217 14.1556 17.7128 14.1933C17.8038 14.231 17.9014 14.2504 17.9999 14.2504C18.0985 14.2504 18.1961 14.231 18.2871 14.1933C18.3781 14.1556 18.4609 14.1003 18.5306 14.0306C18.6002 13.9609 18.6555 13.8782 18.6932 13.7872C18.7309 13.6961 18.7503 13.5985 18.7503 13.5C18.7503 13.4015 18.7309 13.3039 18.6932 13.2128C18.6555 13.1218 18.6002 13.0391 18.5306 12.9694L17.9352 12.375L20.1215 10.1897C20.4001 9.91111 20.6212 9.58036 20.772 9.21634C20.9228 8.85231 21.0004 8.46215 21.0004 8.06813C21.0004 7.6741 20.9228 7.28394 20.772 6.91992C20.6212 6.5559 20.4001 6.22515 20.1215 5.94657L19.6171 5.44313L22.2806 2.78063C22.3503 2.71097 22.4056 2.62826 22.4433 2.53721C22.4811 2.44616 22.5005 2.34856 22.5005 2.25C22.5005 2.15144 22.4811 2.05385 22.4433 1.9628C22.4056 1.87175 22.3503 1.78903 22.2806 1.71938ZM19.0602 9.12563L16.8749 11.3147L12.6852 7.125L14.8715 4.93969C15.1528 4.6586 15.5342 4.5007 15.9318 4.5007C16.3295 4.5007 16.7108 4.6586 16.9921 4.93969L19.0602 7.00219C19.2003 7.14157 19.3114 7.30723 19.3872 7.48968C19.463 7.67212 19.5021 7.86774 19.5021 8.06532C19.5021 8.26289 19.463 8.45851 19.3872 8.64095C19.3114 8.8234 19.2003 8.98906 19.0602 9.12844V9.12563Z" />
-                                    </g>
-                                </svg>
-                                <svg v-else :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" width="24" height="24"
-                                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <g id="Gauge">
-                                        <path id="Vector" opacity="0.2"
-                                            d="M21.75 15V17.25C21.75 17.4489 21.671 17.6397 21.5303 17.7803C21.3897 17.921 21.1989 18 21 18H3C2.80109 18 2.61032 17.921 2.46967 17.7803C2.32902 17.6397 2.25 17.4489 2.25 17.25V15.1059C2.25 9.71719 6.57656 5.26875 11.9653 5.25C13.2486 5.24544 14.5202 5.49426 15.7071 5.9822C16.8941 6.47013 17.973 7.18759 18.882 8.09342C19.7911 8.99924 20.5124 10.0756 21.0045 11.2608C21.4967 12.446 21.75 13.7167 21.75 15Z" />
-                                        <path id="Vector_2"
-                                            d="M19.4119 7.56282C18.4397 6.58843 17.2842 5.81613 16.0121 5.29046C14.74 4.76478 13.3764 4.49614 12 4.5H11.9625C6.19406 4.51969 1.5 9.28125 1.5 15.1059V17.25C1.5 17.6478 1.65804 18.0294 1.93934 18.3107C2.22064 18.592 2.60218 18.75 3 18.75H21C21.3978 18.75 21.7794 18.592 22.0607 18.3107C22.342 18.0294 22.5 17.6478 22.5 17.25V15C22.5039 13.6175 22.2328 12.2481 21.7027 10.9713C21.1725 9.69457 20.3938 8.53594 19.4119 7.56282ZM21 17.25H11.2228L16.3566 10.1906C16.4737 10.0298 16.5221 9.82895 16.4911 9.63239C16.4602 9.43583 16.3524 9.25961 16.1916 9.1425C16.0307 9.02539 15.8299 8.97699 15.6333 9.00793C15.4368 9.03887 15.2605 9.14663 15.1434 9.3075L9.3675 17.25H3V15.1059C3 14.8172 3.01406 14.5322 3.04031 14.25H5.25C5.44891 14.25 5.63968 14.171 5.78033 14.0303C5.92098 13.8897 6 13.6989 6 13.5C6 13.3011 5.92098 13.1103 5.78033 12.9697C5.63968 12.829 5.44891 12.75 5.25 12.75H3.30656C4.27406 9.10688 7.43156 6.3525 11.25 6.03188V8.25C11.25 8.44892 11.329 8.63968 11.4697 8.78033C11.6103 8.92099 11.8011 9 12 9C12.1989 9 12.3897 8.92099 12.5303 8.78033C12.671 8.63968 12.75 8.44892 12.75 8.25V6.03094C14.6106 6.18752 16.3767 6.9181 17.8042 8.12172C19.2316 9.32534 20.2501 10.9426 20.7188 12.75H18.75C18.5511 12.75 18.3603 12.829 18.2197 12.9697C18.079 13.1103 18 13.3011 18 13.5C18 13.6989 18.079 13.8897 18.2197 14.0303C18.3603 14.171 18.5511 14.25 18.75 14.25H20.9691C20.9888 14.4984 21 14.7478 21 15V17.25Z" />
-                                    </g>
-                                </svg>
+                                <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]"
+                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]"
+                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]"
+                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                <component v-else :is="navigationIcon[8]" alt="icon"
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
 
                                 <div class="flex flex-col items-start flex-1 ml-3 space-y-1">
                                     <span class="text-sm font-medium text-gray-800 truncate group-hover:text-white">

From a9553cee4cfeb2b8e79f586d646f4dd5b665b82f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:27:08 +0700
Subject: [PATCH 13/20] update method of using Icons sidebar

---
 src/assets/css/style.css                      |  9 ++++++++
 src/components/Navigation/Aside/Aside.vue     |  4 +---
 .../Navigation/Aside/AsideMenuMultiple.vue    | 20 +++++++++++-------
 .../Navigation/Aside/AsideMenuSingle.vue      | 21 ++++++-------------
 4 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f65583e..c161108 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -2779,6 +2779,10 @@ select {
   fill: #fff;
 }
 
+.group:hover .group-hover\:fill-primary-500 {
+  fill: #035b71;
+}
+
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -2794,6 +2798,11 @@ select {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index 66e6b7e..cfc9d8b 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -136,6 +136,4 @@ const closeSideBar = () => menu.toggleSidebar()
             </div>
         </div>
     </div>
-</template>
-
-@/utils/text@/utils/texts
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index 6d1ef10..45f5c60 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { MenuItemModel } from '@/types/menu'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 import { useMenuStore } from '@/stores/menu'
-import { DotOutline } from '@/utils/icons'
+import { IconDotOutline } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 const menu = useMenuStore()
 
@@ -36,11 +36,17 @@ const isMenuSelected = computed(() => {
         <Disclosure :defaultOpen="item.expanded" as="dev">
             <!-- Nested item with children -->
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
-                :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
-                <embed :src="isChildren ? DotOutline : item.icon"
-                    :class="[isMenuSelected ? 'fill-primary-500' : 'fill-gray-400 group-hover:fill-gray-500', isChildren ? '' : 'mr-2', 'flex-shrink-0 w-6 h-6']"
-                    type="image/svg+xml" />
-                <span class="flex-1">{{ item.name }}</span>
+                :class="[(isMenuSelected || item.expanded || isChildren) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
+                <component v-if="isChildren" :is="IconDotOutline"
+                    :class="[(isMenuSelected || item.expanded) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
+                    aria-hidden="true" />
+                <component v-else :is="item.icon"
+                    :class="[(isMenuSelected || item.expanded || isChildren || selected) ? ' fill-primary-500' : 'text-aside group-hover:fill-primary-500', 'mr-2 flex-shrink-0 h-6 w-6']"
+                    aria-hidden="true" />
+                <span
+                    :class="[(isMenuSelected || item.expanded || selected) ? 'text-primary-500' : 'group-hover:text-primary-500', 'flex-1']">
+                    {{ item.name }}
+                </span>
 
                 <svg :class="[isMenuSelected ? 'text-primary-500' : 'text-gray-300 group-hover:text-gray-500', item.expanded ? 'rotate-180' : '', 'ml-3 flex-shrink-0 transform transition-colors duration-150 ease-in-out ']"
                     width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -71,4 +77,4 @@ const isMenuSelected = computed(() => {
 
         </Disclosure>
     </div>
-</template>@/utils/menu
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 5cedd6c..9606dd1 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { MenuItemModel } from '@/types/menu'
+import { IconDotOutline } from '@/utils/icons';
 
 defineProps({
     item: {
@@ -22,22 +23,12 @@ defineProps({
         <RouterLink :to="item.path"
             :class="[selected ? 'aside-single-item-active' : 'aside-single-item-inactive', isChildren ? 'mt-1' : 'mt-0']">
 
-            <svg v-if="isChildren"
-                :class="[selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" width="16"
-                height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-                <g id="DotOutline">
-                    <path id="Vector" opacity="0.2"
-                        d="M9.5 8C9.5 8.29667 9.41203 8.58668 9.24721 8.83336C9.08238 9.08003 8.84812 9.27229 8.57403 9.38582C8.29994 9.49935 7.99834 9.52906 7.70737 9.47118C7.41639 9.4133 7.14912 9.27044 6.93934 9.06066C6.72956 8.85088 6.5867 8.58361 6.52882 8.29264C6.47094 8.00166 6.50065 7.70006 6.61418 7.42597C6.72771 7.15189 6.91997 6.91762 7.16665 6.7528C7.41332 6.58797 7.70333 6.5 8 6.5C8.39783 6.5 8.77936 6.65804 9.06066 6.93934C9.34197 7.22064 9.5 7.60218 9.5 8Z"
-                        fill="#4B5563" />
-                    <path id="Vector_2"
-                        d="M8 6C7.60444 6 7.21776 6.1173 6.88886 6.33706C6.55996 6.55682 6.30362 6.86918 6.15224 7.23463C6.00087 7.60009 5.96126 8.00222 6.03843 8.39018C6.1156 8.77814 6.30608 9.13451 6.58579 9.41421C6.86549 9.69392 7.22186 9.8844 7.60982 9.96157C7.99778 10.0387 8.39992 9.99913 8.76537 9.84776C9.13082 9.69638 9.44318 9.44004 9.66294 9.11114C9.8827 8.78224 10 8.39556 10 8C10 7.46957 9.78929 6.96086 9.41421 6.58579C9.03914 6.21071 8.53043 6 8 6ZM8 9C7.80222 9 7.60888 8.94135 7.44443 8.83147C7.27998 8.72159 7.15181 8.56541 7.07612 8.38268C7.00043 8.19996 6.98063 7.99889 7.01922 7.80491C7.0578 7.61093 7.15304 7.43275 7.29289 7.29289C7.43275 7.15304 7.61093 7.0578 7.80491 7.01921C7.99889 6.98063 8.19996 7.00043 8.38268 7.07612C8.56541 7.15181 8.72159 7.27998 8.83147 7.44443C8.94135 7.60888 9 7.80222 9 8C9 8.26522 8.89464 8.51957 8.70711 8.70711C8.51957 8.89464 8.26522 9 8 9Z"
-                        fill="#4B5563" />
-                </g>
-            </svg>
-
-            <embed v-else :src="item.icon" type="image/svg+xml"
-                :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']">
+            <IconDotOutline v-if="isChildren"
+                :class="['w-6 h-6', selected ? 'aside-single-item-icon stroke-white' : 'aside-single-item-icon-inactive']" />
 
+            <component :is="item.icon"
+                :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
+                aria-hidden="true" />
             {{ item.name }}
         </RouterLink>
     </div>

From a9b1d720d9beca2d9e3747cbfd110a3e24e760bb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:27:32 +0700
Subject: [PATCH 14/20] add more new route menu

---
 src/router/index.ts | 50 +++++++++++++++++++++++++++++++++++++++++++++
 src/utils/route.ts  | 30 ++++++++++++++++-----------
 2 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index a9eb3ec..540394b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -472,6 +472,56 @@ export const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        path: 'material',
+        name: 'Material',
+        children: [
+          {
+            path: 'daftar',
+            name: 'Daftar',
+            children: [
+              {
+                path: '1',
+                name: 'Daftar Gangguan Dan Material Yang Dipakai',
+                component: TestPage,
+              },
+            ],
+          },
+          {
+            path: 'rekapitulasi',
+            name: 'Rekapitulasi',
+            children: [
+              {
+                path: '1',
+                name: 'Rekapitulasi Pemakaian Material',
+                component: TestPage,
+              },
+            ],
+          }
+        ],
+      },
+      {
+        path: 'transaksi',
+        name: 'Transaksi',
+        children: [
+          {
+            path: '1',
+            name: 'Transaksi APKT',
+            component: TestPage,
+          },
+        ],
+      },
+      {
+        path: 'pencarian-data',
+        name: 'Pencarian Data',
+        children: [
+          {
+            path: '1',
+            name: 'Pencarian Report Number',
+            component: TestPage,
+          }
+        ]
+      },
     ]
   },
   {
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 31049eb..124b767 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -2,21 +2,27 @@
 import type { MenuItemModel } from '../types/menu'
 import type { RouteRecordRaw } from 'vue-router'
 import {
-    Gauge,
-    LightningSlash,
-    Monitor,
-    Plugs,
-    SmileySad,
-    Swap
+    IconBox,
+    IconFileSearch,
+    IconGauge,
+    IconLightningSlash,
+    IconMonitor,
+    IconPlugs,
+    IconSmileySad,
+    IconSwap,
+    IconWallet,
 } from '@/utils/icons'
 
 export const navigationIcon = [
-    LightningSlash,
-    SmileySad,
-    Monitor,
-    Swap,
-    Plugs,
-    Gauge
+    IconLightningSlash,
+    IconSmileySad,
+    IconMonitor,
+    IconSwap,
+    IconPlugs,
+    IconGauge,
+    IconBox,
+    IconWallet,
+    IconFileSearch
 ]
 
 const convertToDashedString = (input: string): string => {

From 92706caf90d6acbeacf751773dee944dc4295cb3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:52:25 +0700
Subject: [PATCH 15/20] add route page to recent when menu load

---
 src/components/CommandPalettes.vue            |  6 +-----
 .../Pages/Gangguan/Daftar/Daftar_1.vue        |  2 +-
 src/stores/command.ts                         | 15 ++++++++++++-
 src/stores/menu.ts                            | 21 +++++++++++++++++--
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index 8b1ebfa..b75a07e 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -116,10 +116,6 @@ import { useCommandPalattesStore } from '@/stores/command'
 import { navigationIcon } from '@/utils/route'
 
 const command = useCommandPalattesStore()
-const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
-    const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
-    return matchingRoutes
-}
 
 const route = useRouter()
 const recent = computed(() => query.value === '' ? command.readRecent() : [])
@@ -127,7 +123,7 @@ const query = ref('')
 const filteredMenus = computed(() =>
     query.value === ''
         ? []
-        : searchRoutesByName(routes, query.value)
+        : command.searchRoutesByName(routes, query.value)
 )
 const onClose = () => command.open = false
 
diff --git a/src/components/Pages/Gangguan/Daftar/Daftar_1.vue b/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
index e6135d5..b6b4d64 100644
--- a/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
+++ b/src/components/Pages/Gangguan/Daftar/Daftar_1.vue
@@ -112,7 +112,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 onMounted(() => {
     createDummy()
-    console.log(readDataJson('data-daftar-1'));
+    // console.log(readDataJson('data-daftar-1'));
 
 })
 
diff --git a/src/stores/command.ts b/src/stores/command.ts
index 743df78..86ad874 100644
--- a/src/stores/command.ts
+++ b/src/stores/command.ts
@@ -2,6 +2,7 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import type { RouteRecordRaw } from 'vue-router'
 import { readDataJson, writeDataJson } from '@/utils/storage'
+import { extractLeafRoutes } from '@/router'
 
 export const useCommandPalattesStore = defineStore('command_palettes', () => {
     const open = ref(false)
@@ -71,6 +72,16 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
         writeDataJson('recentmenu', lastRecent)
     }
 
+    const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
+        const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+        return matchingRoutes
+    }
+
+    const searchRoutesPath = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
+        const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.path === query)
+        return matchingRoutes
+    }
+
     return {
         open,
         showCommandPalettes,
@@ -78,6 +89,8 @@ export const useCommandPalattesStore = defineStore('command_palettes', () => {
         onKeyPressed,
         onKeyUp,
         addRecent,
-        readRecent
+        readRecent,
+        searchRoutesByName,
+        searchRoutesPath
     }
 })
\ No newline at end of file
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 5d81338..5ea0647 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -5,6 +5,7 @@ import { convertRouteToMenu } from '@/utils/route'
 import { routes } from '@/router'
 import type { MenuItemModel } from '@/types/menu'
 import { splitRoutePath } from '@/utils/texts'
+import { useCommandPalattesStore } from '@/stores/command'
 
 export const useMenuStore = defineStore('menu', () => {
     const route = useRoute()
@@ -12,6 +13,7 @@ export const useMenuStore = defineStore('menu', () => {
     const sidebarOpen = ref(false)
     const sidebarShowed = ref(true)
     const router = useRouter()
+    const command = useCommandPalattesStore()
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
     const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
@@ -54,14 +56,29 @@ export const useMenuStore = defineStore('menu', () => {
         }
     })
 
-    watch(router, () => {
-        if (router.currentRoute.value.fullPath === '/' || router.currentRoute.value.fullPath === '/home') {
+    watch(router, (value) => {
+        if (value.currentRoute.value.fullPath === '/' || value.currentRoute.value.fullPath === '/home') {
             for (const item of navigation.value) {
                 item.expanded = false
             }
         }
     })
 
+    watch(menuSelected, (value) => {
+        if (value !== '/login' && value !== '/404' && value !== '/home' && value !== '/') {
+            console.log('current route', value);
+
+            const result = command.searchRoutesPath(routes, value)
+            if (result.length > 0) {
+                const route = result.find((item) => item.path === value)
+                if (route) {
+                    command.addRecent(route)
+                }
+            }
+
+        }
+    })
+
     return {
         navigation,
         toggleSidebar,

From 6c608fb6cb8f2c7b2aaca3acf67512e845893491 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 16:58:45 +0700
Subject: [PATCH 16/20] update recent page

---
 src/components/CommandPalettes.vue | 4 ++--
 src/components/Pages/Welcome.vue   | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index b75a07e..e4209cb 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -62,10 +62,10 @@
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
 
                                                 <div class="flex flex-col flex-auto ml-3 space-y-1">
-                                                    <span class="text-sm font-medium text-gray-800 truncate">
+                                                    <span class="text-sm font-medium text-gray-800 truncate line-clamp-1">
                                                         {{ menu.name }}
                                                     </span>
-                                                    <span class="text-xs text-gray-500 ">
+                                                    <span class="text-xs text-gray-500 line-clamp-1">
                                                         {{ menu.path.replace('/home/', '') }}
                                                     </span>
                                                 </div>
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
index c768861..e0f4ceb 100644
--- a/src/components/Pages/Welcome.vue
+++ b/src/components/Pages/Welcome.vue
@@ -39,10 +39,11 @@
                                     :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
 
                                 <div class="flex flex-col items-start flex-1 ml-3 space-y-1">
-                                    <span class="text-sm font-medium text-gray-800 truncate group-hover:text-white">
+                                    <span
+                                        class="text-sm font-medium text-gray-800 truncate group-hover:text-white line-clamp-1">
                                         {{ menu.name }}
                                     </span>
-                                    <span class="text-xs text-gray-500 group-hover:text-white">
+                                    <span class="text-xs text-gray-500 group-hover:text-white line-clamp-1">
                                         {{ menu.path.replace('/home/', '') }}
                                     </span>
                                 </div>

From a4fb6dcdd7a9549a3201ffe6362f13a7866f7bf9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 26 Oct 2023 17:00:03 +0700
Subject: [PATCH 17/20] update recent page list

---
 src/components/CommandPalettes.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index e4209cb..4361465 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -61,7 +61,7 @@
                                                 <component v-else :is="navigationIcon[8]" alt="icon"
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
 
-                                                <div class="flex flex-col flex-auto ml-3 space-y-1">
+                                                <div class="flex flex-col flex-1 ml-3 space-y-1">
                                                     <span class="text-sm font-medium text-gray-800 truncate line-clamp-1">
                                                         {{ menu.name }}
                                                     </span>

From 8384a358329b7568b9ae936897363afb767381cc Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 27 Oct 2023 08:49:51 +0700
Subject: [PATCH 18/20] fix recent page list style

---
 src/assets/css/style.css           | 108 ++++++++++-------------------
 src/components/CommandPalettes.vue |   4 +-
 src/components/Pages/Welcome.vue   |  34 ++++-----
 3 files changed, 56 insertions(+), 90 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index c161108..96ba6a8 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1098,10 +1098,6 @@ select {
   margin-top: 1.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
-}
-
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1185,6 +1181,10 @@ select {
   height: 2.7rem;
 }
 
+.h-\[66px\] {
+  height: 66px;
+}
+
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1202,10 +1202,6 @@ select {
   height: 80vh;
 }
 
-.h-\[66px\] {
-  height: 66px;
-}
-
 .max-h-0 {
   max-height: 0px;
 }
@@ -1334,10 +1330,6 @@ select {
   flex: 1 1 0%;
 }
 
-.flex-auto {
-  flex: 1 1 auto;
-}
-
 .flex-none {
   flex: none;
 }
@@ -1528,18 +1520,18 @@ select {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
-
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1819,14 +1811,14 @@ select {
   --tw-bg-opacity: 0.8;
 }
 
-.fill-gray-400 {
-  fill: #9ca3af;
-}
-
 .fill-gray-500 {
   fill: #6b7280;
 }
 
+.fill-gray-600 {
+  fill: #4b5563;
+}
+
 .fill-primary-500 {
   fill: #035b71;
 }
@@ -1843,10 +1835,6 @@ select {
   fill: #fff;
 }
 
-.fill-gray-600 {
-  fill: #4b5563;
-}
-
 .stroke-white {
   stroke: #fff;
 }
@@ -2050,6 +2038,10 @@ select {
   text-align: center;
 }
 
+.text-start {
+  text-align: start;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2204,6 +2196,11 @@ select {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2304,15 +2301,6 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
-.text-opacity-100 {
-  --tw-text-opacity: 1;
-}
-
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -2339,14 +2327,14 @@ select {
   opacity: 0.3;
 }
 
-.opacity-50 {
-  opacity: 0.5;
-}
-
 .opacity-40 {
   opacity: 0.4;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2753,58 +2741,36 @@ select {
   display: block;
 }
 
-.group:hover .group-hover\:bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
 }
 
-.group:hover .group-hover\:bg-opacity-5 {
-  --tw-bg-opacity: 0.05;
-}
-
 .group:hover .group-hover\:bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
 
-.group:hover .group-hover\:fill-gray-500 {
-  fill: #6b7280;
+.group:hover .group-hover\:fill-primary-500 {
+  fill: #035b71;
 }
 
 .group:hover .group-hover\:fill-white {
   fill: #fff;
 }
 
-.group:hover .group-hover\:fill-primary-500 {
-  fill: #035b71;
-}
-
 .group:hover .group-hover\:text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.group:hover .group-hover\:text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:opacity-100 {
-  opacity: 1;
+.group:hover .group-hover\:text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 @media (prefers-color-scheme: dark) {
@@ -3238,16 +3204,16 @@ select {
     padding: 5rem;
   }
 
-  .md\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .md\:py-0 {
     padding-top: 0px;
     padding-bottom: 0px;
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index 4361465..93239ce 100644
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -23,7 +23,7 @@
                             </div>
 
                             <ComboboxOptions v-if="query === '' || filteredMenus.length > 0" static
-                                class="overflow-y-auto divide-y divide-gray-500 max-h-80 scroll-py-2 divide-opacity-10">
+                                class="overflow-y-auto divide-y divide-gray-500 scroll-py-2 divide-opacity-10">
                                 <li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
                                     <h2 v-if="query === '' && recent.length > 0"
                                         class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
@@ -62,7 +62,7 @@
                                                     :class="['h-6 w-6 flex-none', active ? 'opacity-100' : 'opacity-40']" />
 
                                                 <div class="flex flex-col flex-1 ml-3 space-y-1">
-                                                    <span class="text-sm font-medium text-gray-800 truncate line-clamp-1">
+                                                    <span class="text-sm font-medium text-gray-800 line-clamp-1">
                                                         {{ menu.name }}
                                                     </span>
                                                     <span class="text-xs text-gray-500 line-clamp-1">
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
index e0f4ceb..2f0d5c1 100644
--- a/src/components/Pages/Welcome.vue
+++ b/src/components/Pages/Welcome.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
-        <div class="w-full md:w-[440px] px-4 py-4 md:px-0 md:py-0 flex flex-col items-center">
+    <div class="flex flex-col items-center justify-center px-4 text-center whitespace-pre-wrap h-screen-80">
+        <div class="w-full md:w-[440px] py-4 md:py-0 flex flex-col items-center">
             <img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
             <button @click="command.showCommandPalettes" type="button"
                 class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0">
                 <span class="sr-only">Search</span>
                 <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
-                <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
+                <span class="px-3 text-sm font-medium text-gray-500 text-md">Cari menu</span>
             </button>
 
             <div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
@@ -20,35 +20,35 @@
                             <div
                                 class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
                                 <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]"
-                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]"
-                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]"
-                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
                                 <component v-else :is="navigationIcon[8]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white']" />
+                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
 
-                                <div class="flex flex-col items-start flex-1 ml-3 space-y-1">
+                                <div class="flex flex-col items-start flex-1 w-full pl-3 space-y-1">
                                     <span
-                                        class="text-sm font-medium text-gray-800 truncate group-hover:text-white line-clamp-1">
+                                        class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
                                         {{ menu.name }}
                                     </span>
-                                    <span class="text-xs text-gray-500 group-hover:text-white line-clamp-1">
+                                    <span
+                                        class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
                                         {{ menu.path.replace('/home/', '') }}
                                     </span>
                                 </div>
-                                <span
-                                    class="flex-none hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
+                                <span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
                                     Buka
                                 </span>
                             </div>

From dca8a81670996a9a0a5ffbf533d836055a6f4fa6 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 27 Oct 2023 08:59:01 +0700
Subject: [PATCH 19/20] update toggle header when mobile ui

---
 src/components/Navigation/Aside/Aside.vue | 12 +++---------
 src/components/Navigation/Header.vue      |  9 +++++----
 src/components/icons/IconBars3.vue        |  6 ++++++
 src/utils/icons.ts                        |  1 +
 4 files changed, 15 insertions(+), 13 deletions(-)
 create mode 100644 src/components/icons/IconBars3.vue

diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index cfc9d8b..284124c 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -9,7 +9,7 @@ import {
 } from '@headlessui/vue'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 import { useMenuStore } from '@/stores/menu'
-import { IconApp } from '@/utils/icons'
+import { IconApp, IconBars3 } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Navigation/Aside/AsideMenuSingle.vue'
 import AsideMenuMultiple from '@/components/Navigation/Aside/AsideMenuMultiple.vue'
 import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
@@ -106,16 +106,10 @@ const closeSideBar = () => menu.toggleSidebar()
                 class="px-4 py-4 text-gray-500 rounded-full hover:bg-primary-100 focus:outline-none focus:ring-0"
                 @click="menu.toggleSidebarDesktop()">
                 <span class="sr-only">Open sidebar</span>
-                <!-- <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" /> -->
-                <svg class="w-6 h-6" width="32" height="32" viewBox="0 0 32 32" fill="none"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z"
-                        fill="#343330" />
-                </svg>
+                <IconBars3 class="w-6 h-6 fill-gray-600" />
 
             </button>
-            <RouterLink to="/">
+            <RouterLink to="/home">
                 <img class="w-auto h-11" :src="IconApp" alt="PLN" />
             </RouterLink>
         </div>
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
index 9277c78..d8796ab 100644
--- a/src/components/Navigation/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -16,7 +16,8 @@ import {
 import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
 import PictureInitial from '@/components/PictureInitial.vue'
 import { useDialogStore } from '@/stores/dialog'
-import { IconApp } from '@/utils/icons'
+import { IconApp, IconBars3 } from '@/utils/icons'
+import { RouterLink } from 'vue-router'
 
 const auth = useAuthStore()
 const user = useUserStore()
@@ -46,11 +47,11 @@ const showDialogLogout = () => {
     <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 md:ml-80">
         <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
             <span class="sr-only">Open sidebar</span>
-            <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
+            <IconBars3 class="w-6 h-6 fill-gray-600" />
         </button>
-        <div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
+        <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
             <img class="w-auto h-11" :src="IconApp" alt="PLN" />
-        </div>
+        </RouterLink>
         <div class="flex justify-end w-full px-4">
             <div class="flex items-center ml-4 md:ml-6">
                 <button @click="command.showCommandPalettes" type="button"
diff --git a/src/components/icons/IconBars3.vue b/src/components/icons/IconBars3.vue
new file mode 100644
index 0000000..de9ec23
--- /dev/null
+++ b/src/components/icons/IconBars3.vue
@@ -0,0 +1,6 @@
+<template>
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M28 16C28 16.2652 27.8946 16.5196 27.7071 16.7071C27.5196 16.8946 27.2652 17 27 17H5C4.73478 17 4.48043 16.8946 4.29289 16.7071C4.10536 16.5196 4 16.2652 4 16C4 15.7348 4.10536 15.4804 4.29289 15.2929C4.48043 15.1054 4.73478 15 5 15H27C27.2652 15 27.5196 15.1054 27.7071 15.2929C27.8946 15.4804 28 15.7348 28 16ZM5 9H27C27.2652 9 27.5196 8.89464 27.7071 8.70711C27.8946 8.51957 28 8.26522 28 8C28 7.73478 27.8946 7.48043 27.7071 7.29289C27.5196 7.10536 27.2652 7 27 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8C4 8.26522 4.10536 8.51957 4.29289 8.70711C4.48043 8.89464 4.73478 9 5 9ZM27 23H5C4.73478 23 4.48043 23.1054 4.29289 23.2929C4.10536 23.4804 4 23.7348 4 24C4 24.2652 4.10536 24.5196 4.29289 24.7071C4.48043 24.8946 4.73478 25 5 25H27C27.2652 25 27.5196 24.8946 27.7071 24.7071C27.8946 24.5196 28 24.2652 28 24C28 23.7348 27.8946 23.4804 27.7071 23.2929C27.5196 23.1054 27.2652 23 27 23Z" />
+    </svg>
+</template>
\ No newline at end of file
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index 7409a00..b2c5aa8 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -11,3 +11,4 @@ export { default as IconGauge } from '@/components/icons/IconGauge.vue'
 export { default as IconBox } from '@/components/icons/IconBox.vue'
 export { default as IconFileSearch } from '@/components/icons/IconFileSearch.vue'
 export { default as IconWallet } from '@/components/icons/IconWallet.vue'
+export { default as IconBars3 } from '@/components/icons/IconBars3.vue'

From 70a6353c9899dc8612f640be7104299a25e5d9e1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 27 Oct 2023 09:18:10 +0700
Subject: [PATCH 20/20] update title page size

---
 src/assets/css/style.css              | 33 +++++++++++++++++++++++++++
 src/components/Pages/MenuProvider.vue |  6 ++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 96ba6a8..a923734 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1608,6 +1608,16 @@ select {
   border-top-right-radius: 1.5rem;
 }
 
+.rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+
+.rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -2030,6 +2040,14 @@ select {
   padding-top: 1.25rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2080,6 +2098,11 @@ select {
   line-height: 1rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -3195,6 +3218,11 @@ select {
     flex-direction: column;
   }
 
+  .md\:rounded-t-3xl {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
   .md\:bg-primary-500 {
     --tw-bg-opacity: 1;
     background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -3235,6 +3263,11 @@ select {
     font-size: 1.5rem;
     line-height: 2rem;
   }
+
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
 }
 
 @media (min-width: 1024px) {
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 959b3d5..70eabe4 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -1,7 +1,7 @@
 <template>
-    <main class="flex-1 px-2 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="pt-2 max-w-7xl sm:pt-4 md:pt-6">
-            <h1 class="text-lg font-medium md:text-2xl lg:text-3xl text-dark">{{ currentRouteName }}</h1>
+    <main class="flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-4 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
+        <div v-if="route.path !== '/home'" class="pt-4 max-w-7xl">
+            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ currentRouteName }}</h1>
         </div>
         <div class="mt-2 sm:mt-4 dx-viewport">
             <slot></slot>