diff --git a/package-lock.json b/package-lock.json
index f312524..baae450 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9257,9 +9257,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
-      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 04eb334..50c023a 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1502,6 +1502,10 @@ body {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1719,6 +1723,11 @@ body {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.bg-blue-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1894,6 +1903,14 @@ body {
      object-fit: contain;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -2191,6 +2208,11 @@ body {
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
+.text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
+
 .text-dark {
   --tw-text-opacity: 1;
   color: rgb(21 22 23 / var(--tw-text-opacity));
@@ -2433,6 +2455,10 @@ body {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
 }
 
+.ring-blue-700\/10 {
+  --tw-ring-color: rgb(29 78 216 / 0.1);
+}
+
 .ring-gray-300 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 300a4e3..3343109 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -6,10 +6,6 @@ const props = defineProps({
     type: String as () => 'button' | 'submit' | 'reset',
     default: 'button'
   },
-  onClick: {
-    type: Function as unknown as () => (payload: MouseEvent) => void,
-    default: () => {}
-  },
   label: {
     type: String,
     default: ''
@@ -47,12 +43,14 @@ const buttonStyle = computed(() => {
       return 'bg-none text-primary-500 border border-transparent hover:border-primary-500 rounded-lg disabled:border-primary-300 disabled:text-primary-300'
   }
 })
+
+const emit = defineEmits(['on:click'])
 </script>
 
 <template>
   <button
     :type="type"
-    @click="onClick"
+    @click="emit('on:click')"
     :disabled="isLoading ? true : disabled"
     :class="['px-3 py-2 text-sm font-semibold', buttonStyle, className]"
   >
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 5edb2c7..e990d36 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,27 +1,41 @@
 <script setup lang="ts">
-import { useDateStore } from '@/stores/date';
-import { PhCalendarBlank } from '@phosphor-icons/vue';
+// import { useDateStore } from '@/stores/date';
+import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
+
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+
 const dateValue = ref('')
 const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
 })
-watch(dateValue, (newValue) => {
-  useDateStore().setDateValue(newValue);
 
+const emit = defineEmits(['update:dateValue'])
+
+watch(dateValue, (newValue) => {
+  emit('update:dateValue', newValue)
 })
 </script>
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="false"
-      :auto-apply="false" as-single use-range v-slot="{ value, placeholder }">
+    <vue-tailwind-datepicker
+      v-model="dateValue"
+      :formatter="formatter"
+      separator=" s/d "
+      :shortcuts="false"
+      :auto-apply="false"
+      as-single
+      use-range
+      v-slot="{ value, placeholder }"
+    >
       <div class="flex">
         <div class="flex-1">
-          <button type="button"
-            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0">
+          <button
+            type="button"
+            class="w-full flex items-center justify-between px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>
@@ -31,4 +45,4 @@ watch(dateValue, (newValue) => {
       </div>
     </vue-tailwind-datepicker>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
index ccc5c47..55619b2 100644
--- a/src/components/Form/Filters.vue
+++ b/src/components/Form/Filters.vue
@@ -1,44 +1,51 @@
 <script setup lang="ts">
-  // components
-  import Button from '@/components/Button.vue';
-  import { useSearchStore } from '@/stores/filtersAction';
-   // icons
-  import {
-    PhArrowsCounterClockwise, 
-    PhFileText,
-    PhMagnifyingGlass 
-  } from '@phosphor-icons/vue';
-  const cariButton = useSearchStore()
-  defineProps({
-    reportButton: {
-      type: Boolean,
-      default: false
-    }
-  })
+// components
+import Button from '@/components/Button.vue'
+import { useSearchStore } from '@/stores/filtersAction'
+
+// icons
+import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
+const cariButton = useSearchStore()
+defineProps({
+  reportButton: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['runSearch'])
 </script>
 
 <template>
   <div class="filters rounded-2xl">
-
     <form class="filter-body bg-gray-50 mx-auto space-y-3 p-4 rounded-t-2xl">
       <slot></slot>
     </form>
-    
+
     <div class="filter-footer rounded-b-2xl px-4 py-3 bg-primary-50 flex justify-end">
       <div class="filter-buttons flex gap-3 flex-wrap">
-        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Ulangi" style-type="outline" class-name="bg-white">
+        <Button
+          @click="() => (cariButton.isTriggerChange = !cariButton.isTriggerChange)"
+          label="Ulangi"
+          style-type="outline"
+          class-name="bg-white"
+        >
           <PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
+        <Button
+          v-if="reportButton"
+          label="Lihat Laporan"
+          style-type="outline"
+          class-name="bg-white"
+        >
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
-        <Button @click="()=>cariButton.isTriggerChange = !cariButton.isTriggerChange" label="Cari Data">
-          <PhMagnifyingGlass  size="18" class="ml-1" weight="regular" />
+        <Button @on:click="() => emit('runSearch')" label="Cari Data">
+          <PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
         </Button>
       </div>
     </div>
-    
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 8be577b..01c5a96 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -1,58 +1,109 @@
 <script setup lang="ts">
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchData,
+  items,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
-import { ref } from 'vue';
-fetchData();
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const poskoPlaceholder = 'Semua Posko';
-const uppp = ref({ id: 0, name: uppPlaceholder });
-const uid = ref({ id: 0, name:uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+// fetchData();
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const uppp = ref({ id: 0, name: uppPlaceholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+
+const emit = defineEmits(['update:filters'])
+
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: posko.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
 
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  uppp.value = { id: 0, name: uppPlaceholder };
-};
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value.uid = value
+}
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
-  selectedUp3Posko(value);
-  posko.value = { id: 0, name: poskoPlaceholder };
-};
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
 
 const setPosko = (value: any) => {
-  posko.value = value;
-  selectedPosko(value);
-};
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+})
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select @update:selected="setUid($event)" :data="items" 
-    :placeholder="uidPlaceholder" />
+    <Select
+      :data="items"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp"
-      :placeholder="uppPlaceholder" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :selected="uppp"
+      :placeholder="uppPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" 
-    :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker  />
+    <DatePicker
+      @update:date-value="
+        (value) => {
+          data.periode = value
+        }
+      "
+    />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index 6bf4d78..422ead4 100644
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
@@ -44,4 +44,6 @@ const departments = [
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
     <DatePicker  />
   </div>
-</template>
\ No newline at end of file
+</template> -->
+
+<template></template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 4dd4293..b336b66 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!-- <script setup lang="ts">
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
@@ -49,4 +49,6 @@ import { useTotalReport } from '@/stores/totalReport';
       <InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
     </div>
   </div>
-</template>
+</template> -->
+
+<template></template>
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 088f0ad..83debbb 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,205 +1,339 @@
 <template>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :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"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxSelection mode="single" />
-            <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <DxLoadPanel :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+  <Filters @run-search="() => console.log(filters)" class="mb-4">
+    <Type1
+      @update:filters="
+        (value) => {
+          filters = value
+        }
+      "
+    />
+  </Filters>
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No Laporan" cell-template="data" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :remote-operations="true"
+      :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"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20, 'all']"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxSelection mode="single" />
+      <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
-                caption="Pembuat Laporan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_laporan"
-                caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_dialihkan"
-                caption="Tgl Dialihkan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_respon"
-                caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tanggal_recovery"
-                caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
-                caption="Durasi Response Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_asal"
-                caption="Posko Awal" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
-                caption="Posko Tujuan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
-                cell-template="data" />
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="pembuat_laporan"
+        caption="Pembuat Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="tanggal_laporan"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="tanggal_dialihkan"
+        caption="Tgl Dialihkan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="tanggal_respon"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="tanggal_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_respon_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="posko_asal"
+        caption="Posko Awal"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="posko_tujuan"
+        caption="Posko Tujuan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="posko"
+        caption="Posko"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Dialihkan ke Posko Lain"
+    @on-close="closeDetail"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
+        <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
+        <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
+        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Pembuat Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Dialihkan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_dialihkan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Respon:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_respon" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.tanggal_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Durasi Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_respon" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Durasi Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Posko Awal:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.posko_awal" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Posko Tujuan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.posko_tujuan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    IDPEL/NO METER:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.id_pelanggan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Pembuat Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.sumber_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Posko:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
-            </div>
-        </div>
-
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+// filters components
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -208,55 +342,54 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
 import { useDialogStore } from '@/stores/dialog'
-import { useFiltersStore } from '@/stores/filters'
 import { useDateStore } from '@/stores/date'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useUp3Store } from '@/stores/up3';
-import { useRegionStore } from '@/stores/region';
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+import { useSearchStore } from '@/stores/filtersAction'
+import { usePostsStore } from '@/stores/posts'
+import { useUp3Store } from '@/stores/up3'
+import { useRegionStore } from '@/stores/region'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  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')
+    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')
-            })
-        })
+    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
-    }
+    e.cancel = true
+  }
 }
 
 const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
@@ -285,59 +418,61 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       waktu_response
     }
   }
