From 4633851c6adde13727e7adbc7c4432dfffdc8c44 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 19 Oct 2023 12:08:09 +0700
Subject: [PATCH] update route method

---
 .gitignore                                    |   2 +
 src/components/Navigation/Aside/Aside.vue     |   8 +-
 .../Navigation/Aside/AsideMenuMultiple.vue    |  10 +-
 .../Navigation/Aside/AsideMenuSingle.vue      |   2 +-
 src/components/Pages/TestPage.vue             |  14 +
 src/router/index.ts                           | 608 ++++++++++++-----
 src/stores/menu.ts                            | 623 +-----------------
 src/utils/interfaces.ts                       |   2 +-
 8 files changed, 499 insertions(+), 770 deletions(-)
 create mode 100644 src/components/Pages/TestPage.vue

diff --git a/.gitignore b/.gitignore
index 38adffa..f829e12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+
 node_modules
 .DS_Store
 dist
@@ -26,3 +27,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+*.ts
\ No newline at end of file
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index 8d43130..5a5c4aa 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -83,10 +83,10 @@ const closeSideBar = () => menu.toggleSidebar()
                                 <template v-for="item in menu.navigation" :key="item.name">
                                     <!-- Single-level item -->
                                     <AsideMenuSingle v-if="item.children.length === 0" :item="item"
-                                        :selected="isMenu(item.href)" />
+                                        :selected="isMenu(item.path)" />
 
                                     <!-- Nested item with children -->
-                                    <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.href)" />
+                                    <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
                                 </template>
                             </nav>
                         </div>
@@ -120,10 +120,10 @@ const closeSideBar = () => menu.toggleSidebar()
                 <nav class="flex-1 px-2 pb-4 space-y-1">
                     <template v-for="item in menu.navigation" :key="item.name">
                         <!-- Single-level item -->
-                        <AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.href)" />
+                        <AsideMenuSingle v-if="item.children.length === 0" :item="item" :selected="isMenu(item.path)" />
 
                         <!-- Nested item with children -->
-                        <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.href)" />
+                        <AsideMenuMultiple v-else :item="item" :selected="isMenu(item.path)" />
                     </template>
                 </nav>
             </div>
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index 949b8c1..4df3a2f 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -27,7 +27,7 @@ const isMenu = (name: string) => {
 }
 
 const isMenuSelected = computed(() => {
-    return props.item.children.find((d) => d.href === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.href === menu.menuSelected))
+    return props.item.children.find((d) => d.path === menu.menuSelected) || props.item.children.find((d) => d.children.find((e) => e.path === menu.menuSelected))
 })
 </script>
 
