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