-`;
-const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN, {
+`
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN,
+  {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: '',
     idUid: 0,
-    idUp3: 0,
-})
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
-    refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [...data.value, {
-                    ...item,
-                    pembuat_laporan: '-'
-                }];
-            });
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-})
+    idUp3: 0
+  }
+)
+// const reportButton = useSearchStore()
+// const detected = computed(() => reportButton.isTriggerChange)
+// watch(detected, () => {
+//   const dateValue = useDateStore().getDateValue().split(' s/d ')
+//   const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
+//   const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
+//   const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+//   refetch({
+//     dateFrom: dateValue[0].split('-').reverse().join('-'),
+//     dateTo: dateValue[1].split('-').reverse().join('-'),
+//     posko: posko,
+//     idUid: uid,
+//     idUp3: up3
+//   })
+//   onResult((queryResult) => {
+//     if (queryResult.data != undefined) {
+//       queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+//         data.value = [
+//           ...data.value,
+//           {
+//             ...item,
+//             pembuat_laporan: '-'
+//           }
+//         ]
+//       })
+//     }
+//     console.log(queryResult.data)
+//     console.log(queryResult.loading)
+//     console.log(queryResult.networkStatus)
+//   })
+//   onError((error) => {
+//     console.log(error)
+//   })
+// })
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    dataDetail.value = data
-    console.log(data)
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+  console.log(data)
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-    });
-})
-</script>
\ No newline at end of file
+
+// filters handler
+const filters = ref()
+</script>
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index a22e1af..05786d5 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -1,25 +1,20 @@
 <template>