@@ -35,7 +35,7 @@ const isMenuSelected = computed(() => {
     <div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
         <Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
             <!-- Nested item with children -->
-            <DisclosureButton @click="menu.toggleSidebarMenu(item.href, !item.expanded)"
+            <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']">
                 <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']"
@@ -56,12 +56,12 @@ const isMenuSelected = computed(() => {
                 <div v-show="item.expanded">
                     <DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
                         <!-- Nested children -->
-                        <template v-for="(subItem, index) in item.children" :key="subItem.href">
+                        <template v-for="(subItem, index) in item.children" :key="subItem.path">
                             <!-- Single-level child -->
                             <AsideMenuSingle v-if="subItem.children.length === 0" :item="subItem" :is-children="true"
-                                :selected="isMenu(subItem.href)" />
+                                :selected="isMenu(subItem.path)" />
                             <!-- Multiple-level child -->
-                            <AsideMenuMultiple v-else :item="subItem" :selected="subItem.href === menu.menuSelected"
+                            <AsideMenuMultiple v-else :item="subItem" :selected="subItem.path === menu.menuSelected"
                                 :is-children="true" />
                         </template>
                     </DisclosurePanel>
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index a139296..13bc2aa 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -19,7 +19,7 @@ defineProps({
 
 <template>
     <div class="group">
-        <RouterLink :to="item.href"
+        <RouterLink :to="item.path"
             :class="[selected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500', 'w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl', isChildren ? 'mt-1' : 'mt-0']">
 
             <svg v-if="isChildren" :class="[selected ? 'stroke-white' : 'text-aside group-hover:stroke-white', 'h-6 w-6']"
diff --git a/src/components/Pages/TestPage.vue b/src/components/Pages/TestPage.vue
new file mode 100644
index 0000000..ab4961a
--- /dev/null
+++ b/src/components/Pages/TestPage.vue
@@ -0,0 +1,14 @@
+<template>
+    <div class="flex flex-col items-center justify-center px-6 text-center whitespace-pre-wrap h-screen-80">
+        <h3 class="mt-2 text-gray-400 whitespace-pre-wrap text-md">
+            Selamat datang di aplikasi
+        </h3>
+        <h1 class="mt-1 text-2xl font-semibold text-gray-500 whitespace-pre-wrap">
+            {{ appName }}
+        </h1>
+    </div>
+</template>
+
+<script setup lang="ts">
+const appName = import.meta.env.VITE_APP_NAME
+</script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index fb10828..5f4cb60 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,162 +1,470 @@
 
 import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
-import AktifIndividual from '@/components/Pages/DaftarTransaksi/AktifIndividual.vue'
 import EmptyPage from '@/components/Pages/HomeEmpty.vue'
-import { useAuthStore } from '@/stores/auth'
+import TestPage from '@/components/Pages/TestPage.vue'
+
+export const routes = [
+  {
+    path: '/home',
+    name: 'Home',
+    component: HomeView,
+    children: [
+      {
+        path: '',
+        name: 'Home Page',
+        component: EmptyPage,
+      },
+      {
+        path: 'gangguan',
+        name: 'Gangguan',
+        children: [
+          {
+            path: '1',
+            name: 'Daftar',
+            children: [
+              {
+                path: '1',
+                name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
+                component: TestPage,
+              },
+              {
+                path: '2',
+                name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
+                component: TestPage,
+              },
+              {
+                path: '3',
+                name: 'Daftar Gangguan Response Time',
+                component: TestPage,
+              },
+              {
+                path: '4',
+                name: 'Daftar Gangguan Recovery Time',
+                component: TestPage,
+              },
+              {
+                path: '5',
+                name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
+                component: TestPage,
+              },
+              {
+                path: '6',
+                name: 'Daftar Gangguan Berdasarkan Media',
+                component: TestPage,
+              },
+              {
+                path: '7',
+                name: 'Daftar Gangguan Diselesaikan Mobile APKT',
+                component: TestPage,
+              },
+            ],
+          },
+          {
+            path: '2',
+            name: 'Rekapitulasi',
+            children: [
+              {
+                path: '1',
+                name: 'Rekapitulasi Gangguan All',
+                component: TestPage,
+              },
+              {
+                path: '2',
+                name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+                component: TestPage,
+              },
+              {
+                path: '3',
+                name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
+                component: TestPage,
+              },
+              {
+                path: '4',
+                name: 'Rekapitulasi Gangguan Per Posko',
+                component: TestPage,
+              },
+              {
+                path: '5',
+                name: 'Rekapitulasi Gangguan Per Regu',
+                component: TestPage,
+              },
+              {
+                path: '6',
+                name: 'Rekapitulasi Gangguan Per Tanggal',
+                component: TestPage,
+              },
+              {
+                path: '7',
+                name: 'Rekapitulasi Gangguan Berdasarkan Media',
+                component: TestPage,
+              },
+              {
+                path: '8',
+                name: 'Rekapitulasi Gangguan Alih  Posko',
+                component: TestPage,
+              },
+              {
+                path: '9',
+                name: 'Rekapitulasi Gangguan Per Status',
+                component: TestPage,
+              },
+              {
+                path: '10',
+                name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
+                component: TestPage,
+              },
+              {
+                path: '11',
+                name: 'Rekapitulasi Rating Per Posko',
+                component: TestPage,
+              },
+              {
+                path: '12',
+                name: 'Rekapitulasi Rating Per Regu',
+                component: TestPage,
+              },
+              {
+                path: '13',
+                name: 'Rekapitulasi Koreksi Transaksi Individual',
+                component: TestPage,
+              },
+              {
+                path: '14',
+                name: 'Rekapitulasi Cleansing Transaksi TM',
+                component: TestPage,
+              },
+            ],
+          }
+        ]
+      },
+      {
+        path: 'keluhan',
+        name: 'Keluhan',
+        children: [
+          {
+            path: '1',
+            name: 'Daftar',
+            children: [
+              {
+                path: '1',
+                name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
+                component: TestPage,
+              },
+              {
+                path: '2',
+                name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
+                component: TestPage,
+              },
+              {
+                path: '3',
+                name: 'Daftar Keluhan Response Time',
+                component: TestPage,
+              },
+              {
+                path: '4',
+                name: 'Daftar Keluhan Recovery Time',
+                component: TestPage,
+              },
+              {
+                path: '5',
+                name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
+                component: TestPage,
+              },
+              {
+                path: '6',
+                name: 'Daftar Keluhan Berdasarkan Media',
+                component: TestPage,
+              },
+              {
+                path: '7',
+                name: 'Daftar Keluhan Selesai di CC123',
+                component: TestPage,
+              },
+            ],
+          },
+          {
+            path: '2',
+            name: 'Rekapitulasi',
+            children: [
+              {
+                path: '1',
+                name: 'Rekapitulasi Keluhan All',
+                component: TestPage,
+              },
+              {
+                path: '2',
+                name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
+                component: TestPage,
+              },
+              {
+                path: '3',
+                name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
+                component: TestPage,
+              },
+              {
+                path: '4',
+                name: 'Rekapitulasi Keluhan Per Tanggal',
+                component: TestPage,
+              },
+              {
+                path: '5',
+                name: 'Rekapitulasi Keluhan Per Unit',
+                component: TestPage,
+              },
+              {
+                path: '6',
+                name: 'Rekapitulasi Keluhan Berdasarkan Media',
+                component: TestPage,
+              },
+              {
+                path: '7',
+                name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
+                component: TestPage,
+              },
+              {
+                path: '8',
+                name: 'Rekapitulasi Rating Per Unit',
+                component: TestPage,
+              },
+            ],
+          }
+        ],
+      },
+      {
+        path: 'monalisa',
+        name: 'Monalisa',
+        children: [
+          {
+            path: '1',
+            name: 'Gangguan',
+            children: [
+              {
+                path: '1',
+                name: 'Rekapitulasi',
+                children: [
+                  {
+                    path: '1',
+                    name: 'Jumlah Kali  Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '2',
+                    name: 'Recovery Time (RCT) Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '3',
+                    name: 'Response Time (RPT) Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '4',
+                    name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '5',
+                    name: 'Rekapitulasi Lapor Ulang Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '6',
+                    name: 'Rekapitulasi ENS Gangguan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '7',
+                    name: 'Rekapitulasi Gangguan Belum Selesai',
+                    component: TestPage,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: '2',
+            name: 'Keluhan',
+            children: [
+              {
+                path: '1',
+                name: 'Rekapitulasi',
+                children: [
+                  {
+                    path: '1',
+                    name: 'Jumlah Kali Keluhan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '2',
+                    name: 'Recovery Time (RCT) Keluhan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '3',
+                    name: 'Response Time (RPT) Keluhan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '4',
+                    name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '5',
+                    name: 'Rekapitulasi Lapor Ulang Keluhan',
+                    component: TestPage,
+                  },
+                  {
+                    path: '6',
+                    name: 'Rekapitulasi Keluhan Belum Selesai',
+                    component: TestPage,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: '3',
+            name: 'Laporan KPI',
+            children: [
+              {
+                path: '1',
+                name: 'Bulanan',
+                children: [
+                  {
+                    path: '1',
+                    name: 'Penurunan Jumlah Komplain',
+                    component: TestPage,
+                  },
+                  {
+                    path: '2',
+                    name: 'Aging Complaint',
+                    component: TestPage,
+                  },
+                  {
+                    path: '3',
+                    name: 'Energy Not Sales (ENS)',
+                    component: TestPage,
+                  },
+                  {
+                    path: '4',
+                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+                    component: TestPage,
+                  },
+                ],
+              },
+              {
+                path: '2',
+                name: 'Kumulatif',
+                children: [
+                  {
+                    path: '1',
+                    name: 'Penurunan Jumlah Komplain',
+                    component: TestPage,
+                  },
+                  {
+                    path: '2',
+                    name: 'Aging Complaint',
+                    component: TestPage,
+                  },
+                  {
+                    path: '3',
+                    name: 'Energy Not Sales (ENS)',
+                    component: TestPage,
+                  },
+                  {
+                    path: '4',
+                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
+                    component: TestPage,
+                  },
+                ],
+              }
+            ],
+          },
+        ],
+      },
+      {
+        path: 'check-in-out',
+        name: 'Check In OutCheck In Dan Check Out',
+        children: [
+          {
+            path: '1',
+            name: 'Laporan Check In /Check Out (CICO)',
+            children: [
+              {
+                path: '1',
+                name: 'Laporan Check In /Check Out (CICO)',
+                component: TestPage,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: 'anomali-pengaduan',
+        name: 'Anomali Penangan Pengaduan',
+        children: [
+          {
+            path: '1',
+            name: 'Gangguan',
+            children: [
+              {
+                path: '1',
+                name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
+                component: TestPage,
+              },
+              {
+                path: '2',
+                name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
+                component: TestPage,
+              },
+            ],
+          },
+          {
+            path: '2',
+            name: 'Keluhan',
+            children: [
+              {
+                path: '1',
+                name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
+                component: TestPage,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: 'ctt-kwh-periksa',
+        name: 'CTT & KWH Periksa',
+        children: [
+          {
+            path: '1',
+            name: 'Laporan CTT & KWH Periksa',
+            component: TestPage,
+          },
+        ],
+      },
+    ]
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView
+  },
+  {
+    path: '/404',
+    name: 'Not Found',
+    component: NotFoundView
+  },
+]
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   linkActiveClass: 'active',
-  routes: [
-    {
-      path: '/home',
-      name: 'Home',
-      'meta': { requiresAuth: true },
-      component: HomeView,
-      children: [
-        {
-          path: '',
-          name: 'Home Page',
-          component: EmptyPage,
-        },
-        {
-          path: 'gangguan',
-          name: 'Gangguan',
-          children: [
-            {
-              path: '1',
-              name: 'Daftar',
-              children: [
-                {
-                  path: '1',
-                  name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
-                  component: EmptyPage,
-                },
-                {
-                  path: '2',
-                  name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
-                  component: EmptyPage,
-                },
-                {
-                  path: '3',
-                  name: 'Daftar Gangguan Response Time',
-                  component: EmptyPage,
-                },
-                {
-                  path: '4',
-                  name: 'Daftar Gangguan Recovery Time',
-                  component: EmptyPage,
-                },
-                {
-                  path: '5',
-                  name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
-                  component: EmptyPage,
-                },
-                {
-                  path: '6',
-                  name: 'Daftar Gangguan Berdasarkan Media',
-                  component: EmptyPage,
-                },
-                {
-                  path: '7',
-                  name: 'Daftar Gangguan Diselesaikan Mobile APKT',
-                  component: EmptyPage,
-                },
-              ],
-            },
-            {
-              path: '2',
-              name: 'Rekapitulasi',
-              children: [
-                {
-                  path: '1',
-                  name: 'Rekapitulasi Gangguan All',
-                  component: EmptyPage,
-                },
-                {
-                  path: '2',
-                  name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
-                  component: EmptyPage,
-                },
-                {
-                  path: '3',
-                  name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
-                  component: EmptyPage,
-                },
-                {
-                  path: '4',
-                  name: 'Rekapitulasi Gangguan Per Posko',
-                  component: EmptyPage,
-                },
-                {
-                  path: '5',
-                  name: 'Rekapitulasi Gangguan Per Regu',
-                  component: EmptyPage,
-                },
-                {
-                  path: '6',
-                  name: 'Rekapitulasi Gangguan Per Tanggal',
-                  component: EmptyPage,
-                },
-                {
-                  path: '7',
-                  name: 'Rekapitulasi Gangguan Berdasarkan Media',
-                  component: EmptyPage,
-                },
-                {
-                  path: '8',
-                  name: 'Rekapitulasi Gangguan Alih  Posko',
-                  component: EmptyPage,
-                },
-                {
-                  path: '9',
-                  name: 'Rekapitulasi Gangguan Per Status',
-                  component: EmptyPage,
-                },
-                {
-                  path: '10',
-                  name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
-                  component: EmptyPage,
-                },
-                {
-                  path: '11',
-                  name: 'Rekapitulasi Rating Per Posko',
-                  component: EmptyPage,
-                },
-                {
-                  path: '12',
-                  name: 'Rekapitulasi Rating Per Regu',
-                  component: EmptyPage,
-                },
-                {
-                  path: '13',
-                  name: 'Rekapitulasi Koreksi Transaksi Individual',
-                  component: EmptyPage,
-                },
-                {
-                  path: '14',
-                  name: 'Rekapitulasi Cleansing Transaksi TM',
-                  component: EmptyPage,
-                },
-              ],
-            }
-          ]
-        },
-      ]
-    },
-    {
-      path: '/login',
-      name: 'Login',
-      component: LoginView
-    },
-    {
-      path: '/404',
-      name: 'Not Found',
-      component: NotFoundView
-    },
-  ]
+  routes: routes
 })
 
 router.beforeEach((to, from, next) => {
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index b9852f9..525c252 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -1,627 +1,26 @@
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { defineStore } from 'pinia'
 
-import {
-    Gauge,
-    LightningSlash,
-    Monitor,
-    Plugs,
-    SmileySad,
-    Swap
-} from '@/utils/icons'
 import type { MenuItemModel } from '@/utils/interfaces'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { convertRouteToMenu } from '@/utils/route'
+import { routes } from '@/router'
 
 export const useMenuStore = defineStore('menu', () => {
     const route = useRoute()
-    const navigation = ref<MenuItemModel[]>([
-        {
-            name: 'Gangguan',
-            href: '/home/gangguan',
-            icon: LightningSlash,
-            expanded: false,
-            children: [
-                {
-                    name: 'Daftar',
-                    href: '/home/gangguan/1',
-                    icon: LightningSlash,
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
-                            href: '/home/gangguan/1/1',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
-                            href: '/home/gangguan/1/2',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Gangguan Response Time',
-                            href: '/home/gangguan/1/3',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Gangguan Recovery Time',
-                            href: '/home/gangguan/1/4',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
-                            href: '/home/gangguan/1/5',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Gangguan Berdasarkan Media',
-                            href: '/home/gangguan/1/6',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Gangguan Diselesaikan Mobile APKT',
-                            href: '/home/gangguan/1/7',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                    ],
-                },
-                {
-                    name: 'Rekapitulasi',
-                    href: '/home/gangguan/2',
-                    icon: LightningSlash,
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Rekapitulasi Gangguan All',
-                            href: '/home/gangguan/2/1',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
-                            href: '/home/gangguan/2/2',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Per Jenis Gangguan SE 004',
-                            href: '/home/gangguan/2/3',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Per Posko',
-                            href: '/home/gangguan/2/4',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Per Regu',
-                            href: '/home/gangguan/2/5',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Per Tanggal',
-                            href: '/home/gangguan/2/6',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Berdasarkan Media',
-                            href: '/home/gangguan/2/7',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Alih  Posko',
-                            href: '/home/gangguan/2/8',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Per Status',
-                            href: '/home/gangguan/2/9',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
-                            href: '/home/gangguan/2/10',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Rating Per Posko',
-                            href: '/home/gangguan/2/11',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Rating Per Regu',
-                            href: '/home/gangguan/2/12',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Koreksi Transaksi Individual',
-                            href: '/home/gangguan/2/13',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Cleansing Transaksi TM',
-                            href: '/home/gangguan/2/14',
-                            icon: LightningSlash,
-                            expanded: false,
-                            children: [],
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: 'Keluhan',
-            href: '/home/keluhan',
-            icon: SmileySad,
-            expanded: false,
-            children: [
-                {
-                    name: 'Daftar',
-                    icon: SmileySad,
-                    href: '/home/keluhan/1',
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
-                            href: '/home/keluhan/1/1',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
-                            href: '/home/keluhan/1/2',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Keluhan Response Time',
-                            href: '/home/keluhan/1/3',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Keluhan Recovery Time',
-                            href: '/home/keluhan/1/4',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
-                            href: '/home/keluhan/1/5',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Keluhan Berdasarkan Media',
-                            href: '/home/keluhan/1/6',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Daftar Keluhan Selesai di CC123',
-                            href: '/home/keluhan/1/7',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                    ],
-                },
-                {
-                    name: 'Rekapitulasi',
-                    icon: SmileySad,
-                    href: '/home/keluhan/2',
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Rekapitulasi Keluhan All',
-                            href: '/home/keluhan/2/1',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
-                            href: '/home/keluhan/2/2',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
-                            href: '/home/keluhan/2/3',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Keluhan Per Tanggal',
-                            href: '/home/keluhan/2/4',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Keluhan Per Unit',
-                            href: '/home/keluhan/2/5',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Keluhan Berdasarkan Media',
-                            href: '/home/keluhan/2/6',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
-                            href: '/home/keluhan/2/7',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                        {
-                            name: 'Rekapitulasi Rating Per Unit',
-                            href: '/home/keluhan/2/8',
-                            icon: SmileySad,
-                            expanded: false,
-                            children: [],
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: 'Monalisa',
-            href: '/home/monalisa',
-            icon: Monitor,
-            expanded: false,
-            children: [
-                {
-                    name: 'Gangguan',
-                    icon: Monitor,
-                    href: '/home/monalisa/1',
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Rekapitulasi',
-                            href: '/home/monalisa/1/1',
-                            icon: Monitor,
-                            expanded: false,
-                            children: [
-                                {
-                                    name: 'Jumlah Kali  Gangguan',
-                                    href: '/home/monalisa/1/1/1',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Recovery Time (RCT) Gangguan',
-                                    href: '/home/monalisa/1/1/2',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Response Time (RPT) Gangguan',
-                                    href: '/home/monalisa/1/1/3',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
-                                    href: '/home/monalisa/1/1/4',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi Lapor Ulang Gangguan',
-                                    href: '/home/monalisa/1/1/5',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi ENS Gangguan',
-                                    href: '/home/monalisa/1/1/6',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi Gangguan Belum Selesai',
-                                    href: '/home/monalisa/1/1/7',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    name: 'Keluhan',
-                    icon: Monitor,
-                    href: '/home/monalisa/2',
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Rekapitulasi',
-                            href: '/home/monalisa/2/1',
-                            icon: Monitor,
-                            expanded: false,
-                            children: [
-                                {
-                                    name: 'Jumlah Kali  Keluhan',
-                                    href: '/home/monalisa/2/1/1',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Recovery Time (RCT) Keluhan',
-                                    href: '/home/monalisa/2/1/2',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Response Time (RPT) Keluhan',
-                                    href: '/home/monalisa/2/1/3',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
-                                    href: '/home/monalisa/2/1/4',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi Lapor Ulang Keluhan',
-                                    href: '/home/monalisa/2/1/5',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Rekapitulasi Keluhan Belum Selesai',
-                                    href: '/home/monalisa/2/1/6',
-                                    icon: Monitor,
-                                    expanded: false,
-                                    children: [],
-                                },
-                            ],
-                        },
-                    ],
-                },
-                {
-                    name: 'Laporan KPI',
-                    icon: Monitor,
-                    href: '/home/monalisa/3',
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Bulanan',
-                            icon: Monitor,
-                            href: '/home/monalisa/3/1',
-                            expanded: false,
-                            children: [
-                                {
-                                    name: 'Penurunan Jumlah Komplain',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/1/1',
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Aging Complaint',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/1/2',
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Energy Not Sales (ENS)',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/1/3',
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/1/4',
-                                    expanded: false,
-                                    children: [],
-                                },
-                            ],
-                        },
-                        {
-                            name: 'Kumulatif',
-                            icon: Monitor,
-                            href: '/home/monalisa/3/2',
-                            expanded: false,
-                            children: [
-                                {
-                                    name: 'Penurunan Jumlah Komplain',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/2/1',
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Aging Complaint',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/2/2',
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Energy Not Sales (ENS)',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/2/3',
-                                    expanded: false,
-                                    children: [],
-                                },
-                                {
-                                    name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
-                                    icon: Monitor,
-                                    href: '/home/monalisa/3/2/4',
-                                    expanded: false,
-                                    children: [],
-                                }
-                            ],
-                        }
-                    ],
-                },
-            ],
-        },
-        {
-            name: 'Check In Dan Check Out',
-            href: '/home/check-in-out',
-            icon: Swap,
-            expanded: false,
-            children: [
-                {
-                    name: 'Laporan Check In /Check Out (CICO)',
-                    href: '/home/check-in-out/1',
-                    icon: Swap,
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Laporan Check In /Check Out (CICO)',
-                            href: '/home/check-in-out/1/1',
-                            icon: Swap,
-                            expanded: false,
-                            children: [],
-                        },
-                    ],
-                },
-            ],
-        },
-        {
-            name: 'Anomali Penangan Pengaduan',
-            href: '/home/anomali-pengaduan',
-            icon: Plugs,
-            expanded: false,
-            children: [
-                {
-                    name: 'Gangguan',
-                    href: '/home/anomali-pengaduan/1',
-                    icon: Plugs,
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
-                            href: '/home/anomali-pengaduan/1/1',
-                            icon: Plugs,
-                            expanded: false,
-                            children: []
-                        },
-                        {
-                            name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
-                            href: '/home/anomali-pengaduan/1/2',
-                            icon: Plugs,
-                            expanded: false,
-                            children: []
-                        },
-                    ]
-                },
-                {
-                    name: 'Keluhan',
-                    href: '/home/anomali-pengaduan/2',
-                    icon: Plugs,
-                    expanded: false,
-                    children: [
-                        {
-                            name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
-                            href: '/home/anomali-pengaduan/2/1',
-                            icon: Plugs,
-                            expanded: false,
-                            children: []
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            name: 'CTT & KWH Periksa',
-            href: '/home/ctt-kwh-periksa',
-            icon: Gauge,
-            expanded: false,
-            children: [
-                {
-                    name: 'Laporan CTT & KWH Periksa',
-                    href: '/home/ctt-kwh-periksa/1',
-                    icon: Gauge,
-                    expanded: false,
-                    children: []
-                }
-            ]
-        }
-    ])
+    const navigation = ref<MenuItemModel[]>([])
     const sidebarOpen = ref(false)
     const sidebarShowed = ref(true)
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
-    const toggleSidebarMenu = (href: string, newExpanded: boolean): void => {
+    const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
         const toggleItemExpanded = (items: MenuItemModel[]): void => {
             for (const item of items) {
-                if (item.href === href) {
+                if (item.path === path) {
                     item.expanded = newExpanded
                 } else {
                     if (newExpanded) {
-                        if (!href.includes(item.href)) {
+                        if (!path.includes(item.path)) {
                             item.expanded = !newExpanded;
                         }
                     }
@@ -635,6 +34,12 @@ export const useMenuStore = defineStore('menu', () => {
         toggleItemExpanded(navigation.value)
     }
     const toggleSidebarDesktop = () => (sidebarShowed.value = !sidebarShowed.value)
+
+    onMounted(() => {
+        const menuData = convertRouteToMenu(routes.at(0)?.children || [])
+        navigation.value = menuData
+    })
+
     return {
         navigation,
         toggleSidebar,
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index d110266..4faeed8 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -1,6 +1,6 @@
 interface MenuItemModel {
     name: string;
-    href: string;
+    path: string;
     icon: any;
     expanded: boolean;
     children: MenuItemModel[];