-    <main
-        class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
-        <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-            <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
-        </div>
-        <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.component">
-                <component :is="filters.config.component" />
-            </Filters>
-
-            <slot></slot>
-        </div>
-    </main>
+  <main
+    class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
+  >
+    <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
+      <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
+    </div>
+    <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
+      <slot></slot>
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useFiltersStore } from '@/stores/filters';
-
-import Filters from '../Form/Filters.vue'
+import { useFiltersStore } from '@/stores/filters'
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
@@ -27,4 +22,4 @@ const route = useRoute()
 // Dapatkan nama rute menggunakan computed property
 const pageTitle = computed(() => route.name)
 const filters = useFiltersStore()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 52ced6f..1ac3be2 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface DataItem {
-  id: number;
-  name: string;
+  id: number
+  name: string
 }
 
 import { ref, computed, watch } from 'vue'
@@ -29,25 +29,26 @@ const props = defineProps({
     default: () => ({ id: 0, name: '' })
   }
 })
-const emit = defineEmits(["update:selected"])
+const emit = defineEmits(['update:selected'])
 
-const data = computed(() => [{ id:0, name: props.placeholder }, ...props.data]);
+const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
 
 computed(() => {
   if (props.selected.id === 0) {
-    selected.value = { id:0, name: props.placeholder }
+    selected.value = { id: 0, name: props.placeholder }
   }
 
-  console.log('selected', selected.value.name);
-  
+  // console.log('selected', selected.value.name)
 })
 
-watch(() => props.selected, (value) => {
-  if (value.id === 0) {
-    selected.value = { id:0, name: props.placeholder }
+watch(
+  () => props.selected,
+  (value) => {
+    if (value.id === 0) {
+      selected.value = { id: 0, name: props.placeholder }
+    }
   }
-})
-
+)
 
 let selected = ref<DataItem>(data.value[0])
 let query = ref('')
@@ -55,56 +56,86 @@ let filteredData = computed(() =>
   query.value === ''
     ? data.value
     : data.value.filter((item: DataItem) =>
-      item.name
-        .toLowerCase()
-        .replace(/\s+/g, '')
-        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
-    )
+        item.name
+          .toLowerCase()
+          .replace(/\s+/g, '')
+          .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+      )
 )
 
+watch(selected, (value) => {
+  emit('update:selected', value)
+})
+
 const show = ref(false)
-
-
 </script>
 
 <template>
-  <Combobox  
-  @update:modelValue="value => emit('update:selected', value)"
-  v-model="selected" v-slot="{ open }">
+  <Combobox
+    @update:modelValue="(value) => emit('update:selected', value)"
+    v-model="selected"
+    v-slot="{ open }"
+  >
     <div class="relative mt-1">
       <div
-        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left 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 border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
-          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
-          @click="show = true" @blur="show = false" defaultValue="" />
+        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left 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 border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          :displayValue="(item: any) => (show || open ? '' : item.name)"
+          @change="query = $event.target.value"
+          @click="show = true"
+          @blur="show = false"
+          defaultValue=""
+        />
 
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-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 static
-          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-          <div v-if="filteredData.length === 0 && query !== ''"
-            class="relative cursor-default select-none py-2 px-4 text-gray-700">
+      <TransitionRoot
+        :show="show || open"
+        leave="transition ease-in duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+        @after-leave="query = ''"
+      >
+        <ComboboxOptions
+          static
+          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        >
+          <div
+            v-if="filteredData.length === 0 && query !== ''"
+            class="relative cursor-default select-none py-2 px-4 text-gray-700"
+          >
             Nothing found.
           </div>
-        
-          <ComboboxOption v-for="item in filteredData" 
-          as="template" :key="item.id" :value="item"
-            v-slot="{ selected, active }">
-            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
-              'bg-teal-600 text-white': active,
-              'text-gray-900': !active
-            }">
-              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+
+          <ComboboxOption
+            v-for="item in filteredData"
+            as="template"
+            :key="item.id"
+            :value="item"
+            v-slot="{ selected, active }"
+          >
+            <li
+              class="relative cursor-default select-none py-2 pl-10 pr-4"
+              :class="{
+                'bg-teal-600 text-white': active,
+                'text-gray-900': !active
+              }"
+            >
+              <span
+                class="block truncate"
+                :class="{ 'font-medium': selected, 'font-normal': !selected }"
+              >
                 {{ item.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 }">
+              <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="h-5 w-5" aria-hidden="true" />
               </span>
             </li>
diff --git a/src/router/index.ts b/src/router/index.ts
index e79991c..592d3ea 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,3 @@
-
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import HomeView from '@/views/HomeView.vue'
@@ -28,7 +27,7 @@ import {
   GangguanTable17,
   GangguanTable18,
   GangguanTable19,
-  GangguanTable20,
+  GangguanTable20
 } from '@/components/Pages/Gangguan'
 import {
   KeluhanTable1,
@@ -45,7 +44,7 @@ import {
   KeluhanTable12,
   KeluhanTable13,
   KeluhanTable14,
-  KeluhanTable15,
+  KeluhanTable15
 } from '@/components/Pages/Keluhan'
 import {
   MonalisaTable1,
@@ -74,7 +73,12 @@ import {
   MonalisaTable9
 } from '@/components/Pages/Monalisa'
 import { CicoTable1 } from '@/components/Pages/Cico'
-import { AnomaliTable1, AnomaliTable2, AnomaliTable3, AnomaliTable5 } from '@/components/Pages/Anomali'
+import {
+  AnomaliTable1,
+  AnomaliTable2,
+  AnomaliTable3,
+  AnomaliTable5
+} from '@/components/Pages/Anomali'
 import { CttTable1 } from '@/components/Pages/Ctt'
 import { MaterialTable1, MaterialTable2 } from '@/components/Pages/Material'
 import { TransaksiTable1 } from '@/components/Pages/Transaksi'
@@ -89,7 +93,7 @@ export const routes: RouteRecordRaw[] = [
       {
         path: '',
         name: 'Home Page',
-        component: WelcomePage,
+        component: WelcomePage
       },
       {
         path: 'gangguan',
@@ -102,43 +106,43 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-                component: GangguanTable1,
+                component: GangguanTable1
               },
               {
                 path: '2',
                 name: 'Daftar Gangguan Melapor Lebih Dari 1 Kali',
-                component: GangguanTable2,
+                component: GangguanTable2
               },
               {
                 path: '3',
                 name: 'Daftar Gangguan Response Time',
-                component: GangguanTable3,
+                component: GangguanTable3
               },
               {
                 path: '4',
                 name: 'Daftar Gangguan Recovery Time',
-                component: GangguanTable4,
+                component: GangguanTable4
               },
               {
                 path: '5',
                 name: 'Daftar Gangguan Selesai Tanpa ID Pelanggan',
-                component: GangguanTable5,
+                component: GangguanTable5
               },
               {
                 path: '6',
                 name: 'Daftar Gangguan Berdasarkan Media',
-                component: GangguanTable6,
+                component: GangguanTable6
               },
               {
                 path: '7',
                 name: 'Daftar Gangguan Diselesaikan Mobile APKT',
-                component: GangguanTable7,
+                component: GangguanTable7
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: 'rekapitulasi',
@@ -147,77 +151,77 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Gangguan All',
-                component: GangguanTable8,
+                component: GangguanTable8
               },
               {
                 path: '2',
                 name: 'Rekapitulasi Gangguan/Jenis Gangguan',
-                component: GangguanTable9,
+                component: GangguanTable9
               },
               {
                 path: '3',
                 name: 'Rekapitulasi Gangguan/Jenis Gangguan SE 004',
-                component: GangguanTable10,
+                component: GangguanTable10
               },
               {
                 path: '4',
                 name: 'Rekapitulasi Gangguan Per Posko',
-                component: GangguanTable11,
+                component: GangguanTable11
               },
               {
                 path: '5',
                 name: 'Rekapitulasi Gangguan Per Regu',
-                component: GangguanTable12,
+                component: GangguanTable12
               },
               {
                 path: '6',
                 name: 'Rekapitulasi Gangguan Per Tanggal',
-                component: GangguanTable13,
+                component: GangguanTable13
               },
               {
                 path: '7',
                 name: 'Rekapitulasi Gangguan Berdasarkan Media',
-                component: GangguanTable14,
+                component: GangguanTable14
               },
               {
                 path: '8',
                 name: 'Rekapitulasi Gangguan Alih  Posko',
-                component: GangguanTable15,
+                component: GangguanTable15
               },
               {
                 path: '9',
                 name: 'Rekapitulasi Gangguan Diselesaikan Mobile APKT',
-                component: GangguanTable16,
+                component: GangguanTable16
               },
               {
                 path: '10',
                 name: 'Rekapitulasi Rating Per Posko',
-                component: GangguanTable17,
+                component: GangguanTable17
               },
               {
                 path: '11',
                 name: 'Rekapitulasi Rating Per Regu',
-                component: GangguanTable18,
+                component: GangguanTable18
               },
               {
                 path: '12',
                 name: 'Rekapitulasi Koreksi Transaksi Individual',
-                component: GangguanTable19,
+                component: GangguanTable19
               },
               {
                 path: '13',
                 name: 'Rekapitulasi Cleansing Transaksi TM',
-                component: GangguanTable20,
+                component: GangguanTable20
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
         ]
       },
@@ -232,43 +236,43 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Keluhan Dialihkan Ke Unit Lain',
-                component: KeluhanTable1,
+                component: KeluhanTable1
               },
               {
                 path: '2',
                 name: 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali',
-                component: KeluhanTable2,
+                component: KeluhanTable2
               },
               {
                 path: '3',
                 name: 'Daftar Keluhan Response Time',
-                component: KeluhanTable3,
+                component: KeluhanTable3
               },
               {
                 path: '4',
                 name: 'Daftar Keluhan Recovery Time',
-                component: KeluhanTable4,
+                component: KeluhanTable4
               },
               {
                 path: '5',
                 name: 'Daftar Keluhan Selesai Tanpa ID Pelanggan',
-                component: KeluhanTable5,
+                component: KeluhanTable5
               },
               {
                 path: '6',
                 name: 'Daftar Keluhan Berdasarkan Media',
-                component: KeluhanTable6,
+                component: KeluhanTable6
               },
               {
                 path: '7',
                 name: 'Daftar Keluhan Selesai di CC123',
-                component: KeluhanTable7,
+                component: KeluhanTable7
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: 'rekapitulasi',
@@ -277,54 +281,54 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Keluhan All',
-                component: KeluhanTable8,
+                component: KeluhanTable8
               },
               {
                 path: '2',
                 name: 'Rekapitulasi Keluhan Per Fungsi Bidang',
-                component: KeluhanTable9,
+                component: KeluhanTable9
               },
               {
                 path: '3',
                 name: 'Rekapitulasi Keluhan Per Jenis Keluhan',
-                component: KeluhanTable10,
+                component: KeluhanTable10
               },
               {
                 path: '4',
                 name: 'Rekapitulasi Keluhan Per Kelompok Keluhan',
-                component: KeluhanTable11,
+                component: KeluhanTable11
               },
               {
                 path: '5',
                 name: 'Rekapitulasi Keluhan Per Tanggal',
-                component: KeluhanTable12,
+                component: KeluhanTable12
               },
               {
                 path: '6',
                 name: 'Rekapitulasi Keluhan Per Unit',
-                component: KeluhanTable13,
+                component: KeluhanTable13
               },
               {
                 path: '7',
                 name: 'Rekapitulasi Keluhan Berdasarkan Media',
-                component: KeluhanTable14,
+                component: KeluhanTable14
               },
               {
                 path: '8',
                 name: 'Rekapitulasi Rating Per Unit',
-                component: KeluhanTable15,
+                component: KeluhanTable15
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
-        ],
+        ]
       },
       {
         path: 'monalisa',
@@ -341,59 +345,59 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Jumlah Kali  Gangguan',
-                    component: MonalisaTable1,
+                    component: MonalisaTable1
                   },
                   {
                     path: '2',
                     name: 'Dispacthing Time (DT) Gangguan',
-                    component: MonalisaTable2,
+                    component: MonalisaTable2
                   },
                   {
                     path: '3',
                     name: 'Recovery Time (RCT) Gangguan',
-                    component: MonalisaTable3,
+                    component: MonalisaTable3
                   },
                   {
                     path: '4',
                     name: 'Response Time (RPT) Gangguan',
-                    component: MonalisaTable4,
+                    component: MonalisaTable4
                   },
                   {
                     path: '5',
                     name: 'Jumlah dan Durasi RPT RCT Gangguan',
-                    component: MonalisaTable5,
+                    component: MonalisaTable5
                   },
                   {
                     path: '6',
                     name: 'Rekapitulasi Gangguan Per Jenis Gangguan',
-                    component: MonalisaTable6,
+                    component: MonalisaTable6
                   },
                   {
                     path: '7',
                     name: 'Rekapitulasi Lapor Ulang Gangguan',
-                    component: MonalisaTable7,
+                    component: MonalisaTable7
                   },
                   {
                     path: '8',
                     name: 'Rekapitulasi ENS Gangguan',
-                    component: MonalisaTable8,
+                    component: MonalisaTable8
                   },
                   {
                     path: '9',
                     name: 'Rekapitulasi Gangguan Belum Selesai',
-                    component: MonalisaTable9,
+                    component: MonalisaTable9
                   },
                   {
                     path: ':pathMatch(.*)*',
-                    component: EmptyPage,
+                    component: EmptyPage
                   }
-                ],
+                ]
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: 'keluhan',
@@ -406,49 +410,49 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Jumlah Kali Keluhan',
-                    component: MonalisaTable10,
+                    component: MonalisaTable10
                   },
                   {
                     path: '2',
                     name: 'Recovery Time (RCT) Keluhan',
-                    component: MonalisaTable11,
+                    component: MonalisaTable11
                   },
                   {
                     path: '3',
                     name: 'Response Time (RPT) Keluhan',
-                    component: MonalisaTable12,
+                    component: MonalisaTable12
                   },
                   {
                     path: '4',
                     name: 'Jumlah dan Durasi RPT RCT Keluhan',
-                    component: MonalisaTable13,
+                    component: MonalisaTable13
                   },
                   {
                     path: '5',
                     name: 'Rekapitulasi Gangguan Per Jenis Keluhan',
-                    component: MonalisaTable14,
+                    component: MonalisaTable14
                   },
                   {
                     path: '6',
                     name: 'Rekapitulasi Lapor Ulang Keluhan',
-                    component: MonalisaTable15,
+                    component: MonalisaTable15
                   },
                   {
                     path: '7',
                     name: 'Rekapitulasi Keluhan Belum Selesai',
-                    component: MonalisaTable16,
+                    component: MonalisaTable16
                   },
                   {
                     path: ':pathMatch(.*)*',
-                    component: EmptyPage,
+                    component: EmptyPage
                   }
-                ],
+                ]
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: 'laporan-kpi',
@@ -461,28 +465,28 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: '(Monalisa) Penurunan Jumlah Komplain',
-                    component: MonalisaTable17,
+                    component: MonalisaTable17
                   },
                   {
                     path: '2',
                     name: '(Monalisa) Aging Complaint',
-                    component: MonalisaTable18,
+                    component: MonalisaTable18
                   },
                   {
                     path: '3',
                     name: '(Monalisa) Energy Not Sales (ENS)',
-                    component: MonalisaTable19,
+                    component: MonalisaTable19
                   },
                   {
                     path: '4',
                     name: '(Monalisa) Kepatuhan dan Akurasi Dalam Pelaporan',
-                    component: MonalisaTable20,
+                    component: MonalisaTable20
                   },
                   {
                     path: ':pathMatch(.*)*',
-                    component: EmptyPage,
+                    component: EmptyPage
                   }
-                ],
+                ]
               },
               {
                 path: 'kumulatif',
@@ -491,40 +495,40 @@ export const routes: RouteRecordRaw[] = [
                   {
                     path: '1',
                     name: 'Penurunan Jumlah Komplain',
-                    component: MonalisaTable21,
+                    component: MonalisaTable21
                   },
                   {
                     path: '2',
                     name: 'Aging Complaint',
-                    component: MonalisaTable22,
+                    component: MonalisaTable22
                   },
                   {
                     path: '3',
                     name: 'Energy Not Sales (ENS)',
-                    component: MonalisaTable23,
+                    component: MonalisaTable23
                   },
                   {
                     path: '4',
                     name: 'Kepatuhan dan Akurasi  Dalam Pelaporan',
-                    component: MonalisaTable24,
+                    component: MonalisaTable24
                   },
                   {
                     path: ':pathMatch(.*)*',
-                    component: EmptyPage,
+                    component: EmptyPage
                   }
-                ],
+                ]
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
-              },
-            ],
+                component: EmptyPage
+              }
+            ]
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
-          },
-        ],
+            component: EmptyPage
+          }
+        ]
       },
       {
         path: 'check-in-out',
@@ -537,19 +541,19 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Check In /Check Out (CICO)',
-                component: CicoTable1,
+                component: CicoTable1
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
-        ],
+        ]
       },
       {
         path: 'anomali-pengaduan',
@@ -562,18 +566,18 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Unit',
-                component: AnomaliTable1,
+                component: AnomaliTable1
               },
               {
                 path: '2',
                 name: 'Laporan Anomali Penangan Pengaduan Gangguan Petugas',
-                component: AnomaliTable3,
+                component: AnomaliTable3
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: 'keluhan',
@@ -582,19 +586,19 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Laporan Anomali Penangan Pengaduan Keluhan Unit',
-                component: AnomaliTable5,
+                component: AnomaliTable5
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
-        ],
+        ]
       },
       {
         path: 'ctt-kwh-periksa',
@@ -603,13 +607,13 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Laporan CTT & KWH Periksa',
-            component: CttTable1,
+            component: CttTable1
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
-        ],
+        ]
       },
       {
         path: 'material',
@@ -622,13 +626,13 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Gangguan Dan Material Yang Dipakai',
-                component: MaterialTable1,
+                component: MaterialTable1
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: 'rekapitulasi',
@@ -637,19 +641,19 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Rekapitulasi Pemakaian Material',
-                component: MaterialTable2,
+                component: MaterialTable2
               },
               {
                 path: ':pathMatch(.*)*',
-                component: EmptyPage,
+                component: EmptyPage
               }
-            ],
+            ]
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
-        ],
+        ]
       },
       {
         path: 'transaksi',
@@ -658,13 +662,13 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Transaksi APKT',
-            component: TransaksiTable1,
+            component: TransaksiTable1
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
-        ],
+        ]
       },
       {
         path: 'pencarian-data',
@@ -673,17 +677,17 @@ export const routes: RouteRecordRaw[] = [
           {
             path: '1',
             name: 'Pencarian Report Number',
-            component: PencarianDataTable1,
+            component: PencarianDataTable1
           },
           {
             path: ':pathMatch(.*)*',
-            component: EmptyPage,
+            component: EmptyPage
           }
         ]
       },
       {
         path: ':pathMatch(.*)*',
-        component: EmptyPage,
+        component: EmptyPage
       }
     ]
   },
@@ -711,46 +715,45 @@ export const routes: RouteRecordRaw[] = [
 ]
 
 export const mergeChildrenRoutes = (routes: RouteRecordRaw[]): RouteRecordRaw[] => {
-  const mergedRoutes: RouteRecordRaw[] = [];
+  const mergedRoutes: RouteRecordRaw[] = []
 
   for (const route of routes) {
     if (route.children && route.children.length > 0) {
       // Buat salinan route tanpa children
-      const topLevelRoute: RouteRecordRaw = { ...route, children: [] };
+      const topLevelRoute: RouteRecordRaw = { ...route, children: [] }
 
       // 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 fullPath = `${route.path}/${childRoute.path}`.replace(/\/+/g, '/')
+        const mergedChildRoute: RouteRecordRaw = { ...childRoute, path: fullPath }
+        topLevelRoute.children?.push(mergedChildRoute)
       }
 
-      mergedRoutes.push(topLevelRoute);
+      mergedRoutes.push(topLevelRoute)
     } else {
       // Jika route tidak memiliki children, tambahkan as is
-      mergedRoutes.push(route);
+      mergedRoutes.push(route)
     }
   }
 
-  return mergedRoutes;
+  return mergedRoutes
 }
 
 export const extractLeafRoutes = (routes: RouteRecordRaw[], parentPath = ''): RouteRecordRaw[] => {
-  const leafRoutes: RouteRecordRaw[] = [];
+  const leafRoutes: RouteRecordRaw[] = []
 
   for (const route of routes) {
-
-    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/');
+    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, '/')
 
     if (route.children && route.children.length > 0) {
-      leafRoutes.push(...extractLeafRoutes(route.children, fullPath));
+      leafRoutes.push(...extractLeafRoutes(route.children, fullPath))
     } else {
-      const leafRoute = { ...route, path: fullPath };
-      leafRoutes.push(leafRoute);
+      const leafRoute = { ...route, path: fullPath }
+      leafRoutes.push(leafRoute)
     }
   }
 
-  return leafRoutes;
+  return leafRoutes
 }
 
 export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
@@ -770,14 +773,27 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
         getRoute(r.children, `${parent}/${r.path}`)
       } else {
         const fullPath = `${parent.replace('/', '')}/${r.path.replace('/', '')}`
-        if (newRoute.find((nr) => nr.path !== '/' && nr.path === '/home' && fullPath.includes(nr.path))) {
+        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/', '') : fullPath,
-              name: r.name,
-              component: r.component
-            } as RouteRecordRaw]
+            ...newRoute[index],
+            children: [
+              ...(newRoute[index].children ?? []),
+              {
+                path:
+                  fullPath === '/home/'
+                    ? ''
+                    : fullPath.includes('/home/')
+                    ? fullPath.replace('/home/', '')
+                    : fullPath,
+                name: r.name,
+                component: r.component
+              } as RouteRecordRaw
+            ]
           }
         } else {
           newRoute.push({
@@ -792,25 +808,26 @@ export const fixRoute = (route: RouteRecordRaw[]): RouteRecordRaw[] => {
   getRoute(route)
 
   // remove duplicate route path and sort by path length
-  const uniqueRoute = newRoute.filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index).sort((a, b) => b.path.length - a.path.length)
+  const uniqueRoute = newRoute
+    .filter((nr, index, self) => self.findIndex((n) => n.path === nr.path) === index)
+    .sort((a, b) => b.path.length - a.path.length)
   // console.log('route', newRoute);
 
   // return uniqueRoute
   return newRoute
 }
 
-
 const router = createRouter({
   history: createWebHistory(),
   linkActiveClass: 'active',
   stringifyQuery: qs.stringify,
   routes: fixRoute(routes),
-  strict: true,
+  strict: true
 })
 
 router.beforeEach((to, from, next) => {
   // redirect to login page if not logged in and trying to access a restricted page
-  const auth = useAuthStore();
+  const auth = useAuthStore()
 
   // if to is not found, redirect to 404
   if (to.matched.length === 0) {