From 9cd11db6e630cab70eb7ef839ec69d382e032081 Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 9 Feb 2024 18:37:00 +0700
Subject: [PATCH 01/17] Fix select options in Filters.vue component

---
 src/components/Form/Filters.vue              |  1 +
 src/components/Form/FiltersType/Type1.vue    | 48 +++++---------------
 src/components/Form/FiltersType/reference.ts | 12 ++---
 3 files changed, 17 insertions(+), 44 deletions(-)

diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
index 55619b2..8adf19a 100644
--- a/src/components/Form/Filters.vue
+++ b/src/components/Form/Filters.vue
@@ -1,3 +1,4 @@
+<!-- ss -->
 <script setup lang="ts">
 // components
 import Button from '@/components/Button.vue'
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 01c5a96..4e4d0aa 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -4,24 +4,21 @@ import {
   selectedUid,
   selectedUp3Posko,
   selectedPosko,
-  fetchData,
-  items,
+  fetchUid,
+  itemsUid,
   itemsUp3,
   itemsPosko
 } from './reference'
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.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 })
-
 const emit = defineEmits(['update:filters'])
-
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
@@ -54,56 +51,35 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
+  fetchUid();
   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
-      :data="items"
-      @update:selected="setUid($event)"
-      :placeholder="uidPlaceholder"
-      :selected="uid"
-    />
+    <Select :data="itemsUid" @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
-      @update:date-value="
-        (value) => {
-          data.periode = value
-        }
-      "
-    />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index edc87e8..8636f13 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -30,18 +30,17 @@ const years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
-const timeout = ref()
-const items = ref<Item[]>([]);
+const itemsUid = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
 const itemsPosko = ref<Item[]>([]);
 const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
 // Fetch data from the API using Axios
-const fetchData = async () => {
+const fetchUid = async () => {
   try {
     const res = await getUid()
-    items.value = res.data.map((item: any) => (
+    itemsUid.value = res.data.map((item: any) => (
       {
         id: item.id,
         name: item.nama,
@@ -82,8 +81,6 @@ const fetchDataUlp = async (up3: number) => {
   }
 }
 const fetchDataPosko = async (up3: number) => {
-  clearTimeout(timeout.value)
-  timeout.value = setTimeout(async () => {
     try {
       const res = await getPosko(up3)
       itemsPosko.value = res.data.map((item: any) => (
@@ -95,7 +92,6 @@ const fetchDataPosko = async (up3: number) => {
     } catch (error) {
       console.error('Error fetching data:', error);
     }
-  }, 300);
 };
 const fetchMedia = () => {
   itemsMedia.value = [
@@ -152,4 +148,4 @@ const selectedUlp = (value: any) => {
 
 
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchData,fetchMedia,fetchStatus, items, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchUid,fetchMedia,fetchStatus, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };

From 6296078f2bb10d3ac302018c44133fc28c3eceb4 Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 9 Feb 2024 19:33:24 +0700
Subject: [PATCH 02/17] Refactor data fetching in Type1.vue component

---
 src/components/Form/FiltersType/Type1.vue    |  1 -
 src/components/Form/FiltersType/reference.ts | 21 ++++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 0e75dc9..8c0adbd 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -51,7 +51,6 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
-  fetchUid();
   emit('update:filters', data.value)
   fetchUid()
 })
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index c4da6bb..c5f959f 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -30,17 +30,17 @@ for (let i = 0; i < 5; i++) {
   years.value.push({id:year-i, name: year-i})
 }
 const timeout = ref()
-const items = ref<Item[]>([]);
+const itemsUid = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
 const itemsPosko = ref<Item[]>([]);
 const itemsUlp =  ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
 // Fetch data from the API using Axios
-const fetchData = async () => {
+const fetchUid = async () => {
     try {
       const res = await getUid()
-      items.value = res.data.map((item: any) => (
+      itemsUid.value = res.data.map((item: any) => (
         {
           id: item.id,
           name: item.nama,
@@ -50,6 +50,19 @@ const fetchData = async () => {
       console.error('Error fetching data:', error);
     }
 };
+const fetchMedia = async () => {
+  try {
+    const res = await getUid()
+    itemsMedia.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
 
 const fetchDataUp3 = async (uid: number) => {
   try {
@@ -112,4 +125,4 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp, fetchData, items, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};
+export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp,fetchMedia, fetchUid, itemsUid, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};

From 704cf747202d9fe88acba474541060f19369228d Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 9 Feb 2024 19:54:20 +0700
Subject: [PATCH 03/17] Refactor filterData function in Table_1.vue

---
 src/components/Pages/Gangguan/Table_1.vue | 69 +++++++++++------------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 1e0c0df..42788a6 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,5 +1,5 @@
 <template>
-  <Filters @run-search="() => console.log(filters)" class="mb-4">
+  <Filters @run-search="() =>filterData(filters)" class="mb-4">
     <Type1
       @update:filters="
         (value) => {
@@ -330,6 +330,38 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
     }
   }
 `
+const filterData = (data :any)=>{
+  const dateValue = data.periode.split(' s/d ')
+  const posko = data.posko ? data.posko.id : ''
+  const uid = data.uid ? data.uid.id : 0
+  const up3 = data.up3 ? data.up3.id : 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 { onResult, onError, loading, refetch } = useQuery(
   GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN,
   {
@@ -340,40 +372,7 @@ const { onResult, onError, loading, refetch } = useQuery(
     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

From 2e4eb3b6b29d01183d2703806e743f2a51928dd6 Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Fri, 9 Feb 2024 20:41:06 +0700
Subject: [PATCH 04/17] Add Filters and Type components to Table_45.vue,
 Table_21.vue, Table_25.vue, Table_26.vue, Table_27.vue, Table_28.vue,
 Table_30.vue, Table_33.vue, Table_34.vue, Table_35.vue, Table_22.vue,
 Table_23.vue, Table_24.vue, Table_29.vue, and Table_31.vue

---
 src/components/Form/FiltersType/Type2.vue    |  25 +++-
 src/components/Form/FiltersType/Type3.vue    |  17 ++-
 src/components/Form/FiltersType/Type6.vue    |  67 ++++++----
 src/components/Form/FiltersType/reference.ts | 121 ++++++++++++-------
 src/components/Pages/Gangguan/Table_1.vue    |   2 -
 src/components/Pages/Gangguan/Table_10.vue   |   2 +
 src/components/Pages/Gangguan/Table_11.vue   |   3 +
 src/components/Pages/Gangguan/Table_12.vue   |   2 +
 src/components/Pages/Gangguan/Table_13.vue   |   2 +
 src/components/Pages/Gangguan/Table_14.vue   |   2 +
 src/components/Pages/Gangguan/Table_15.vue   |   2 +
 src/components/Pages/Gangguan/Table_16.vue   |   2 +
 src/components/Pages/Gangguan/Table_17.vue   |   2 +
 src/components/Pages/Gangguan/Table_18.vue   |   2 +
 src/components/Pages/Gangguan/Table_19.vue   |   2 +
 src/components/Pages/Gangguan/Table_2.vue    |  81 ++++++-------
 src/components/Pages/Gangguan/Table_20.vue   |   2 +
 src/components/Pages/Gangguan/Table_3.vue    |  10 +-
 src/components/Pages/Gangguan/Table_4.vue    |   2 +
 src/components/Pages/Gangguan/Table_5.vue    |   3 +
 src/components/Pages/Gangguan/Table_6.vue    |   2 +
 src/components/Pages/Gangguan/Table_7.vue    |   2 +
 src/components/Pages/Gangguan/Table_8.vue    |   2 +
 src/components/Pages/Gangguan/Table_9.vue    |   2 +
 src/components/Pages/Keluhan/Table_21.vue    |   2 +
 src/components/Pages/Keluhan/Table_22.vue    |   2 +
 src/components/Pages/Keluhan/Table_23.vue    |   2 +
 src/components/Pages/Keluhan/Table_24.vue    |   2 +
 src/components/Pages/Keluhan/Table_25.vue    |   2 +
 src/components/Pages/Keluhan/Table_26.vue    |   2 +
 src/components/Pages/Keluhan/Table_27.vue    |   2 +
 src/components/Pages/Keluhan/Table_28.vue    |   2 +
 src/components/Pages/Keluhan/Table_29.vue    |   2 +
 src/components/Pages/Keluhan/Table_30.vue    |   2 +
 src/components/Pages/Keluhan/Table_31.vue    |   2 +
 src/components/Pages/Keluhan/Table_32.vue    |   2 +
 src/components/Pages/Keluhan/Table_33.vue    |   2 +
 src/components/Pages/Keluhan/Table_34.vue    |   2 +
 src/components/Pages/Keluhan/Table_35.vue    |   2 +
 src/components/Pages/Monalisa/Table_36.vue   |   4 +-
 src/components/Pages/Monalisa/Table_37.vue   |   2 +
 src/components/Pages/Monalisa/Table_38.vue   |   2 +
 src/components/Pages/Monalisa/Table_39.vue   |   2 +
 src/components/Pages/Monalisa/Table_40.vue   |   2 +
 src/components/Pages/Monalisa/Table_41.vue   |   2 +
 src/components/Pages/Monalisa/Table_42.vue   |   2 +
 src/components/Pages/Monalisa/Table_43.vue   |   2 +
 src/components/Pages/Monalisa/Table_44.vue   |   2 +
 src/components/Pages/Monalisa/Table_45.vue   |   2 +
 src/components/Pages/Monalisa/Table_46.vue   |   2 +
 50 files changed, 278 insertions(+), 135 deletions(-)

diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 1e89bf4..1ca931d 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,7 +1,7 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import Select from '@/components/Select.vue'
 import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@@ -10,29 +10,45 @@ const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: 0, name: ulpPlaceholder });
 const regional = ref({ id: 0, name: regionalPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  regional: regional.value,
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
 
 const setRegional = (value: any) => {
   regional.value = value;
   selectedUid(value);
   uid.value = { id: 0, name: uidPlaceholder };
+  data.value.regional = value;
+  
 };
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value); 
   uppp.value = { id: 0, name: up3Placholder };
+  data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUp3Ulp(value);
+  data.value.posko = value;
 };
-
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
@@ -68,6 +84,5 @@ const setUlp = (value: any) => {
       <Select :data="years" placeholder="Pilih Tahun" />
     </div>
   </div>
-</template> -->
+</template>
 
-<template></template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index 356b9fa..eb9f57c 100644
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -1,31 +1,39 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
 import { ref } from 'vue';
-fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: 0, name: ulpPlaceholder });
-
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
   uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
 };
 
 const setUlp = (value: any) => {
   ulp.value = value;
   selectedUlp(value);
+  data.value.posko = value;
 };
 </script>
 
@@ -56,5 +64,4 @@ const setUlp = (value: any) => {
       }
       " />
   </div>
-</template> -->
-<template></template>
+</template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 1aaa92b..ccd6119 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -1,31 +1,51 @@
-<!-- <script setup lang="ts">
-  import InputNumber from '@/components/Form/InputNumber.vue'
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
+<script setup lang="ts">
+import InputNumber from '@/components/Form/InputNumber.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
 import { useTotalReport } from '@/stores/totalReport';
-  fetchData();
-  const changeMinReport = (value: any) => {
-    useTotalReport().setDataMin(value)
-  }
-  const changeMaxReport = (value: any) => {
-    useTotalReport().setDataMax(value)
-  }
+import { onMounted, ref } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minReport: useTotalReport().getDataMin() ? useTotalReport().getDataMin() : 1,
+  maxReport: useTotalReport().getDataMax()? useTotalReport().getDataMax() : 1
+})
+
+///Can di ganti masih ka store
+const changeMinReport = (value: any) => {
+  useTotalReport().setDataMin(value)
+}
+const changeMaxReport = (value: any) => {
+  useTotalReport().setDataMax(value)
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select @update:selected="selectedUid($event)" :data="itemsUid"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </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="selectedUp3Posko($event)" :data="itemsUp3"  placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
+      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -33,13 +53,13 @@ import { useTotalReport } from '@/stores/totalReport';
 
     <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
   </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 @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
@@ -49,9 +69,8 @@ import { useTotalReport } from '@/stores/totalReport';
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
       <InputNumber :value="1" @change="changeMinReport($event.target.value)" />
       <small class="flex items-center">s/d</small>
-      <InputNumber :value="1" @change="changeMaxReport($event.target.value)"/>
+      <InputNumber :value="1" @change="changeMaxReport($event.target.value)" />
     </div>
   </div>
-</template> -->
+</template>
 
-<template></template>
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index c5f959f..1635ada 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -6,54 +6,85 @@ import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
 
 interface Item {
-  id: number;
+  id: any;
   name: any;
 }
-const months =[
-  {id:1, name: 'Januari'},
-  {id:2, name: 'Februari'},
-  {id:3, name: 'Maret'},
-  {id:4, name: 'April'},
-  {id:5, name: 'Mei'},
-  {id:6, name: 'Juni'},
-  {id:7, name: 'Juli'},
-  {id:8, name: 'Agustus'},
-  {id:9, name: 'September'},
-  {id:10, name: 'Oktober'},
-  {id:11, name: 'November'},
-  {id:12, name: 'Desember'},
+const months = [
+  { id: 1, name: 'Januari' },
+  { id: 2, name: 'Februari' },
+  { id: 3, name: 'Maret' },
+  { id: 4, name: 'April' },
+  { id: 5, name: 'Mei' },
+  { id: 6, name: 'Juni' },
+  { id: 7, name: 'Juli' },
+  { id: 8, name: 'Agustus' },
+  { id: 9, name: 'September' },
+  { id: 10, name: 'Oktober' },
+  { id: 11, name: 'November' },
+  { id: 12, name: 'Desember' },
 ]
 // create 4 year back array
 const year = new Date().getFullYear();
-const years =ref<Item[]>([]);
+const years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
-  years.value.push({id:year-i, name: year-i})
+  years.value.push({ id: year - i, name: year - i })
 }
 const timeout = ref()
 const itemsUid = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
 const itemsPosko = ref<Item[]>([]);
-const itemsUlp =  ref<Item[]>([]);
+const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
+const fetchRegional = () => {
+  itemsRegional.value = [
+    { id: "1", name: "Wilayah Sumatera" },
+    { id: "2", name: "Wilayah Jawa Bali" },
+    { id: "3", name: "Wilayah Kalimantan" },
+    { id: "4", name: "Wilayah Sulawesi" },
+    { id: "5", name: "Wilayah Nusa Tenggara" },
+    { id: "6", name: "Wilayah Maluku Papua" },
+  ]
+}
+const fetchStatus = (data : any) => {
+
+  const status  = [
+    {"id": "8", "name": "Selesai"},
+    {"id": "7", "name": "Nyala"},
+    {"id": "6", "name": "Pengalihan"},
+    {"id": "5", "name": "Dialihkan"},
+    {"id": "4", "name": "Dalam Pengerjaan"},
+    {"id": "3", "name": "Dalam Perjalanan"},
+    {"id": "2", "name": "Penugasan Regu"},
+    {"id": "1", "name": "lapor"}
+  ]
+  const filteredStatus = status.find(item => item.id == data);
+  const name = filteredStatus ? filteredStatus.name : null;
+  return name;
+}
+const fetchMedia = () => {
+  itemsMedia.value = [
+    { id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile" },
+    { id: "Twitter", name: "Twitter" },
+    { id: "PLN Mobile", name: "PLN Mobile" },
+    { id: "Media Massa", name: "Media Massa" },
+    { id: "Live Chat Website", name: "Live Chat Website" },
+    { id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
+    { id: "Instagram", name: "Instagram" },
+    { id: "Facebook", name: "Facebook" },
+    { id: "Email", name: "Email" },
+    { id: "EMS", name: "EMS" },
+    { id: "Datang ke Kantor", name: "Datang ke Kantor" },
+    { id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
+    { id: "Call PLN 123", name: "Call PLN 123" },
+  ]
+
+}
 // Fetch data from the API using Axios
 const fetchUid = async () => {
-    try {
-      const res = await getUid()
-      itemsUid.value = res.data.map((item: any) => (
-        {
-          id: item.id,
-          name: item.nama,
-        }
-      ));
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-};
-const fetchMedia = async () => {
   try {
     const res = await getUid()
-    itemsMedia.value = res.data.map((item: any) => (
+    itemsUid.value = res.data.map((item: any) => (
       {
         id: item.id,
         name: item.nama,
@@ -62,7 +93,7 @@ const fetchMedia = async () => {
   } catch (error) {
     console.error('Error fetching data:', error);
   }
-}
+};
 
 const fetchDataUp3 = async (uid: number) => {
   try {
@@ -91,18 +122,18 @@ const fetchDataUlp = async (up3: number) => {
 const fetchDataPosko = async (up3: number) => {
   clearTimeout(timeout.value)
   timeout.value = setTimeout(async () => {
-  try {
-    const res = await getPosko(up3)
-    itemsPosko.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-},300);
+    try {
+      const res = await getPosko(up3)
+      itemsPosko.value = res.data.map((item: any) => (
+        {
+          id: item.id,
+          name: item.nama,
+        }
+      ));
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }, 300);
 };
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id)
@@ -125,4 +156,4 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko ,selectedUp3Ulp, selectedPosko,selectedUlp,fetchMedia, fetchUid, itemsUid, itemsUp3, itemsPosko,itemsRegional,itemsMedia,itemsUlp ,months ,years};
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 42788a6..232faf8 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -381,7 +381,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const showData = () => {
   showDetail.value = true
 }
-
-// filters handler
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 52dd7f9..a4d33ee 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -77,6 +77,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 6f7a77d..9ffbc2c 100644
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -1,5 +1,6 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 <template>
+    
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -148,6 +149,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index bfe24b6..6c01e4a 100644
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -75,6 +75,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { onMounted ,ref} from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index fb6389a..c93276c 100644
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -75,6 +75,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index af2873c..02204b1 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 9e35884..9ca0947 100644
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index c3198ac..2241208 100644
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -140,6 +140,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index a29bc68..5bcdc89 100644
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -65,6 +65,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index e70f070..9eba218 100644
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index c183bac..529f5c0 100644
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -43,6 +43,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type18 from '@/components/Form/FiltersType/Type18.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 5583ee0..9943918 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type6 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,19 +14,12 @@
             <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" />
-            <DxLoadPanel
-            :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading"
-            v-model:visible="loading"
-            :enabled="true" />
+            <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="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+                :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="waktu_lapor"
@@ -35,8 +34,8 @@
                 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="150" alignment="center" data-field="status_akhir" caption="Status"
-                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"
@@ -165,6 +164,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type6 from '@/components/Form/FiltersType/Type6.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
@@ -173,12 +174,7 @@ 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 { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
-import { useTotalReport } from '@/stores/totalReport';
+
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -200,7 +196,7 @@ const closeDetail = () => {
     showDetail.value = false
 }
 const loadingVisible = ref(true)
-const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI =gql`
+const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
 query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
   daftarGangguanMelaporLebihDariSatuKali(
     minJmlLapor: $minJmlLapor
@@ -227,26 +223,23 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     waktu_response
   }
 }`;
- const { onResult, onError, loading, refetch  } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
-        minJmlLapor: 1,
-        maxJmlLapor: 1,
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
+    minJmlLapor: 1,
+    maxJmlLapor: 1,
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    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
-    const minJmlLapor = useTotalReport().getDataMin()
-    const maxJmlLapor = useTotalReport().getDataMax()
+const filterData = (data: any) => {
+    const dateValue = data.periode.split(' s/d ');
+    const posko = data.posko ? data.posko.id : ""
+    const up3 = data.up3 ? data.up3.id : 0
+    const uid = data.uid ? data.uid.id : 0
+    const minJmlLapor = data.minReport
+    const maxJmlLapor = data.maxReport
 
     refetch({
         minJmlLapor,
@@ -258,7 +251,7 @@ watch(detected, () => {
         idUp3: up3
     })
     onResult(queryResult => {
-        if(queryResult.data != undefined){
+        if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
             loadingVisible.value = false
         }
@@ -269,11 +262,7 @@ watch(detected, () => {
     onError(error => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-6',
-    })
-})
+}
+
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index a5b03ed..1ee68bf 100644
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -44,6 +44,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index e15ff4e..71307b5 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -1,4 +1,5 @@
 <template>
+    
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -47,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type7 from '@/components/Form/FiltersType/Type7.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { useFiltersStore } from '@/stores/filters'
@@ -148,10 +151,5 @@ watch(detected, () => {
         console.log(error)
     })
 })
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-7',
-    })
-})
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 0db1f34..037c461 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -49,6 +49,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type7 from '@/components/Form/FiltersType/Type7.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index fae4d7e..9d4cfb0 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -1,4 +1,5 @@
 <template>
+    
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -47,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 43392f7..5beb8a4 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -38,6 +38,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type16 from '@/components/Form/FiltersType/Type16.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index cf148b1..31cd071 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -47,6 +47,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index a0f4c95..0adf61e 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -67,6 +67,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 711defc..fded643 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -116,6 +116,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 9dfbd77..4cccf3c 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -48,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index a4347dd..13ed449 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -49,6 +49,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type10 from '@/components/Form/FiltersType/Type10.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index c59ba37..4c57666 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -48,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index b2c803e..c77a272 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -49,6 +49,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 631f2fb..07939d0 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -54,6 +54,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 2878695..3bdb06e 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -48,6 +48,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 555348b..208b1a4 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -49,6 +49,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index 3c1fa72..df8df16 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -52,6 +52,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index d3c8763..c5a8c90 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -73,6 +73,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type13 from '@/components/Form/FiltersType/Type13.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 2dc3f37..0954ba4 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -76,6 +76,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index bab5e54..a4db013 100644
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -76,6 +76,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type13 from '@/components/Form/FiltersType/Type13.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index 40a3b98..4aa6fa6 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -200,6 +200,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type13 from '@/components/Form/FiltersType/Type13.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index fc6425c..16159dc 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -72,6 +72,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 8a230c3..684e3e5 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index bc93bec..4196188 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -64,6 +64,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index 31fd66b..4856f8b 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -38,6 +38,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -57,8 +59,6 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
-import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
index 592beec..efdb963 100644
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -40,6 +40,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index 8ec6da1..1946083 100644
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -40,6 +40,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
index 05e53dd..5f04ebf 100644
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -40,6 +40,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
index dadc8af..49a0fa4 100644
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -177,6 +177,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
index 658272c..aed8df0 100644
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
index e6e322c..3f9d02a 100644
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -37,6 +37,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
index 263a081..1a59014 100644
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -37,6 +37,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index 80ef723..414266f 100644
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -25,6 +25,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
index 78703e7..11185f5 100644
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -36,6 +36,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { onMounted } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
index 9ea8d12..f0e0075 100644
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -36,6 +36,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { onMounted } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'

From 83a25527bb4933ba0bb52eaca8cebd56ff2a4e8a Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Sat, 10 Feb 2024 05:56:05 +0700
Subject: [PATCH 05/17] Add lifecycle hook and fetch data on mounted Add
 two-way binding for menitValue in InputWithSuffix Add two-way binding for
 timeValue in InputNumber Refactor filterData function in Table_5.vue

---
 src/components/Form/FiltersType/Type16.vue | 112 +++++-
 src/components/Form/FiltersType/Type3.vue  |   6 +-
 src/components/Form/FiltersType/Type4.vue  |  69 +++-
 src/components/Form/FiltersType/Type5.vue  |  72 +++-
 src/components/Form/FiltersType/Type6.vue  |  56 +--
 src/components/Form/FiltersType/Type7.vue  | 164 ++++++---
 src/components/Form/InputNumber.vue        |  48 ++-
 src/components/Form/InputWithSuffix.vue    |  47 ++-
 src/components/Pages/Gangguan/Table_1.vue  | 406 ++++++++++-----------
 src/components/Pages/Gangguan/Table_2.vue  |  32 +-
 src/components/Pages/Gangguan/Table_3.vue  |  74 ++--
 src/components/Pages/Gangguan/Table_4.vue  |  78 ++--
 src/components/Pages/Gangguan/Table_5.vue  |  38 +-
 src/components/Pages/Gangguan/Table_6.vue  |  50 +--
 14 files changed, 741 insertions(+), 511 deletions(-)

diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index 05e4601..ad275f9 100644
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -1,15 +1,81 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData,fetchMedia, items,itemsUp3, itemsPosko,itemsMedia} from './reference';
-fetchMedia();
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  fetchMedia,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsMedia
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const mediaPlaceholder = 'Semua Media'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
+const media = ref({ id: 0, name: mediaPlaceholder })
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  media: media.value,
+  periode: ''
+})
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+const setMedia = (value: any) => {
+  media.value = value
+  data.value.media = value
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+  fetchMedia()
+})
 </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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      :data="itemsUid"
+      @update:selected="setUid($event)"
+      :placeholder="uidPlaceholder"
+      :selected="uid"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -17,27 +83,45 @@ fetchMedia();
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      :data="itemsUp3"
+      @update:selected="setUp3($event)"
+      :placeholder="up3Placeholder"
+      :selected="up3"
+    />
   </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 placeholder="Semua Posko" />
+    <Select
+      :data="itemsPosko"
+      @update:selected="setPosko($event)"
+      :placeholder="poskoPlaceholder"
+      :selected="posko"
+    />
   </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">Media:</label>
 
-    <Select placeholder="Semua Media" :data="itemsMedia" />
+    <Select
+      :selected="media"
+      @update:selected="setMedia($event)"
+      :placeholder="mediaPlaceholder"
+      :data="itemsMedia"
+    />
   </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 @update:date-value="(value) => {
-        data.periode = value
-      }
-      " />
+    <DatePicker
+      @update:date-value="
+        (value) => {
+          data.periode = value
+        }
+      "
+    />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index eb9f57c..199e63b 100644
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -2,7 +2,7 @@
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@@ -35,6 +35,10 @@ const setUlp = (value: any) => {
   selectedUlp(value);
   data.value.posko = value;
 };
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index 524e921..8a803f7 100644
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -1,13 +1,56 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  jenisLaporan : ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select 
+      @update:selected="setUid($event)" 
+      :data="itemsUid" 
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,7 +58,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select 
+      @update:selected="setUp3($event)" 
+      :data="itemsUp3" 
+      :placeholder="up3Placeholder"
+     />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -23,7 +70,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -31,7 +82,17 @@
       >Jenis Laporan:</label
     >
 
-    <Select placeholder="Laporan Berulang Unit" />
+    <Select
+      @update:selected="(value) => {
+        data.jenisLaporan = value
+      }"
+      :data="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Berulang Pelanggan' },
+        { id: 3, name: 'Laporan Berulang Pelanggan dan Unit' },
+      ]"
+      :placeholder="'Semua Jenis Laporan'"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index 877e7fa..f1a85c4 100644
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -1,13 +1,68 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+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 }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,19 +70,18 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <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 placeholder="Semua Posko" />
+    <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 @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => {
         data.periode = value
       }
       " />
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index ccd6119..4470994 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -3,31 +3,43 @@ import InputNumber from '@/components/Form/InputNumber.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { useTotalReport } from '@/stores/totalReport';
 import { onMounted, ref } from 'vue';
 const emit = defineEmits(['update:filters'])
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
-  posko: ulp.value,
+  up3: up3.value,
+  posko: posko.value,
   periode: '',
-  minReport: useTotalReport().getDataMin() ? useTotalReport().getDataMin() : 1,
-  maxReport: useTotalReport().getDataMax()? useTotalReport().getDataMax() : 1
+  minJmlLapor: 1,
+  maxJmlLapor: 1
 })
 
-///Can di ganti masih ka store
-const changeMinReport = (value: any) => {
-  useTotalReport().setDataMin(value)
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
 }
-const changeMaxReport = (value: any) => {
-  useTotalReport().setDataMax(value)
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
 }
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -38,20 +50,19 @@ onMounted(() => {
   <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>
 
-    <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </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>
 
-    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
-      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </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="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -59,17 +70,20 @@ onMounted(() => {
 
     <DatePicker @update:date-value="(value) => {
       data.periode = value
-    }
-      " />
+    }" />
   </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">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber :value="1" @change="changeMinReport($event.target.value)" />
+      <InputNumber @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
       <small class="flex items-center">s/d</small>
-      <InputNumber :value="1" @change="changeMaxReport($event.target.value)" />
+      <InputNumber  @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
     </div>
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index ae54627..4c85ae0 100644
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -1,69 +1,125 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InputWithSuffix from '../InputWithSuffix.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithSuffix from '../InputWithSuffix.vue';
 import { useTotalDuration } from '@/stores/totalDuration';
-import { ref } from 'vue';
-  const data = [
-   
-    {
-      id : 1,
-      name : 'Dibawah  / Sesuai SLA (<= 45 menit)'
-    },
-    {
-      id : 2,
-      name : 'Melebihi SLA (> 45 menit)'
-    }
-  
-  ]
-  const triggerInput = ref(false)
-  const changeDuration = (value: any) => {
-    if(value.id === 0 ){
-      console.log('Durasi Menit')
-      useTotalDuration().setDataMin(0)
-      useTotalDuration().setDataMax(5)
-      triggerInput.value = false
-    }else if(value.id === 1){
-      useTotalDuration().setDataMin(0)
-      useTotalDuration().setDataMax(45)
-      console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
-      triggerInput.value = true
-    }else{
-      useTotalDuration().setDataMin(46)
-      useTotalDuration().setDataMax(7*60*24)
-      triggerInput.value = true
-      console.log('Melebihi SLA (> 45 menit)')
-    }
+
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref, watch } from 'vue';
+const emit = defineEmits(['update:filters'])
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
+const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  minDurasiRecoveryTime: 1,
+  maxDurasiRecoveryTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+
+const sla = [
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
   }
+
+]
+const triggerInput = ref(false)
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiRecoveryTime = 46
+    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
+watch(() => data.value, () => {
+  emit('update:filters', data.value)
+}, { deep: true })
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select 
+      @update:selected="setUid($event)" 
+      :data="itemsUid" 
+      :placeholder="uidPlaceholder"
+    />
   </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 placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select 
+      @update:selected="setUp3($event)" 
+      :data="itemsUp3" 
+      :placeholder="up3Placeholder"
+
+    />
   </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 placeholder="Semua Posko" />
+    <Select 
+      @update:selected="setPosko($event)" 
+      :data="itemsPosko" 
+      :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 @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
@@ -71,12 +127,26 @@ import { ref } from 'vue';
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select @update:selected="changeDuration($event)" :data="data" placeholder="Durasi Menit" />
+      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix :value="useTotalDuration().getDataMin()" :disabled=triggerInput />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiRecoveryTime =value
+          }
+          "
+        @value="data.minDurasiRecoveryTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix :value="useTotalDuration().getDataMax()" :disabled="triggerInput" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiRecoveryTime = value
+          }
+          "
+        @value="data.maxDurasiRecoveryTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/InputNumber.vue b/src/components/Form/InputNumber.vue
index ca77655..b6b5d08 100644
--- a/src/components/Form/InputNumber.vue
+++ b/src/components/Form/InputNumber.vue
@@ -1,36 +1,44 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:timeValue'])
+const timeValue = ref(1)
+watch(timeValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:timeValue', newValue)
+})
+
 </script>
 
 <template>
   <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
+      v-model="timeValue"
       autocomplete="off"
       type="number"
-      :value ="props.value"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
       class="w-full 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"
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index f9356ea..47bad76 100644
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -1,35 +1,44 @@
 <script setup lang="ts">
-  const props = defineProps({
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    value: {
-        type: Number,
-        default: "",
-    },
-  })
+import { ref, watch } from 'vue'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Number,
+    default: ''
+  }
+})
+const emit = defineEmits(['update:menitValue'])
+const menitValue = ref(1)
+watch(menitValue, (newValue) => {
+  console.log('newValue', newValue)
+  emit('update:menitValue', newValue)
+})
 </script>
 
 <template>
   <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
+      v-model="menitValue"
       autocomplete="off"
       type="text"
-      :value ="props.value"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
+      defaultValue="1"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 232faf8..cc92996 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,231 +1,198 @@
 <template>
-  <Filters @run-search="() =>filterData(filters)" class="mb-4">
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
   </Filters>
 
   <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"
-    >
+    <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"
-      />
+      <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"
-      />
+      <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"
-      />
+      <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="waktu_lapor"
-                caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
-                caption="Tgl Dialihkan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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="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="waktu_lapor"
+        caption="Tgl Lapor" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
+        caption="Tgl Response" cell-template="data" />
+      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_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?.waktu_lapor" 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?.waktu_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?.waktu_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?.waktu_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?.waktu_lapor" 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?.waktu_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?.waktu_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?.waktu_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">
@@ -330,7 +297,7 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
     }
   }
 `
-const filterData = (data :any)=>{
+const filterData = (data: any) => {
   const dateValue = data.periode.split(' s/d ')
   const posko = data.posko ? data.posko.id : ''
   const uid = data.uid ? data.uid.id : 0
@@ -349,7 +316,8 @@ const filterData = (data :any)=>{
           ...data.value,
           {
             ...item,
-            pembuat_laporan: '-'
+            pembuat_laporan: '-',
+            waktu_lapor: '-',
           }
         ]
       })
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 9943918..0d69239 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -1,8 +1,8 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type6 @update:filters="(value) => {
-                filters = value
-            }
+            filters = value
+        }
             " />
     </Filters>
     <div id="data">
@@ -166,9 +166,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type6 from '@/components/Form/FiltersType/Type6.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue';
 import InputText from '@/components/InputText.vue';
@@ -195,7 +194,7 @@ const showData = () => {
 const closeDetail = () => {
     showDetail.value = false
 }
-const loadingVisible = ref(true)
+
 const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
 query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
   daftarGangguanMelaporLebihDariSatuKali(
@@ -234,26 +233,21 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
 })
 
 const filterData = (data: any) => {
+    const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = data;
     const dateValue = data.periode.split(' s/d ');
-    const posko = data.posko ? data.posko.id : ""
-    const up3 = data.up3 ? data.up3.id : 0
-    const uid = data.uid ? data.uid.id : 0
-    const minJmlLapor = data.minReport
-    const maxJmlLapor = data.maxReport
-
+    console.log(data)
     refetch({
-        minJmlLapor,
-        maxJmlLapor,
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3
+        minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+        maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 71307b5..3ecff0f 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -1,5 +1,10 @@
 <template>
-    
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type7 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -50,25 +55,41 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
-import { useTotalDuration } from '@/stores/totalDuration';
+
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-
 const data = ref<any[]>([])
-
+const filterData = (data: any) => {
+    const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = data;
+    const dateValue = data.periode.split(' s/d ') 
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiResponseTime : minDurasiResponseTime ? minDurasiResponseTime : 1,
+        maxDurasiResponseTime : maxDurasiResponseTime ? maxDurasiResponseTime : 1,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+}
 const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
 query daftarGangguanResponseTime(
     $dateFrom: Date!
@@ -121,35 +142,6 @@ onResult(queryResult => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
 })
-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
-    const minDurasiResponseTime = useTotalDuration().getDataMin();
-    const maxDurasiResponseTime = useTotalDuration().getDataMax();
-    refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        minDurasiResponseTime,
-        maxDurasiResponseTime,
-        posko,
-        idUid: uid,
-        idUp3: up3
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
-})
+
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 037c461..e1b1541 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type7 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
@@ -7,7 +13,7 @@
             <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" />
-            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
@@ -52,22 +58,39 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable';
 import gql from 'graphql-tag';
-import { useDateStore } from '@/stores/date';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useTotalDuration } from '@/stores/totalDuration';
-import { useUp3Store } from '@/stores/up3';
-import { useSearchStore } from '@/stores/filtersAction';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
+const filterData = (data: any) => {
+    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = data;
+    const dateValue = data.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
+        maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.daftarGangguanRecoveryTime;
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError(error => {
+        console.log(error)
+    })
+}
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
 query daftarGangguanRecoveryTime(
     $dateFrom: Date!
@@ -113,40 +136,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_REC
     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
-    const minDurasiRecoveryTime = useTotalDuration().getDataMin();
-    const maxDurasiRecoveryTime = useTotalDuration().getDataMax();
-    refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        minDurasiRecoveryTime,
-        maxDurasiRecoveryTime,
-        posko,
-        idUid: uid,
-        idUp3: up3
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanRecoveryTime;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-7',
-    })
-})
+
+const filters = ref()
+
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 9d4cfb0..16d307b 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -1,5 +1,10 @@
 <template>
-    
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -46,7 +51,6 @@
         </DxDataGrid>
     </div>
 </template>
-
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
@@ -104,20 +108,15 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
     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
+const filterData = (data: any) => {
+    const {  posko, uid, up3 } = data;
+    const dateValue = data.periode.split(' s/d ')
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -130,11 +129,6 @@ watch(detected, () => {
     onError(error => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-    })
-})
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 5beb8a4..03a29a8 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -1,4 +1,10 @@
 <template>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type16 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -40,18 +46,11 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.vue'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
-import { useMediaStore } from '@/stores/media';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -98,22 +97,16 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BER
         idUp3: 0,
         media : "Twitter"
     })
-   
-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
-    const media = useMediaStore().getData() ? useMediaStore().getData() : "Twitter"
+const filterData = (data: any) => {
+    const { posko, uid, up3, media } = data;
+    const dateValue = data.periode.split(' s/d ')
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
-        idUid: uid,
-        idUp3: up3,
-        media
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
+        media : media ? media.id : "Twitter"
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -126,12 +119,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
-    
-    filters.setConfig({
-        type: 'type-16',
-    })
-})
+}
+const filters = ref()
+
 </script>
\ No newline at end of file

From eece7bcb92e61b1962f346f7fe90e467c9af1a1d Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Sat, 10 Feb 2024 06:14:08 +0700
Subject: [PATCH 06/17] Refactor filters component and add new data property

---
 src/components/Form/FiltersType/Type10.vue |  86 ++++++++++++--
 src/components/Form/FiltersType/Type11.vue | 128 +++++++++++++++++++--
 src/components/Form/FiltersType/Type17.vue |   4 +
 src/components/Form/FiltersType/Type8.vue  |  81 +++++++++++--
 src/components/Form/FiltersType/Type9.vue  |  72 +++++++++++-
 src/components/Pages/Gangguan/Table_7.vue  |  36 +++---
 6 files changed, 361 insertions(+), 46 deletions(-)

diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index 1fd61ef..c892fd5 100644
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -1,13 +1,73 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+ 
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputNumber from '@/components/Form/InputNumber.vue'
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minJmlLapor: 1,
+  maxJmlLapor: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      @update:selected="setUid($event)"
+      :data="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,7 +75,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select 
+      @update:selected="setUp3($event)" 
+      :data="itemsUp3" 
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -23,7 +87,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -39,9 +107,13 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <Select placeholder="1" />
+      <InputNumber @update:time-value="(value) => {
+        data.minJmlLapor = value
+      }" />
       <small class="flex items-center">s/d</small>
-      <Select placeholder="2" />
+      <InputNumber  @update:time-value="(value) => {
+        data.maxJmlLapor = value
+      }" />
     </div>
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 614b70a..ac02e78 100644
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -1,13 +1,99 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+  
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputNumber from '@/components/Form/InputNumber.vue'
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const sla = [
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  minDurasiRecoveryTime: 1,
+  maxDurasiRecoveryTime: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+const triggerInput = ref(false)
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiRecoveryTime = 0
+    data.value.maxDurasiRecoveryTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiRecoveryTime = 46
+    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select 
+      @update:selected="setUid($event)" 
+      :data="itemsUid" 
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -15,7 +101,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -23,7 +113,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -39,12 +133,30 @@
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+        @update:selected="changeDuration($event)" 
+        :data="sla" 
+        placeholder="Durasi Menit"
+      />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <Select placeholder="1" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiRecoveryTime =value
+          }
+          "
+        @value="data.minDurasiRecoveryTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <Select placeholder="2" />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiRecoveryTime = value
+          }
+          "
+        @value="data.maxDurasiRecoveryTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
index 5f752f9..c9496ee 100644
--- a/src/components/Form/FiltersType/Type17.vue
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -2,6 +2,10 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithFilter from '../InputWithFilter.vue'
+  import { ref } from 'vue'
+  const data = ref({
+    periode: '',
+  })
 </script>
 
 <template>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index db03adb..a24e760 100644
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -1,29 +1,90 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+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 }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
+
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      @update:selected="setUid($event)"
+      :data="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </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 placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :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">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index 5e9fd0c..3e7251b 100644
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -2,13 +2,71 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+
+import { onMounted, ref, watch } from 'vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+
+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 }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  uppp.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      @update:selected="setUid($event)"
+      :data="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -16,13 +74,21 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :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 placeholder="Semua Posko" />
+    <Select 
+      @update:selected="setPosko($event)" 
+      :data="itemsPosko" 
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 31cd071..c06d438 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
@@ -103,22 +109,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
     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
+const filterData = (data: any) => {
+    const dateValue = data.periode.split(' s/d ')
+    const posko = data.posko ? data.posko.id : ''
+    const uid = data.uid ? data.uid.id : 0
+    const up3 = data.up3 ? data.up3.id : 0
     refetch({
         dateFrom: dateValue[0].split('-').reverse().join('-'),
         dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
+        posko: posko,
         idUid: uid,
-        idUp3: up3,
+        idUp3: up3
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
         }
@@ -129,12 +132,9 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
-onMounted(() => {
-    const filters = useFiltersStore()
 
-    filters.setConfig({
-        type: 'type-1',
-    })
-})
+}
+
+const filters = ref();
+
 </script>
\ No newline at end of file

From b9732be2c94d9f4b51a224e4448dc33b53f34bfc Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Sat, 10 Feb 2024 07:05:19 +0700
Subject: [PATCH 07/17] Refactor filterData function parameters

---
 src/components/Pages/Gangguan/Table_1.vue  |  10 +-
 src/components/Pages/Gangguan/Table_10.vue |  34 +-
 src/components/Pages/Gangguan/Table_11.vue | 130 +---
 src/components/Pages/Gangguan/Table_12.vue |  36 +-
 src/components/Pages/Gangguan/Table_13.vue |  36 +-
 src/components/Pages/Gangguan/Table_14.vue |  38 +-
 src/components/Pages/Gangguan/Table_15.vue |  71 +-
 src/components/Pages/Gangguan/Table_16.vue | 134 ++--
 src/components/Pages/Gangguan/Table_17.vue |  54 +-
 src/components/Pages/Gangguan/Table_18.vue |  40 +-
 src/components/Pages/Gangguan/Table_19.vue |  57 +-
 src/components/Pages/Gangguan/Table_2.vue  |   7 +-
 src/components/Pages/Gangguan/Table_20.vue |  50 +-
 src/components/Pages/Gangguan/Table_3.vue  |   6 +-
 src/components/Pages/Gangguan/Table_4.vue  |   6 +-
 src/components/Pages/Gangguan/Table_5.vue  |  12 +-
 src/components/Pages/Gangguan/Table_6.vue  |   6 +-
 src/components/Pages/Gangguan/Table_7.vue  |  20 +-
 src/components/Pages/Gangguan/Table_8.vue  |  55 +-
 src/components/Pages/Gangguan/Table_9.vue  | 757 +--------------------
 src/components/Pages/Keluhan/Table_21.vue  |   1 +
 21 files changed, 458 insertions(+), 1102 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index cc92996..b4b315c 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -297,11 +297,11 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
     }
   }
 `
-const filterData = (data: any) => {
-  const dateValue = data.periode.split(' s/d ')
-  const posko = data.posko ? data.posko.id : ''
-  const uid = data.uid ? data.uid.id : 0
-  const up3 = data.up3 ? data.up3.id : 0
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const posko = params.posko ? params.posko.id : ''
+  const uid = params.uid ? params.uid.id : 0
+  const up3 = params.up3 ? params.up3.id : 0
   refetch({
     dateFrom: dateValue[0].split('-').reverse().join('-'),
     dateTo: dateValue[1].split('-').reverse().join('-'),
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index a4d33ee..e1fb885 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -1,5 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -80,7 +86,7 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -180,16 +186,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
     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
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
         idUid: uid,
         idUp3: up3
@@ -205,19 +209,13 @@ watch(detected, () => {
     onError((queryError) => {
         console.log(queryError)
     })
-})
+}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
+const filters= ref();
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
 </script>
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 9ffbc2c..4e7ece9 100644
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -1,6 +1,11 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 <template>
-    
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -9,7 +14,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -152,7 +159,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -207,7 +213,6 @@ query rekapitulasiGangguanPerPosko(
         total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -243,95 +248,32 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const poskoOptions = ['POSKO A', 'POSKO B', 'POSKO C', 'POSKO D', 'POSKO E'];
-
-const createDummy = () => {
-    var dummy = data.value;
-    for (let i = 1; i <= 50; i++) {
-        const randomPosko = poskoOptions[Math.floor(Math.random() * poskoOptions.length)];
-
-        const totalLaporan = Math.floor(Math.random() * 21);
-        const laporanSelesai = Math.floor(Math.random() * (totalLaporan + 1));
-        const laporanBelumSelesai = totalLaporan - laporanSelesai;
-
-        const responseTimeTotal = Math.floor(Math.random() * 31);
-        const responseTimeRataRata = (Math.random() * 21) + 10;
-        const responseTimeMax = responseTimeRataRata + Math.floor(Math.random() * 11);
-        const responseTimeMin = responseTimeRataRata - Math.floor(Math.random() * 11);
-
-        const responseTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
-        const responseTimeKurangSla = laporanSelesai - responseTimeLebihSla;
-
-        const recoveryTimeTotal = Math.floor(Math.random() * 31);
-        const recoveryTimeRataRata = (Math.random() * 21) + 10;
-        const recoveryTimeMax = recoveryTimeRataRata + Math.floor(Math.random() * 11);
-        const recoveryTimeMin = recoveryTimeRataRata - Math.floor(Math.random() * 11);
-
-        const recoveryTimeLebihSla = Math.floor(Math.random() * (laporanSelesai + 1));
-        const recoveryTimeKurangSla = laporanSelesai - recoveryTimeLebihSla;
-
-        const entry = {
-            no: i,
-            posko: randomPosko,
-            laporan: {
-                total: totalLaporan,
-                sudahSelesai: {
-                    jml: laporanSelesai,
-                    persen: (laporanSelesai / totalLaporan) * 100,
-                },
-                belumSelesai: {
-                    jml: laporanBelumSelesai,
-                    persen: (laporanBelumSelesai / totalLaporan) * 100,
-                },
-            },
-            responseTime: {
-                menit: {
-                    total: responseTimeTotal,
-                    rataRata: responseTimeRataRata,
-                    max: responseTimeMax,
-                    min: responseTimeMin,
-                },
-                laporan: {
-                    lebihSla: responseTimeLebihSla,
-                    kurangSla: responseTimeKurangSla,
-                },
-            },
-            recoveryTime: {
-                menit: {
-                    total: recoveryTimeTotal,
-                    rataRata: recoveryTimeRataRata,
-                    max: recoveryTimeMax,
-                    min: recoveryTimeMin,
-                },
-                laporan: {
-                    lebihSla: recoveryTimeLebihSla,
-                    kurangSla: recoveryTimeKurangSla,
-                },
-            }
-        };
-
-        dummy.push(entry);
-    }
-    data.value = dummy;
-}
-
-
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-          
+
             var i = 1;
             queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
                 const entry = {
-                    no : Number(i++),
+                    no: Number(i++),
                     posko: item.posko,
                     laporan: {
                         total: item.total,
@@ -341,7 +283,7 @@ onMounted(() => {
                         },
                         belumSelesai: {
                             jml: item.total_inproses,
-                            persen:item.persen_inproses,
+                            persen: item.persen_inproses,
                         },
                     },
                     responseTime: {
@@ -376,8 +318,7 @@ onMounted(() => {
             })
 
             data.value = [...data.value];
-            console.log(data.value)
-            loadingVisible.value = false
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -386,10 +327,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
-    })
-    // createDummy()
-})
+
+}
+const filters = ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 6c01e4a..7171732 100644
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -1,4 +1,10 @@
 <template>
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -167,21 +175,28 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const loadingVisible = ref<boolean>(true)
-
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
         dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
         posko: "",
         idUid: 0,
         idUp3: 0,
     })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanPerRegu;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -190,8 +205,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-9'
-    })
-})
+   
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index c93276c..d3f24e9 100644
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -168,20 +176,29 @@ query rekapitulasiGangguanPerTanggal(
         total_selesai
         }
 }`;
-const  loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
+
+    const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
         dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
         posko: "",
         idUid: 0,
         idUp3: 0,
     })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -190,8 +207,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-9'
-    })
-})
+   
+}
+const filters = ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index 02204b1..805f843 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -136,21 +144,31 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
         dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
         dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
         posko: '',
         idUid: 0,
         idUp3: 0
     })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
+
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -159,9 +177,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+    
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 9ca0947..2c8fc3c 100644
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -1,24 +1,33 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn 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="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
             <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT" css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
+                css-class="custom-table-column" />
+            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -100,22 +109,32 @@ query rekapitulasiGangguanAlihPosko
         posko_out
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
     })
 
+
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanAlihPosko
-                ;
-            loadingVisible.value = false
+            data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -124,9 +143,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 2241208..9ea618f 100644
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -1,46 +1,61 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+            column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-                <DxColumn :width="50" alignment="center" 
-                :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-                caption="a" css-class="custom-table-column" />
+                <DxColumn :width="50" alignment="center"
+                    :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
+                    css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c"
+                    css-class="custom-table-column" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
+                        css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
+                            css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
+                            css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
                     <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
+                            css-class="custom-table-column" />
                     </DxColumn>
                     <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100" css-class="custom-table-column" />
+                        <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
+                            css-class="custom-table-column" />
                     </DxColumn>
                 </DxColumn>
             </DxColumn>
@@ -50,20 +65,23 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking"
+                                    caption="i" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking" caption="j=(i/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
+                                    caption="j=(i/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking"
+                                    caption="k" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center"  data-field="avg_waktu_recovery_mobile_nonmarking" caption="l" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking"
+                                    caption="l" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -71,20 +89,23 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"  caption="m" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking"
+                                    caption="m" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking" caption="n=(m/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
+                                    caption="n=(m/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking"
+                                    caption="o" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking"
+                                    caption="p" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -94,20 +115,25 @@
                     <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking"
+                                    caption="q" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking" caption="r=(q/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
+                                    caption="r=(q/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking" caption="s" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center"
+                                    data-field="avg_waktu_response_nonmobile_nonmarking" caption="s"
+                                    css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center"
+                                    data-field="avg_waktu_recovery_nonmobile_nonmarking" caption="t"
+                                    css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -115,20 +141,23 @@
                     <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
                         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking"
+                                    caption="u" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking" caption="v=(u/d)*100"
-                                    css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
+                                    caption="v=(u/d)*100" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
 
                         <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
                             <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking"
+                                    caption="w" css-class="custom-table-column" />
                             </DxColumn>
                             <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x" css-class="custom-table-column" />
+                                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking"
+                                    caption="x" css-class="custom-table-column" />
                             </DxColumn>
                         </DxColumn>
                     </DxColumn>
@@ -233,22 +262,32 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
         total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
     })
+    const filters = useFiltersStore()
+
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
                 ;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -257,9 +296,8 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref();
+
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index 5bcdc89..c4f12f0 100644
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,15 +13,15 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-            caption="NO" data-type="number"
-                css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+                caption="NO" data-type="number" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -184,22 +190,31 @@ query rekapitulasiGangguanRatingPerPosko
         total 
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
 
+
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
                 ;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -209,10 +224,7 @@ onMounted(() => {
         console.log(error)
     })
 
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+}
+const filters = ref();
 
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 9eba218..f45dab6 100644
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -158,22 +166,30 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
       total
     }
   }
-`
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+`  
+const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
         dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
         dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
         posko: '',
         idUid: 0,
         idUp3: 0
     })
-
+const filterData = (params: any) => {
+  
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -182,9 +198,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+   
+}
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 529f5c0..7aca001 100644
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -1,17 +1,27 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type18 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
                 <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
@@ -130,22 +140,31 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
         up3
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const filterData = (params: any) => {
+
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
     })
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
                 ;
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -154,9 +173,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-18',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 0d69239..bb3099d 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -232,10 +232,9 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
     idUp3: 0,
 })
 
-const filterData = (data: any) => {
-    const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = data;
-    const dateValue = data.periode.split(' s/d ');
-    console.log(data)
+const filterData = (params: any) => {
+    const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ');
     refetch({
         minJmlLapor: minJmlLapor ? minJmlLapor : 1,
         maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index 1ee68bf..8a22bd1 100644
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,12 +13,15 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="loading" :enabled="true" />
+
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
                 <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
                     css-class="custom-table-column" />
@@ -138,21 +147,28 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
     })
-
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -161,9 +177,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+
+}
+const filters = ref(); 
 </script>
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 3ecff0f..95895c7 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -66,9 +66,9 @@ const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
-const filterData = (data: any) => {
-    const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = data;
-    const dateValue = data.periode.split(' s/d ') 
+const filterData = (params: any) => {
+    const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index e1b1541..2871a26 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -67,9 +67,9 @@ const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
-const filterData = (data: any) => {
-    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = data;
-    const dateValue = data.periode.split(' s/d ')
+const filterData = (params: any) => {
+    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ')
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 16d307b..fb323a9 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -55,16 +55,10 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -108,9 +102,9 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
     idUid: 0,
     idUp3: 0,
 })
-const filterData = (data: any) => {
-    const {  posko, uid, up3 } = data;
-    const dateValue = data.periode.split(' s/d ')
+const filterData = (params: any) => {
+    const {  posko, uid, up3 } = params;
+    const dateValue = params.periode.split(' s/d ')
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 03a29a8..a5a2671 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -97,9 +97,9 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BER
         idUp3: 0,
         media : "Twitter"
     })
-const filterData = (data: any) => {
-    const { posko, uid, up3, media } = data;
-    const dateValue = data.periode.split(' s/d ')
+const filterData = (params: any) => {
+    const { posko, uid, up3, media } = params;
+    const dateValue = params.periode.split(' s/d ')
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index c06d438..5086c33 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -56,16 +56,10 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable';
-import { useDateStore } from '@/stores/date';
-import { useSearchStore } from '@/stores/filtersAction';
-import { usePostsStore } from '@/stores/posts';
-import { useRegionStore } from '@/stores/region';
-import { useUp3Store } from '@/stores/up3';
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -109,14 +103,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
     idUid: 0,
     idUp3: 0,
 })
-const filterData = (data: any) => {
-    const dateValue = data.periode.split(' s/d ')
-    const posko = data.posko ? data.posko.id : ''
-    const uid = data.uid ? data.uid.id : 0
-    const up3 = data.up3 ? data.up3.id : 0
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko: posko,
         idUid: uid,
         idUp3: up3
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index 0adf61e..9d4ffb5 100644
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,7 +14,8 @@
             <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" />
-            <DxLoadPanel v-model:visible.sync="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-model:visible.sync="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="50" alignment="center"
@@ -139,37 +146,35 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
     idUp3: 0,
 })
 
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
+const filterData = (param: any) => {
     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('-'),
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
         idUid: uid,
         idUp3: up3,
     })
     onResult(queryResult => {
-    if (queryResult.data != undefined) {
-        queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-            data.value = [...data.value, {
-                ...item,
-                nama_unit: 'UNIT'
-            }];
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                    nama_unit: 'UNIT'
+                }];
 
-        })
-    }
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-})
-onError((error) => {
-    console.log(error)
-})
-})
+            })
+        }
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -205,11 +210,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index fded643..efdc5b8 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,5 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => {
+        filters = value
+      }
+      " />
+  </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -119,7 +125,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -233,739 +238,15 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const data = [
-    {
-        no: 1,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 2,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 3,
-        kode: 'B',
-        jenisGangguan: 'Gangguan B',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 5,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 10,
-                rataRata: 10,
-                max: 10,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 4,
-        kode: 'B',
-        jenisGangguan: 'Gangguan B',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 6,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 6,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 15,
-                rataRata: 12.5,
-                max: 18,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 5
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 18,
-                rataRata: 15,
-                max: 20,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 4
-            }
-        }
-    },
-    {
-        no: 5,
-        kode: 'C',
-        jenisGangguan: 'Gangguan C',
-        laporan: {
-            total: 8,
-            sudahSelesai: {
-                jml: 4,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 14,
-                rataRata: 14,
-                max: 16,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 2
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 22,
-                rataRata: 16,
-                max: 26,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 3
-            }
-        }
-    },
-    {
-        no: 6,
-        kode: 'A',
-        jenisGangguan: 'Gangguan A',
-        laporan: {
-            total: 8,
-            sudahSelesai: {
-                jml: 4,
-                persen: 50
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 50
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 12,
-                rataRata: 15,
-                max: 18,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 2
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 16,
-                rataRata: 18,
-                max: 22,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 0
-            }
-        }
-    },
-    {
-        no: 7,
-        kode: 'C',
-        jenisGangguan: 'Gangguan C',
-        laporan: {
-            total: 15,
-            sudahSelesai: {
-                jml: 10,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 13.33,
-                max: 24,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 6
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 25,
-                rataRata: 16.67,
-                max: 30,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 12,
-                kurangSla: 3
-            }
-        }
-    },
-    {
-        no: 8,
-        kode: 'D',
-        jenisGangguan: 'Gangguan D',
-        laporan: {
-            total: 7,
-            sudahSelesai: {
-                jml: 2,
-                persen: 28.57
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 71.43
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 18,
-                rataRata: 9,
-                max: 20,
-                min: 6
-            },
-            laporan: {
-                lebihSla: 1,
-                kurangSla: 6
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 28,
-                rataRata: 14,
-                max: 30,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 4,
-                kurangSla: 3
-            }
-        }
-    },
-    {
-        no: 9,
-        kode: 'D',
-        jenisGangguan: 'Gangguan D',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 8,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 24,
-                rataRata: 20,
-                max: 28,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 3
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 26,
-                max: 36,
-                min: 22
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 1
-            }
-        }
-    },
-    {
-        no: 10,
-        kode: 'E',
-        jenisGangguan: 'Gangguan E',
-        laporan: {
-            total: 15,
-            sudahSelesai: {
-                jml: 12,
-                persen: 80
-            },
-            belumSelesai: {
-                jml: 3,
-                persen: 20
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 14.67,
-                max: 26,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 4
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 30,
-                rataRata: 20,
-                max: 36,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 13,
-                kurangSla: 2
-            }
-        }
-    },
-    {
-        no: 11,
-        kode: 'F',
-        jenisGangguan: 'Gangguan F',
-        laporan: {
-            total: 9,
-            sudahSelesai: {
-                jml: 6,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 3,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 18,
-                rataRata: 12,
-                max: 22,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 1
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 28,
-                rataRata: 18.67,
-                max: 34,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 10,
-                kurangSla: 2
-            }
-        }
-    },
-    {
-        no: 12,
-        kode: 'G',
-        jenisGangguan: 'Gangguan G',
-        laporan: {
-            total: 11,
-            sudahSelesai: {
-                jml: 7,
-                persen: 63.64
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 36.36
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 14.29,
-                max: 24,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 3
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 22.86,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 11,
-                kurangSla: 1
-            }
-        }
-    },
-    {
-        no: 13,
-        kode: 'H',
-        jenisGangguan: 'Gangguan H',
-        laporan: {
-            total: 7,
-            sudahSelesai: {
-                jml: 5,
-                persen: 71.43
-            },
-            belumSelesai: {
-                jml: 2,
-                persen: 28.57
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 16,
-                rataRata: 12.8,
-                max: 20,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 4,
-                kurangSla: 3
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 26,
-                rataRata: 20.8,
-                max: 30,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 0
-            }
-        }
-    },
-    {
-        no: 14,
-        kode: 'I',
-        jenisGangguan: 'Gangguan I',
-        laporan: {
-            total: 14,
-            sudahSelesai: {
-                jml: 10,
-                persen: 71.43
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 28.57
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 15.71,
-                max: 28,
-                min: 10
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 6
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 22.86,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 7
-            }
-        }
-    },
-    {
-        no: 15,
-        kode: 'J',
-        jenisGangguan: 'Gangguan J',
-        laporan: {
-            total: 10,
-            sudahSelesai: {
-                jml: 8,
-                persen: 80
-            },
-            belumSelesai: {
-                jml: 2,
-                persen: 20
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 20,
-                rataRata: 16,
-                max: 26,
-                min: 12
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 4
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 30,
-                rataRata: 23,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 2
-            }
-        }
-    },
-    {
-        no: 16,
-        kode: 'K',
-        jenisGangguan: 'Gangguan K',
-        laporan: {
-            total: 13,
-            sudahSelesai: {
-                jml: 9,
-                persen: 69.23
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 30.77
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 24,
-                rataRata: 18.46,
-                max: 28,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 7
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 34,
-                rataRata: 25.38,
-                max: 40,
-                min: 20
-            },
-            laporan: {
-                lebihSla: 9,
-                kurangSla: 4
-            }
-        }
-    },
-    {
-        no: 17,
-        kode: 'L',
-        jenisGangguan: 'Gangguan L',
-        laporan: {
-            total: 16,
-            sudahSelesai: {
-                jml: 11,
-                persen: 68.75
-            },
-            belumSelesai: {
-                jml: 5,
-                persen: 31.25
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 26,
-                rataRata: 19.38,
-                max: 32,
-                min: 16
-            },
-            laporan: {
-                lebihSla: 7,
-                kurangSla: 4
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 36,
-                rataRata: 24,
-                max: 42,
-                min: 20
-            },
-            laporan: {
-                lebihSla: 8,
-                kurangSla: 5
-            }
-        }
-    },
-    {
-        no: 18,
-        kode: 'M',
-        jenisGangguan: 'Gangguan M',
-        laporan: {
-            total: 12,
-            sudahSelesai: {
-                jml: 8,
-                persen: 66.67
-            },
-            belumSelesai: {
-                jml: 4,
-                persen: 33.33
-            }
-        },
-        responseTime: {
-            menit: {
-                total: 22,
-                rataRata: 18.33,
-                max: 28,
-                min: 14
-            },
-            laporan: {
-                lebihSla: 5,
-                kurangSla: 7
-            }
-        },
-        recoveryTime: {
-            menit: {
-                total: 32,
-                rataRata: 24,
-                max: 36,
-                min: 18
-            },
-            laporan: {
-                lebihSla: 6,
-                kurangSla: 6
-            }
-        }
-    }
-]
-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
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
     refetch({
-        dateFrom: dateValue[0].split('-').reverse().join('-'),
-        dateTo: dateValue[1].split('-').reverse().join('-'),
-        posko,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
         idUid: uid,
         idUp3: up3
     })
@@ -1024,13 +305,7 @@ watch(detected, () => {
     onError((queryError) => {
         console.log(queryError)
     })
-})
+}
 
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters= ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 4cccf3c..21c849b 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -1,4 +1,5 @@
 <template>
+    
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"

From a1212ffa01a25336b4195ab478a79e40f1d28bbb Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Sun, 11 Feb 2024 14:25:18 +0700
Subject: [PATCH 08/17] Refactor component imports and add getUidRegional
 function

---
 src/components/Form/FiltersType/Type2.vue     |  12 +-
 src/components/Form/FiltersType/Type6.vue     |   4 +-
 src/components/Form/FiltersType/reference.ts  |  16 +-
 src/components/Pages/Anomali/Table_61.vue     |   3 +-
 src/components/Pages/Anomali/Table_62.vue     |   3 +-
 src/components/Pages/Anomali/Table_63.vue     |   3 +-
 src/components/Pages/Anomali/Table_64.vue     |   3 +-
 src/components/Pages/Anomali/Table_65.vue     |   3 +-
 src/components/Pages/Anomali/Table_66.vue     |   3 +-
 src/components/Pages/Cico/Table_60.vue        |   3 +-
 src/components/Pages/Ctt/Table_67.vue         |   3 +-
 src/components/Pages/Gangguan/Table_1.vue     |   9 +-
 src/components/Pages/Gangguan/Table_20.vue    |   3 +-
 src/components/Pages/Keluhan/Table_21.vue     |  66 +++---
 src/components/Pages/Keluhan/Table_22.vue     |  70 ++++--
 src/components/Pages/Keluhan/Table_23.vue     |  73 +++---
 src/components/Pages/Keluhan/Table_24.vue     |  77 ++++---
 src/components/Pages/Keluhan/Table_25.vue     |  46 ++--
 src/components/Pages/Keluhan/Table_26.vue     |  64 ++++--
 src/components/Pages/Keluhan/Table_27.vue     |  66 +++---
 src/components/Pages/Keluhan/Table_28.vue     |  44 +++-
 src/components/Pages/Keluhan/Table_29.vue     |  97 ++++----
 src/components/Pages/Keluhan/Table_30.vue     | 108 +++++----
 src/components/Pages/Keluhan/Table_31.vue     |  61 +++--
 src/components/Pages/Keluhan/Table_32.vue     |  49 ++--
 src/components/Pages/Keluhan/Table_33.vue     |  49 ++--
 src/components/Pages/Keluhan/Table_34.vue     |  47 ++--
 src/components/Pages/Keluhan/Table_35.vue     |  39 +++-
 src/components/Pages/Material/Table_68.vue    |   3 +-
 src/components/Pages/Material/Table_69.vue    |   3 +-
 src/components/Pages/Monalisa/Table_36.vue    |  43 ++--
 src/components/Pages/Monalisa/Table_37.vue    |  42 ++--
 src/components/Pages/Monalisa/Table_38.vue    |  42 ++--
 src/components/Pages/Monalisa/Table_39.vue    |  42 ++--
 src/components/Pages/Monalisa/Table_40.vue    | 210 +++++-------------
 src/components/Pages/Monalisa/Table_41.vue    |  48 ++--
 src/components/Pages/Monalisa/Table_42.vue    |  39 ++--
 src/components/Pages/Monalisa/Table_43.vue    |  39 ++--
 src/components/Pages/Monalisa/Table_44.vue    |  24 +-
 src/components/Pages/Monalisa/Table_45.vue    |  24 +-
 src/components/Pages/Monalisa/Table_46.vue    |  34 ++-
 src/components/Pages/Monalisa/Table_47.vue    |  37 +--
 src/components/Pages/Monalisa/Table_48.vue    |  37 +--
 src/components/Pages/Monalisa/Table_49.vue    |  37 +--
 src/components/Pages/Monalisa/Table_50.vue    |  37 +--
 src/components/Pages/Monalisa/Table_51.vue    |  37 +--
 src/components/Pages/Monalisa/Table_52.vue    |  37 +--
 src/components/Pages/Monalisa/Table_53.vue    |  38 ++--
 src/components/Pages/Monalisa/Table_54.vue    |  37 +--
 src/components/Pages/Monalisa/Table_55.vue    |  37 +--
 src/components/Pages/Monalisa/Table_56.vue    |  37 +--
 src/components/Pages/Monalisa/Table_57.vue    |  37 +--
 src/components/Pages/Monalisa/Table_58.vue    |  37 +--
 src/components/Pages/Monalisa/Table_59.vue    |  35 +--
 .../Pages/PencarianData/Table_71.vue          |  14 +-
 src/components/Pages/Transaksi/Table_70.vue   |  13 +-
 src/utils/network.ts                          |   3 +-
 57 files changed, 1219 insertions(+), 908 deletions(-)

diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 1ca931d..0b0b65e 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const regionalPlaceholder = 'Semua Regional';
+const bulanPlaceholder = 'Pilih Bulan';
+const tahunPlaceholder = 'Pilih Tahun';
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: 0, name: ulpPlaceholder });
@@ -47,7 +49,7 @@ const setUlp = (value: any) => {
 };
 onMounted(() => {
   emit('update:filters', data.value)
-  fetchUid()
+  fetchRegional()
 })
 </script>
 
@@ -55,7 +57,7 @@ onMounted(() => {
   <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">Regional:</label>
 
-    <Select @update:selected="setRegional($event)" :data="itemsRegional"  :placeholder="regionalPlaceholder" />
+    <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -80,8 +82,8 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
-      <Select :data="months" placeholder="Pilih Bulan" />
-      <Select :data="years" placeholder="Pilih Tahun" />
+      <Select :data="months" :placeholder="bulanPlaceholder" />
+      <Select :data="years" :placeholder="tahunPlaceholder" />
     </div>
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 4470994..45a3b76 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -77,11 +77,11 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber @update:time-value="(value) => {
+      <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => {
         data.minJmlLapor = value
       }" />
       <small class="flex items-center">s/d</small>
-      <InputNumber  @update:time-value="(value) => {
+      <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
         data.maxJmlLapor = value
       }" />
     </div>
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index 1635ada..f4147ed 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -1,4 +1,4 @@
-import { getUid, getUp3, getPosko, getUlp } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
 import { useUp3Store } from '@/stores/up3'
@@ -94,7 +94,19 @@ const fetchUid = async () => {
     console.error('Error fetching data:', error);
   }
 };
-
+const fetchUidWithRegional = async (regional: number) => {
+  try {
+    const res = await getUidRegional(regional)
+    itemsUid.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama,
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
 const fetchDataUp3 = async (uid: number) => {
   try {
     const res = await getUp3(uid)
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
index bddb20c..0cac13c 100644
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -11,7 +11,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <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" />
         <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
index 39bd6e9..efabbcd 100644
--- a/src/components/Pages/Anomali/Table_62.vue
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -10,7 +10,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <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" />
         <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
index c2bb30d..6f969f5 100644
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -11,7 +11,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <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" />
         <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
index 119fa0f..834db62 100644
--- a/src/components/Pages/Anomali/Table_64.vue
+++ b/src/components/Pages/Anomali/Table_64.vue
@@ -11,7 +11,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <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" />
         <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
index 08bb921..7f7768f 100644
--- a/src/components/Pages/Anomali/Table_65.vue
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -11,7 +11,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <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" />
         <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
index 39bd6e9..efabbcd 100644
--- a/src/components/Pages/Anomali/Table_66.vue
+++ b/src/components/Pages/Anomali/Table_66.vue
@@ -10,7 +10,8 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-        <DxLoadPanel :enabled="true" />
+           <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" />
         <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
index 3bd57d1..51eea6b 100644
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -7,7 +7,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
index b3ff284..65a1a3b 100644
--- a/src/components/Pages/Ctt/Table_67.vue
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -7,7 +7,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index b4b315c..edde852 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -217,15 +217,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 
 import { useDialogStore } from '@/stores/dialog'
-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)
@@ -303,8 +298,8 @@ const filterData = (params: any) => {
   const uid = params.uid ? params.uid.id : 0
   const up3 = params.up3 ? params.up3.id : 0
   refetch({
-    dateFrom: dateValue[0].split('-').reverse().join('-'),
-    dateTo: dateValue[1].split('-').reverse().join('-'),
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     posko: posko,
     idUid: uid,
     idUp3: up3
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index 8a22bd1..af9cb86 100644
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -55,8 +55,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 21c849b..f7b69a7 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -1,5 +1,11 @@
 <template>
-    
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -9,19 +15,20 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
@@ -32,8 +39,10 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@@ -144,21 +153,30 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
 
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -167,8 +185,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-3'
-    })
-})
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 13ed449..01388bb 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type10 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,29 +14,34 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
             <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@@ -43,7 +54,8 @@
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -144,23 +156,37 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        minJmlLapor: 1,
-        maxJmlLapor: 100,
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
 
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    minJmlLapor: 1,
+    maxJmlLapor: 100,
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
+    const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
+    refetch({
+        minJmlLapor: minJmlLapor,
+        maxJmlLapor: maxJmlLapor,
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -169,8 +195,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-10'
-    })
-})
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 4c57666..e8a6eda 100644
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type11 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,19 +14,20 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
@@ -31,7 +38,8 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@@ -42,7 +50,8 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -50,8 +59,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -143,23 +152,35 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        minDurasiResponseTime: 0,
-        maxDurasiResponseTime: 0,
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    minDurasiResponseTime: 0,
+    maxDurasiResponseTime: 0,
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
+    const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiResponseTime: minDurasiResponseTime,
+        maxDurasiResponseTime: maxDurasiResponseTime,
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanResponseTime
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -168,8 +189,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-11'
-    })
-})
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index c77a272..e749520 100644
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type11 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,31 +14,34 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
@@ -43,7 +52,8 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -144,23 +154,37 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        minDurasiRecoveryTime: 0,
-        maxDurasiRecoveryTime: 0,
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
 
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    minDurasiRecoveryTime: 0,
+    maxDurasiRecoveryTime: 0,
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
+    const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        minDurasiRecoveryTime: minDurasiRecoveryTime,
+        maxDurasiRecoveryTime: maxDurasiRecoveryTime,
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanRecoveryTime
-            loadingVisible.value = false
+    
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -169,8 +193,7 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-11'
-    })
-})
+    
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 07939d0..a333140 100644
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -8,7 +14,8 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -145,21 +152,32 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+
+const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-            loadingVisible.value = false
+    
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -168,8 +186,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-3'
-    })
-})
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 3bdb06e..ad45849 100644
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -8,16 +14,16 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
@@ -26,9 +32,11 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
+                css-class="custom-table-column" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
+                css-class="custom-table-column" />
 
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
@@ -40,7 +48,8 @@
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
                 css-class="custom-table-column" />
         </DxDataGrid>
@@ -141,21 +150,32 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-            loadingVisible.value = false
+    
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -164,8 +184,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-3'
-    })
-})
+}
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 208b1a4..a4fbce7 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -1,23 +1,29 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
+            <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 :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
+                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Contact Center"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="" caption="UI Dist." css-class="custom-table-column" />
@@ -142,22 +148,35 @@ const GET_DATA = gql`
         }
         }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0,
-        media: 'Twitter'
+
+const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    media: 'Twitter'
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    const media = params.media ? params.media.id : ''
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3,
+        media: media
     })
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
-            loadingVisible.value = false
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -166,8 +185,5 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-3'
-    })
-})
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index df8df16..c6ca6de 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -1,4 +1,10 @@
 <template>
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
       :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,8 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :enabled="true" />
+         <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" />
       <DxColumnFixing :enabled="true" />
@@ -74,7 +81,12 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -152,21 +164,33 @@ query rekapitulasiKeluhanAll
         total_selesai
         }
 }`
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-  const filters = useFiltersStore()
-  const { onResult, onError } = useQuery(GET_DATA, {
+
+  const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: '',
     idUid: 0,
     idUp3: 0
   })
+  const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanAll
-      loadingVisible.value = false
+     
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -175,9 +199,5 @@ onMounted(() => {
   onError((error) => {
     console.log(error)
   })
-  filters.setConfig({
-    type: 'type-3',
-    reportButton: true
-  })
-})
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index c5a8c90..b3ab454 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type13 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -36,36 +43,36 @@
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -95,7 +102,12 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -167,21 +179,33 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
 
+
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
-            loadingVisible.value = false
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -190,9 +214,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-13',
-        reportButton: true
-    })
-})
+
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 0954ba4..00a70a0 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -1,21 +1,26 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+                filters = value
+            }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -38,39 +43,38 @@
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
@@ -78,8 +82,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -166,22 +170,34 @@ query rekapitulasiKeluhanPerJenisKeluhan
             total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
 
+
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
                 ;
-            loadingVisible.value = false
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -190,8 +206,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-3'
-    })
-})
-</script>
\ No newline at end of file
+
+}
+</script>
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index a4db013..a6c5bff 100644
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -1,21 +1,26 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type13 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
 
-             <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="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="" caption="Kelompok Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -166,22 +171,34 @@ query rekapitulasiKeluhanPerKelompokKeluhan
             total_selesai
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
+const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
     })
 
+
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
                 ;
-            loadingVisible.value = false
+        
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -190,9 +207,5 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-13',
-        reportButton: true
-    })
-})
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index 4aa6fa6..77bbe03 100644
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -1,4 +1,10 @@
 <template>
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type13 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
   <div>
     <DxDataGrid
       class="max-h-[calc(100vh-140px)]"
@@ -18,7 +24,8 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :enabled="true" />
+         <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"
@@ -299,21 +306,33 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-  const filters = useFiltersStore()
-  const { onResult, onError } = useQuery(GET_DATA, {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  })
+const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
 
   onResult((queryResult) => {
+    
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
-      loadingVisible.value = false
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -322,9 +341,5 @@ onMounted(() => {
   onError((error) => {
     console.log(error)
   })
-  filters.setConfig({
-    type: 'type-13',
-    reportButton: true
-  })
-})
+ }
 </script>
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index 16159dc..f423b65 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,4 +1,10 @@
 <template>
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
       :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,8 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :enabled="true" />
+         <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" />
       <DxColumnFixing :enabled="true" />
@@ -171,21 +178,32 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-  const filters = useFiltersStore()
-  const { onResult, onError } = useQuery(GET_DATA, {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  })
+const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerUnit
-      loadingVisible.value = false
+     
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -194,9 +212,6 @@ onMounted(() => {
   onError((error) => {
     console.log(error)
   })
-  filters.setConfig({
-    type: 'type-8',
-    reportButton: true
-  })
-})
+  
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 684e3e5..97afa3f 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -1,4 +1,10 @@
 <template>
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
       :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :enabled="true" />
+         <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" />
       <DxColumnFixing :enabled="true" />
@@ -132,21 +139,32 @@ const GET_DATA = gql`
     }
   }
 `
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-  const filters = useFiltersStore()
-  const { onResult, onError } = useQuery(GET_DATA, {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  })
+const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filters = ref();
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
-      loadingVisible.value = false
+  
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -155,8 +173,5 @@ onMounted(() => {
   onError((error) => {
     console.log(error)
   })
-  filters.setConfig({
-    type: 'type-3'
-  })
-})
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 4196188..be1f318 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -1,4 +1,10 @@
 <template>
+<Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type8 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -150,21 +157,34 @@ query rekapitulasiKeluhanRatingPerUnit
         total 
         }
 }`;
-const loadingVisible = ref<boolean>(true)
-onMounted(() => {
-    const filters = useFiltersStore()
-    const { onResult, onError } = useQuery(GET_DATA, {
+const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
         dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
         posko: "",
         idUid: 0,
         idUp3: 0,
     })
+const filters = ref();
+
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const posko = params.posko ? params.posko.id : ''
+    const uid = params.uid ? params.uid.id : 0
+    const up3 = params.up3 ? params.up3.id : 0
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko,
+        idUid: uid,
+        idUp3: up3
+    })
+
+    
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
-            loadingVisible.value = false
+          
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -173,9 +193,6 @@ onMounted(() => {
     onError((error) => {
         console.log(error)
     })
-    filters.setConfig({
-        type: 'type-8',
-        reportButton: true
-    })
-})
+  
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index 028ca60..d88d8a4 100644
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -7,7 +7,8 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
 
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index 0286cf2..6cabde2 100644
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -7,7 +7,8 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
 
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index 4856f8b..963c306 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
             :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
@@ -40,8 +46,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref, } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 
 import {
@@ -59,10 +64,7 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -138,19 +140,16 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
     tahun: 2023
 })
 
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+
     refetch({
-        regional: '',
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3,
-        bulan: 10,
-        tahun: 2023,
+        idUid: idUid  ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -163,17 +162,11 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters= ref();
 </script>
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
index efdb963..2bb02ba 100644
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,10 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
@@ -136,19 +140,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
     bulan: 10,
     tahun: 2023
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
     refetch({
-        regional: '',
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3,
-        bulan: 10,
-        tahun: 2023
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -168,18 +169,11 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index 1946083..c9d5cf2 100644
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,10 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true"  />
+            <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" />
             <DxColumnFixing :enabled="true" />
@@ -93,20 +97,17 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKel
     bulan: 10,
     tahun: 2023,
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
+const filterData = (params: any) => {
+
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
 
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: "",
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -123,7 +124,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -159,12 +160,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
index 5f04ebf..9001c0c 100644
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,10 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true"  />
+            <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" />
             <DxColumnFixing :enabled="true" />
@@ -108,19 +112,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
     idUid: 0,
     idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -140,7 +141,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -176,12 +177,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
index 49a0fa4..dce4030 100644
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -1,174 +1,77 @@
 <template>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="200"
-        alignment="center"
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah dan Durasi RPT & RCT Gangguan"
-        css-class="custom-table-column"
-      >
+      <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+        css-class="custom-table-column" />
+      <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="a"
-              data-type="number"
-              data-field="total_rpt_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="b"
-              data-type="number"
-              data-field="jumlah_gangguan_rpt_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="c=a/b"
-              data-type="number"
-              data-field="rpt_gangguan_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="d"
-              data-type="number"
-              data-field="total_rct_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="e"
-              data-type="number"
-              data-field="jumlah_gangguan_rct_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="f=d/e"
-              data-type="number"
-              data-field="rct_gangguan_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="a"
-              data-type="number"
-              data-field="total_rpt_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="b"
-              data-type="number"
-              data-field="jumlah_gangguan_rpt_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="c=a/b"
-              data-type="number"
-              data-field="rpt_gangguan_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
+              data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="d"
-              data-type="number"
-              data-field="total_rct_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="e"
-              data-type="number"
-              data-field="jumlah_gangguan_rct_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="f=d/e"
-              data-type="number"
-              data-field="rch_gangguan_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
+              data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -251,19 +154,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRpt
   idUid: 0,
   idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-  const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-  const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-  const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
   refetch({
-    bulan: 10,
-    tahun: 2023,
-    regional: '',
+    regional: regional,
     posko: posko,
-    idUid: uid,
-    idUp3: up3
+    idUid: idUid ? idUid : 0,
+    idUp3: idUp3 ? idUp3 : 0,
+    bulan: bulan ? bulan : 10,
+    tahun: bulan ? tahun : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -280,10 +180,10 @@ watch(detected, () => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
-  onError((error) => {
-    console.log(error)
-  })
+onError((error) => {
+  console.log(error)
 })
+}
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -318,12 +218,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-onMounted(() => {
-  const filters = useFiltersStore()
+const filters = ref()
 
-  filters.setConfig({
-    type: 'type-2',
-    reportButton: true
-  })
-})
 </script>
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
index aed8df0..18aa714 100644
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -14,11 +20,15 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO" css-class="custom-table-column" />
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="NO"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" data-field="id_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="tipe_permasalahan" caption="Jenis Gangguan"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah"
+                css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_gangguan" caption="%"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -89,19 +99,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJeni
     idUid: 0,
     idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -121,7 +128,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -156,12 +163,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
index 3f9d02a..39a520a 100644
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -105,19 +112,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
     idUid: 0,
     idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3
+        idUid: idUid ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -137,7 +141,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -172,12 +176,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
index 1a59014..e98abe6 100644
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -105,19 +112,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
     idUid: 0,
     idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
+        regional: regional,
         posko: posko,
-        idUid: uid,
-        idUp3: up3
+        idUid: idUid  ? idUid : 0,
+        idUp3: idUp3 ? idUp3 : 0,
+        bulan: bulan ? bulan : 10,
+        tahun: bulan ? tahun : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -137,7 +141,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -172,12 +176,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index 414266f..409f104 100644
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -6,7 +12,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -93,9 +100,7 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSe
     idUid: 0,
     idUp3: 0
 })
-const reportButton = useSearchStore()
-const detected = computed(() => reportButton.isTriggerChange)
-watch(detected, () => {
+const filterData = (params: any) => {
     const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
     const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
     const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
@@ -125,7 +130,7 @@ watch(detected, () => {
     onError((error) => {
         console.log(error)
     })
-})
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -160,12 +165,5 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
index 11185f5..b1cd80a 100644
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -38,7 +45,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { onMounted } from 'vue'
+import { ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -81,13 +88,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params: any) => {
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
index f0e0075..45217a5 100644
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -38,7 +45,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { onMounted } from 'vue'
+import { ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -47,7 +54,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -81,13 +95,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index bc1941d..10e38cf 100644
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -36,8 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
index a909d83..d6320e7 100644
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -72,8 +79,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -81,7 +89,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -115,13 +130,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
index 1578ef5..4eca558 100644
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -6,7 +12,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -22,8 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -31,7 +39,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -65,13 +80,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
index 8a7a12a..77c4ea7 100644
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -36,8 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
index fb2a0a2..76c12da 100644
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -6,7 +12,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -25,8 +32,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -34,7 +42,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -68,13 +83,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index 9874dee..6db98bc 100644
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -82,8 +89,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -91,7 +99,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -125,13 +140,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index 6b02142..680806e 100644
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -44,8 +51,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -53,7 +62,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -87,13 +103,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index 09ce8dd..cc689e9 100644
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -34,8 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -43,7 +51,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -77,13 +92,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index 34cd67a..d980bee 100644
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -36,8 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -45,7 +53,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -79,13 +94,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index bbf2519..8a70cc3 100644
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -69,8 +76,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -78,7 +86,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -112,13 +127,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index aedb3fc..5341f68 100644
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -44,8 +51,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -53,7 +61,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -87,13 +102,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index 6cc64ca..d3882f0 100644
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -34,8 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -43,7 +51,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -77,13 +92,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index e6b56b6..331b5f7 100644
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type2 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
@@ -7,7 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -37,8 +44,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import Filters from '@/components/Form/Filters.vue'
+import Type2 from '@/components/Form/FiltersType/Type2.vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -46,7 +54,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -80,13 +93,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-2',
-        reportButton: true
-    })
-})
+const filterData = (params:any) => 
+{   
+    console.log(params)
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index cf587b8..2af40d5 100644
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -7,7 +7,8 @@
             <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" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
 
@@ -36,11 +37,18 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted,ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 onMounted(() => {
     const filters = useFiltersStore()
 
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
index b00c9c1..2a10496 100644
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -7,7 +7,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :enabled="true" />
+               <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" />
             <DxColumnFixing :enabled="true" />
@@ -31,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted,ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -40,7 +41,13 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/utils/network.ts b/src/utils/network.ts
index 43d2a25..9f1783f 100644
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -5,9 +5,10 @@ const instance = axios.create({
 })
 
 const getUid = async () => await instance.get('/uid')
+const getUidRegional = async (regional: number) => await instance.get('/uid?regional=' + regional)
 const getMedia = async () => await instance.get('/media')
 const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi }
+export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional}

From 1750dd33dfa5f4ed18eae2b15f08c7dc07c24d7e Mon Sep 17 00:00:00 2001
From: probdg <ekoharyadi416@gmail.com>
Date: Mon, 12 Feb 2024 11:01:41 +0700
Subject: [PATCH 09/17] Add splitRoutePath and getMonthName functions to
 utils/numbers.ts and texts.ts

---
 src/components/Form/FiltersType/Type12.vue   | 56 +++++++++++++++-
 src/components/Form/FiltersType/Type13.vue   | 70 +++++++++++++++-----
 src/components/Form/FiltersType/Type2.vue    | 41 ++++++++++--
 src/components/Form/FiltersType/Type7.vue    | 53 +++++++++------
 src/components/Form/FiltersType/Type8.vue    |  8 ---
 src/components/Form/FiltersType/reference.ts |  4 +-
 src/components/Form/InlineRadioGroup.vue     | 23 +++++--
 src/components/Form/InputWithSuffix.vue      | 25 ++++---
 src/components/Pages/Gangguan/Table_3.vue    |  6 +-
 src/components/Pages/Monalisa/Table_36.vue   | 31 +++++----
 src/utils/numbers.ts                         | 17 +++++
 src/utils/texts.ts                           | 10 ++-
 12 files changed, 259 insertions(+), 85 deletions(-)

diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
index 40658f5..742b0f2 100644
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -2,13 +2,55 @@
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InputWithSuffix from '../InputWithSuffix.vue';
+  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: ''
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select
+      @update:selected="setUid($event)"
+      :data="itemsUid"
+      :placeholder="uidPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -16,7 +58,11 @@
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select
+      @update:selected="setUp3($event)"
+      :data="itemsUp3"
+      :placeholder="up3Placeholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -24,7 +70,11 @@
       >Unit Layanan Pelanggan:</label
     >
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select
+      @update:selected="setUlp($event)"
+      :data="itemsUlp"
+      :placeholder="ulpPlaceholder"
+    />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 98b1e49..c4ec4df 100644
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -1,44 +1,82 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: 0, name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  uppp.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
+
+const setUp3 = (value: any) => {
+  uppp.value = value;
+  selectedUp3Ulp(value);
+  ulp.value = { id: 0, name: ulpPlaceholder };
+  data.value.up3 = value;
+};
+
+const setUlp = (value: any) => {
+  ulp.value = value;
+  selectedUlp(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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>
 
-    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </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 placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </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 Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select placeholder="Semua Unit Layanan Pelanggan" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
   </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 @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </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">Group By Kode Unit Distribusi:</label>
 
-    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+    <InlineRadioGroup @update:group-value="(value) => {
+      data.group = value
+      console.log('data.group', value)
+    }" :radio-items="[{ id: 1, title: 'Tidak', checked: true }, { id: 2, title: 'Ya, Grupkan' }]" />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 0b0b65e..7bf7f2f 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,24 +1,43 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { onMounted, ref } from 'vue';
+import { getMonthName } from '@/utils/texts';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const regionalPlaceholder = 'Semua Regional';
-const bulanPlaceholder = 'Pilih Bulan';
-const tahunPlaceholder = 'Pilih Tahun';
+const bulanPlaceholder = getMonthName(new Date().getMonth());
+const tahunPlaceholder = new Date().getFullYear().toString();
+const bulanSelected = new Date().getMonth();
+const tahunSelected = new Date().getFullYear();
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: 0, name: ulpPlaceholder });
+const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
+const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
 const regional = ref({ id: 0, name: regionalPlaceholder });
 const emit = defineEmits(['update:filters'])
+// Find index of January
+const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
+
+// Remove January if found
+if (bulanIndex !== -1) {
+  months.splice(bulanIndex, 1);
+}
+// Find index of current year
+const tahunIndex = years.value.findIndex(year => year.id === tahun.value.id);
+if (tahunIndex !== -1) {
+  years.value.splice(tahunIndex, 1);
+}
 const data = ref({
   regional: regional.value,
   uid: uid.value,
   up3: uppp.value,
   posko: ulp.value,
-  periode: ''
+  periode: '',
+  bulan : bulan.value,
+  tahun : tahun.value
 })
 
 const setRegional = (value: any) => {
@@ -47,6 +66,16 @@ const setUlp = (value: any) => {
   selectedUp3Ulp(value);
   data.value.posko = value;
 };
+const setMonth = (value: any) => {
+  bulan.value = value;
+  data.value.bulan = value;
+  console.log(data.value)
+
+};
+const setYear = (value: any) => {
+  tahun.value = value;
+  data.value.tahun = value;
+};
 onMounted(() => {
   emit('update:filters', data.value)
   fetchRegional()
@@ -82,8 +111,8 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
-      <Select :data="months" :placeholder="bulanPlaceholder" />
-      <Select :data="years" :placeholder="tahunPlaceholder" />
+      <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
+      <Select @update:selected="setYear($event)" :data="years" :placeholder="tahunPlaceholder" />
     </div>
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index 4c85ae0..5247344 100644
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -18,8 +18,8 @@ const data = ref({
   up3: up3.value,
   posko: posko.value,
   periode: '',
-  minDurasiRecoveryTime: 1,
-  maxDurasiRecoveryTime: 1
+  minTime: 1,
+  maxTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value
@@ -57,25 +57,30 @@ const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
     console.log('Durasi Menit')
-    data.value.minDurasiRecoveryTime = 0
-    data.value.maxDurasiRecoveryTime = 5
+    data.value.minTime = 0
+    data.value.maxTime = 5
     triggerInput.value = false
   } else if (value.id === 1) {
-    data.value.minDurasiRecoveryTime = 0
-    data.value.maxDurasiRecoveryTime = 45
+    data.value.minTime = 0
+    data.value.maxTime = 45
+    console.log(data.value)
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    data.value.minDurasiRecoveryTime = 46
-    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    data.value.minTime = 46
+    data.value.maxTime = 99999 * 60 * 24
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
 
+  console.log('value', data.value);
+  
 }
-watch(() => data.value, () => {
-  emit('update:filters', data.value)
-}, { deep: true })
+watch(data, (newValue) => {
+  console.log('newValue', newValue.maxTime)
+
+  emit('update:filters', newValue)
+})
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -127,26 +132,32 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
+      <Select 
+      @update:selected="changeDuration($event)" 
+        
+      :data="sla" placeholder="Durasi Menit" />
 
-      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5"  >
         <InputWithSuffix 
-          @update:minute-value="
+        :default-value="`${data.minTime} Menit`"
+        :disabled="triggerInput"
+          @update:minuteValue="
           (value :any)=> {
-            data.minDurasiRecoveryTime =value
+            data.minTime =value
           }
           "
-        @value="data.minDurasiRecoveryTime"
-        :disabled=triggerInput />
+         
+       />
         <small class="flex items-center">s/d</small>
         <InputWithSuffix 
-          @update:minute-value="
+        :default-value="`${data.maxTime} Menit`"
+          @update:minuteValue="
           (value :any)=> {
-            data.maxDurasiRecoveryTime = value
+            data.maxTime = value
           }
           "
-        @value="data.maxDurasiRecoveryTime"
-        :disabled="triggerInput" />
+        :disabled="triggerInput"
+            />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index a24e760..d80c165 100644
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -6,11 +6,9 @@ import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Posko,
-  selectedPosko,
   fetchUid,
   itemsUid,
   itemsUp3,
-  itemsPosko
 } from './reference'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@@ -45,12 +43,6 @@ const setUp3 = (value: any) => {
   data.value.up3 = value
 }
 
-const setPosko = (value: any) => {
-  posko.value = value
-  selectedPosko(value)
-  data.value.posko = value
-}
-
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index f4147ed..b7fb5f8 100644
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -23,12 +23,14 @@ const months = [
   { id: 11, name: 'November' },
   { id: 12, name: 'Desember' },
 ]
+
 // create 4 year back array
 const year = new Date().getFullYear();
-const years = ref<Item[]>([]);
+let years = ref<Item[]>([]);
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
+
 const timeout = ref()
 const itemsUid = ref<Item[]>([]);
 const itemsUp3 = ref<Item[]>([]);
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
index 6672c35..a017791 100644
--- a/src/components/Form/InlineRadioGroup.vue
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -3,8 +3,9 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input :id="`${item.id}`" type="radio" name="radio"
-            :checked="item.hasOwnProperty('checked') && item.checked === true"
+          <input v-model="groupValue" 
+            type="radio" name="radio"
+            :checked="item.checked" @change="onChange(item)"
             class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
           <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
             item.title }}</label>
@@ -15,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { type PropType } from 'vue'
+import { ref, watch, type PropType, onMounted } from 'vue'
 
 interface Item {
   id: number;
@@ -23,10 +24,24 @@ interface Item {
   checked?: boolean;
 }
 
-defineProps({
+const onChange= (e:Item) => {
+  itemSelected.value = e
+  emit('update:groupValue', e)
+}
+
+const props = defineProps({
   radioItems: {
     type: Array as PropType<Item[]>,
     required: true
   }
 })
+
+const itemSelected = ref(props.radioItems[0])
+const emit = defineEmits(['update:groupValue'])
+const groupValue = ref(1)
+
+onMounted(() => {
+  itemSelected.value = props.radioItems[0]
+})
+
 </script>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index 47bad76..fed2b2a 100644
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
   placeholder: {
@@ -14,35 +14,42 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  value: {
-    type: Number,
-    default: ''
+  defaultValue: {
+    type: String,
+    default: '1 Menit'
   }
+ 
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref(1)
+const menitValue = ref<any>(props.defaultValue)
 watch(menitValue, (newValue) => {
   console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
+
+watch(() => props.defaultValue, (newValue) => {
+  menitValue.value = newValue
+})
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+  <div 
+ 
+  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
       v-model="menitValue"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
-      :disabled="disabled"
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      defaultValue="1"
+      :disabled="disabled"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
-      class="w-full 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"
+      class="w-full 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
+      "
     />
   </div>
 </template>
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 95895c7..2f727f7 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -67,13 +67,13 @@ const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
-    const { minDurasiResponseTime, maxDurasiResponseTime, posko, uid, up3 } = params;
+    const { minTime, maxTime, posko, uid, up3 } = params;
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        minDurasiResponseTime : minDurasiResponseTime ? minDurasiResponseTime : 1,
-        maxDurasiResponseTime : maxDurasiResponseTime ? maxDurasiResponseTime : 1,
+        minDurasiResponseTime : minTime ? minTime : 0,
+        maxDurasiResponseTime : maxTime ? maxTime : 1,
         posko: posko ? posko.id : "",
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index 963c306..add6a38 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -46,9 +46,9 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref, } from 'vue'
+import { onMounted, ref, } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-
+import { getMonthName } from '@/utils/texts'
 import {
     DxColumn,
     DxColumnFixing,
@@ -104,6 +104,9 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const MONALISAJUMLAHKALIGANGGUAN = gql`
   query DaftarMonalisaJumlahKaliGangguan(
     $regional: String
@@ -136,20 +139,22 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
     posko: '',
     idUid: 0,
     idUp3: 0,
-    bulan: 10,
-    tahun: 2023
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
 })
 
 const filterData = (params: any) => {
     const {regional, posko, idUid, idUp3, bulan, tahun} = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
         posko: posko,
         idUid: idUid  ? idUid : 0,
         idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        bulan: bulan ? bulan : bulanSekarang.value,
+        tahun: bulan ? tahun : tahunSekarang.value
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
@@ -167,6 +172,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-
+onMounted(() => {
+    console.log(bulanSekarang.value)
+});
 const filters= ref();
 </script>
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
index e69de29..18dac0f 100644
--- a/src/utils/numbers.ts
+++ b/src/utils/numbers.ts
@@ -0,0 +1,17 @@
+const splitRoutePath = (routePath: string): string[] => {
+    const routeParts = routePath.split('/').filter((part) => part !== '')
+
+    const routeArray: string[] = []
+    let currentRoute = ''
+
+    for (const part of routeParts) {
+        currentRoute += `/${part}`
+        routeArray.push(currentRoute)
+    }
+
+    return routeArray
+}
+
+export {
+    splitRoutePath
+}
\ No newline at end of file
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
index 18dac0f..9f3036f 100644
--- a/src/utils/texts.ts
+++ b/src/utils/texts.ts
@@ -11,7 +11,13 @@ const splitRoutePath = (routePath: string): string[] => {
 
     return routeArray
 }
-
+const getMonthName = (monthNumber :number)=> {
+    const months = [
+      'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+      'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+    ];
+    return months[monthNumber - 1] || '';
+  }
 export {
-    splitRoutePath
+    splitRoutePath,getMonthName
 }
\ No newline at end of file

From 1720d39082f142113d9acd71b1d14e4a85e7e7c9 Mon Sep 17 00:00:00 2001
From: rpurnama1409 <rpurnama0014@gmail.com>
Date: Mon, 19 Feb 2024 08:21:44 +0700
Subject: [PATCH 10/17] Update GraphQL and network URLs

---
 src/utils/graphql.ts | 2 +-
 src/utils/network.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
index 70a926a..6f062b1 100644
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -3,7 +3,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core
 export const apolloClient = () => {
 
   const httpLink =  createHttpLink({
-    uri: 'http://10.8.0.13:8080/graphql',
+    uri: 'http://192.168.1.84/:32180/graphql',
     credentials: 'include', // Include credentials for cross-origin requests
   });
 
diff --git a/src/utils/network.ts b/src/utils/network.ts
index 9f1783f..3012ef3 100644
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const instance = axios.create({
-  baseURL: 'http://10.8.0.13:8443'
+  baseURL: 'http://192.168.1.84/:32180'
 })
 
 const getUid = async () => await instance.get('/uid')

From 70be5ae9cdce8ce522b91d1ad8833ab032edd3f4 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 19 Feb 2024 08:28:57 +0700
Subject: [PATCH 11/17] build image

---
 .github/workflows/docker-image-development.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
index db16bb7..ad571d8 100644
--- a/.github/workflows/docker-image-development.yml
+++ b/.github/workflows/docker-image-development.yml
@@ -24,5 +24,5 @@ jobs:
     - uses: actions/checkout@v3
     - name: Build the Docker image
       run: | 
-          docker build . -t defuj/apkt-eis:v1.0.0-dev
-          docker push defuj/apkt-eis:v1.0.0-dev
\ No newline at end of file
+          docker build . -t defuj/apkt-eis:v1.0.1-dev
+          docker push defuj/apkt-eis:v1.0.1-dev
\ No newline at end of file

From 6c5e0fe763eac8a1be899ad0bd87f1f2e298ead8 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 19 Feb 2024 09:08:50 +0700
Subject: [PATCH 12/17] Update file permissions for multiple files

---
 .env.development                              |   0
 .env.production                               |   0
 .eslintrc.cjs                                 |   0
 .../workflows/docker-image-development.yml    |   0
 .github/workflows/docker-image-release.yml    |   0
 .gitignore                                    |   0
 .prettierrc.json                              |   0
 .tw-patch/tw-class-list.json                  |   0
 .vscode/extensions.json                       |   0
 Dockerfile                                    |   0
 README.md                                     |   0
 deployment.yaml                               |   0
 env.d.ts                                      |   0
 index.html                                    |   0
 nginx.conf                                    |   0
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 postcss.config.js                             |   0
 public/assets/css/loader.css                  |   0
 public/assets/images/favicon.ico              | Bin
 public/assets/images/pln.ico                  | Bin
 src/App.vue                                   |   0
 src/assets/css/base.css                       |   0
 src/assets/css/main.css                       |   0
 src/assets/css/style.css                      |   0
 src/assets/css/tailwind.css                   |   0
 src/assets/icons/dot-outline.svg              |   0
 src/assets/icons/gauge.svg                    |   0
 src/assets/icons/lightning-slash.svg          |   0
 src/assets/icons/monitor.svg                  |   0
 src/assets/icons/plugs.svg                    |   0
 src/assets/icons/smiley-sad.svg               |   0
 src/assets/icons/swap.svg                     |   0
 src/assets/images/hero.png                    | Bin
 src/assets/images/pln-with-text.png           | Bin
 src/assets/images/pln.png                     | Bin
 src/components/Button.vue                     |   0
 src/components/Buttons/ButtonDropdown.vue     |   0
 src/components/Buttons/ButtonPrimary.vue      |   0
 src/components/CommandPalettes.vue            |   0
 src/components/DatePicker.vue                 |   0
 src/components/Dialogs/ActionDialog.vue       |   0
 src/components/Dialogs/DetailDialog.vue       |   0
 src/components/Form/Filters.vue               |   0
 src/components/Form/FiltersType/Type1.vue     |   4 +-
 src/components/Form/FiltersType/Type10.vue    |   4 +-
 src/components/Form/FiltersType/Type11.vue    |   5 +-
 src/components/Form/FiltersType/Type12.vue    |  66 ++++-
 src/components/Form/FiltersType/Type13.vue    |   4 +-
 src/components/Form/FiltersType/Type14.vue    |  36 ++-
 src/components/Form/FiltersType/Type15.vue    |  15 +
 src/components/Form/FiltersType/Type16.vue    |   4 +-
 src/components/Form/FiltersType/Type17.vue    |   0
 src/components/Form/FiltersType/Type18.vue    |   0
 src/components/Form/FiltersType/Type2.vue     |  10 +-
 src/components/Form/FiltersType/Type3.vue     |   4 +-
 src/components/Form/FiltersType/Type4.vue     |   4 +-
 src/components/Form/FiltersType/Type5.vue     |   4 +-
 src/components/Form/FiltersType/Type6.vue     |   4 +-
 src/components/Form/FiltersType/Type7.vue     |  64 ++---
 src/components/Form/FiltersType/Type8.vue     |   4 +-
 src/components/Form/FiltersType/Type9.vue     |   4 +-
 src/components/Form/FiltersType/index.ts      |   0
 src/components/Form/FiltersType/reference.ts  |  25 +-
 src/components/Form/InlineRadioGroup.vue      |   0
 src/components/Form/InputNumber.vue           |   1 -
 src/components/Form/InputWithFilter.vue       |   0
 src/components/Form/InputWithSuffix.vue       |   8 +-
 src/components/Input.vue                      |   0
 src/components/InputText.vue                  |   0
 src/components/Navigation/Aside/Aside.vue     |   0
 .../Navigation/Aside/AsideMenuMultiple.vue    |   0
 .../Navigation/Aside/AsideMenuSingle.vue      |   0
 src/components/Navigation/Header.vue          |   0
 src/components/Navigation/Navigation.vue      |   0
 src/components/Notification/Notification.vue  |   0
 .../Notification/NotificationProvider.vue     |   0
 .../Notification/icons/CloseIcon.vue          |   0
 .../Notification/icons/ErrorIcon.vue          |   0
 .../Notification/icons/InfoIcon.vue           |   0
 .../Notification/icons/SuccessIcon.vue        |   0
 .../Notification/icons/WarningIcon.vue        |   0
 src/components/Notification/icons/index.ts    |   0
 src/components/Notification/index.ts          |   0
 .../interfaces/Notification.interface.ts      |   0
 .../NotificationConfig.interface.ts           |   0
 .../NotificationsState.interface.ts           |   0
 .../Notification/interfaces/index.ts          |   0
 src/components/Notification/store/index.ts    |   0
 src/components/Pages/Anomali/Table_61.vue     |   8 +-
 src/components/Pages/Anomali/Table_62.vue     |   6 +
 src/components/Pages/Anomali/Table_63.vue     |   7 +-
 src/components/Pages/Anomali/Table_64.vue     |   7 +-
 src/components/Pages/Anomali/Table_65.vue     |   7 +-
 src/components/Pages/Anomali/Table_66.vue     |   6 +
 src/components/Pages/Anomali/index.ts         |   0
 src/components/Pages/Cico/Table_60.vue        |  32 ++-
 src/components/Pages/Cico/index.ts            |   0
 src/components/Pages/Ctt/Table_67.vue         |  32 ++-
 src/components/Pages/Ctt/index.ts             |   0
 src/components/Pages/EmptyPage.vue            |   0
 src/components/Pages/Gangguan/Table_1.vue     |  39 +--
 src/components/Pages/Gangguan/Table_10.vue    |   9 +-
 src/components/Pages/Gangguan/Table_11.vue    |  10 +-
 src/components/Pages/Gangguan/Table_12.vue    |  10 +-
 src/components/Pages/Gangguan/Table_13.vue    |  10 +-
 src/components/Pages/Gangguan/Table_14.vue    |  38 ++-
 src/components/Pages/Gangguan/Table_15.vue    |  10 +-
 src/components/Pages/Gangguan/Table_16.vue    |  10 +-
 src/components/Pages/Gangguan/Table_17.vue    |  10 +-
 src/components/Pages/Gangguan/Table_18.vue    |  10 +-
 src/components/Pages/Gangguan/Table_19.vue    |  10 +-
 src/components/Pages/Gangguan/Table_2.vue     |   0
 src/components/Pages/Gangguan/Table_20.vue    |  10 +-
 src/components/Pages/Gangguan/Table_3.vue     |   1 +
 src/components/Pages/Gangguan/Table_4.vue     |   0
 src/components/Pages/Gangguan/Table_5.vue     |   0
 src/components/Pages/Gangguan/Table_6.vue     |   0
 src/components/Pages/Gangguan/Table_7.vue     |  11 +-
 src/components/Pages/Gangguan/Table_8.vue     |   4 +-
 src/components/Pages/Gangguan/Table_9.vue     |  11 +-
 src/components/Pages/Gangguan/index.ts        |   0
 src/components/Pages/HomeEmpty.vue            |   0
 src/components/Pages/Keluhan/Table_21.vue     |  16 +-
 src/components/Pages/Keluhan/Table_22.vue     |  16 +-
 src/components/Pages/Keluhan/Table_23.vue     |  16 +-
 src/components/Pages/Keluhan/Table_24.vue     |  16 +-
 src/components/Pages/Keluhan/Table_25.vue     |  16 +-
 src/components/Pages/Keluhan/Table_26.vue     |  16 +-
 src/components/Pages/Keluhan/Table_27.vue     |  22 +-
 src/components/Pages/Keluhan/Table_28.vue     |  12 +-
 src/components/Pages/Keluhan/Table_29.vue     |  17 +-
 src/components/Pages/Keluhan/Table_30.vue     |  16 +-
 src/components/Pages/Keluhan/Table_31.vue     |  19 +-
 src/components/Pages/Keluhan/Table_32.vue     | 256 +++++-------------
 src/components/Pages/Keluhan/Table_33.vue     |  67 ++---
 src/components/Pages/Keluhan/Table_34.vue     |  57 ++--
 src/components/Pages/Keluhan/Table_35.vue     |  55 ++--
 src/components/Pages/Keluhan/index.ts         |   0
 src/components/Pages/Material/Table_68.vue    |  29 +-
 src/components/Pages/Material/Table_69.vue    |   7 +-
 src/components/Pages/Material/index.ts        |   0
 src/components/Pages/MenuProvider.vue         |   0
 src/components/Pages/Monalisa/Table_36.vue    |  10 +-
 src/components/Pages/Monalisa/Table_37.vue    |  31 ++-
 src/components/Pages/Monalisa/Table_38.vue    |  40 +--
 src/components/Pages/Monalisa/Table_39.vue    |  30 +-
 src/components/Pages/Monalisa/Table_40.vue    |  17 +-
 src/components/Pages/Monalisa/Table_41.vue    |  17 +-
 src/components/Pages/Monalisa/Table_42.vue    |  30 +-
 src/components/Pages/Monalisa/Table_43.vue    |  30 +-
 src/components/Pages/Monalisa/Table_44.vue    |  59 ++--
 src/components/Pages/Monalisa/Table_45.vue    | 102 ++++++-
 src/components/Pages/Monalisa/Table_46.vue    | 112 ++++++--
 src/components/Pages/Monalisa/Table_47.vue    |  86 +++++-
 src/components/Pages/Monalisa/Table_48.vue    |  96 ++++++-
 src/components/Pages/Monalisa/Table_49.vue    |  80 +++++-
 src/components/Pages/Monalisa/Table_50.vue    |  92 ++++++-
 src/components/Pages/Monalisa/Table_51.vue    | 234 ++++++++++++----
 src/components/Pages/Monalisa/Table_52.vue    |   0
 src/components/Pages/Monalisa/Table_53.vue    |   0
 src/components/Pages/Monalisa/Table_54.vue    |   0
 src/components/Pages/Monalisa/Table_55.vue    |   0
 src/components/Pages/Monalisa/Table_56.vue    |   0
 src/components/Pages/Monalisa/Table_57.vue    |   0
 src/components/Pages/Monalisa/Table_58.vue    |   0
 src/components/Pages/Monalisa/Table_59.vue    |   1 +
 src/components/Pages/Monalisa/index.ts        |   0
 .../Pages/PencarianData/Table_71.vue          |  26 +-
 src/components/Pages/PencarianData/index.ts   |   0
 src/components/Pages/Transaksi/Table_70.vue   |  21 +-
 src/components/Pages/Transaksi/index.ts       |   0
 src/components/Pages/Welcome.vue              |   0
 src/components/PictureInitial.vue             |   0
 src/components/Select.vue                     |   0
 src/components/SelectMulti.vue                |   0
 src/components/__tests__/HelloWorld.spec.ts   |   0
 src/components/icons/IconBars3.vue            |   0
 src/components/icons/IconBox.vue              |   0
 src/components/icons/IconCommunity.vue        |   0
 src/components/icons/IconDatabase.vue         |   0
 src/components/icons/IconDocumentation.vue    |   0
 src/components/icons/IconDotOutline.vue       |   0
 src/components/icons/IconEcosystem.vue        |   0
 src/components/icons/IconFileSearch.vue       |   0
 src/components/icons/IconFileX.vue            |   0
 src/components/icons/IconFilter.vue           |   0
 src/components/icons/IconGauge.vue            |   0
 src/components/icons/IconLightningSlash.vue   |   0
 src/components/icons/IconLinkBreak.vue        |   0
 src/components/icons/IconLockKey.vue          |   0
 src/components/icons/IconMonitor.vue          |   0
 src/components/icons/IconNetworkChange.vue    |   0
 .../icons/IconNetworkDisconnected.vue         |   0
 src/components/icons/IconPlugs.vue            |   0
 src/components/icons/IconSmileySad.vue        |   0
 src/components/icons/IconSupport.vue          |   0
 src/components/icons/IconSwap.vue             |   0
 src/components/icons/IconTooling.vue          |   0
 src/components/icons/IconWallet.vue           |   0
 src/main.ts                                   |   0
 src/router/index.ts                           |   0
 src/stores/auth.ts                            |   0
 src/stores/command.ts                         |   0
 src/stores/date.ts                            |   0
 src/stores/dialog.ts                          |   0
 src/stores/filters.ts                         |   0
 src/stores/filtersAction.ts                   |   0
 src/stores/media.ts                           |   0
 src/stores/menu.ts                            |   0
 src/stores/posts.ts                           |   0
 src/stores/queries.ts                         |   0
 src/stores/region.ts                          |   0
 src/stores/totalDuration.ts                   |   0
 src/stores/totalReport.ts                     |   0
 src/stores/ulp.ts                             |   0
 src/stores/up3.ts                             |   0
 src/stores/user.ts                            |   0
 src/types/gangguan.ts                         |   0
 src/types/menu.ts                             |   0
 src/utils/graphql.ts                          |   2 +-
 src/utils/icons.ts                            |   0
 src/utils/network.ts                          |   3 +-
 src/utils/numbers.ts                          |   0
 src/utils/route.ts                            |   0
 src/utils/storage.ts                          |   0
 src/utils/texts.ts                            |   0
 src/views/HomeView.vue                        |   0
 src/views/LoginView.vue                       |   0
 src/views/NotFoundView.vue                    |   0
 src/views/TestView.vue                        |   0
 tailwind.config.js                            |   0
 tsconfig.app.json                             |   0
 tsconfig.json                                 |   0
 tsconfig.node.json                            |   0
 tsconfig.vitest.json                          |   0
 vercel.json                                   |   0
 vite.config.ts                                |   0
 vitest.config.ts                              |   0
 239 files changed, 1433 insertions(+), 928 deletions(-)
 mode change 100644 => 100755 .env.development
 mode change 100644 => 100755 .env.production
 mode change 100644 => 100755 .eslintrc.cjs
 mode change 100644 => 100755 .github/workflows/docker-image-development.yml
 mode change 100644 => 100755 .github/workflows/docker-image-release.yml
 mode change 100644 => 100755 .gitignore
 mode change 100644 => 100755 .prettierrc.json
 mode change 100644 => 100755 .tw-patch/tw-class-list.json
 mode change 100644 => 100755 .vscode/extensions.json
 mode change 100644 => 100755 Dockerfile
 mode change 100644 => 100755 README.md
 mode change 100644 => 100755 deployment.yaml
 mode change 100644 => 100755 env.d.ts
 mode change 100644 => 100755 index.html
 mode change 100644 => 100755 nginx.conf
 mode change 100644 => 100755 package-lock.json
 mode change 100644 => 100755 package.json
 mode change 100644 => 100755 postcss.config.js
 mode change 100644 => 100755 public/assets/css/loader.css
 mode change 100644 => 100755 public/assets/images/favicon.ico
 mode change 100644 => 100755 public/assets/images/pln.ico
 mode change 100644 => 100755 src/App.vue
 mode change 100644 => 100755 src/assets/css/base.css
 mode change 100644 => 100755 src/assets/css/main.css
 mode change 100644 => 100755 src/assets/css/style.css
 mode change 100644 => 100755 src/assets/css/tailwind.css
 mode change 100644 => 100755 src/assets/icons/dot-outline.svg
 mode change 100644 => 100755 src/assets/icons/gauge.svg
 mode change 100644 => 100755 src/assets/icons/lightning-slash.svg
 mode change 100644 => 100755 src/assets/icons/monitor.svg
 mode change 100644 => 100755 src/assets/icons/plugs.svg
 mode change 100644 => 100755 src/assets/icons/smiley-sad.svg
 mode change 100644 => 100755 src/assets/icons/swap.svg
 mode change 100644 => 100755 src/assets/images/hero.png
 mode change 100644 => 100755 src/assets/images/pln-with-text.png
 mode change 100644 => 100755 src/assets/images/pln.png
 mode change 100644 => 100755 src/components/Button.vue
 mode change 100644 => 100755 src/components/Buttons/ButtonDropdown.vue
 mode change 100644 => 100755 src/components/Buttons/ButtonPrimary.vue
 mode change 100644 => 100755 src/components/CommandPalettes.vue
 mode change 100644 => 100755 src/components/DatePicker.vue
 mode change 100644 => 100755 src/components/Dialogs/ActionDialog.vue
 mode change 100644 => 100755 src/components/Dialogs/DetailDialog.vue
 mode change 100644 => 100755 src/components/Form/Filters.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type1.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type10.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type11.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type12.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type13.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type14.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type15.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type16.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type17.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type18.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type2.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type3.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type4.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type5.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type6.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type7.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type8.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/Type9.vue
 mode change 100644 => 100755 src/components/Form/FiltersType/index.ts
 mode change 100644 => 100755 src/components/Form/FiltersType/reference.ts
 mode change 100644 => 100755 src/components/Form/InlineRadioGroup.vue
 mode change 100644 => 100755 src/components/Form/InputNumber.vue
 mode change 100644 => 100755 src/components/Form/InputWithFilter.vue
 mode change 100644 => 100755 src/components/Form/InputWithSuffix.vue
 mode change 100644 => 100755 src/components/Input.vue
 mode change 100644 => 100755 src/components/InputText.vue
 mode change 100644 => 100755 src/components/Navigation/Aside/Aside.vue
 mode change 100644 => 100755 src/components/Navigation/Aside/AsideMenuMultiple.vue
 mode change 100644 => 100755 src/components/Navigation/Aside/AsideMenuSingle.vue
 mode change 100644 => 100755 src/components/Navigation/Header.vue
 mode change 100644 => 100755 src/components/Navigation/Navigation.vue
 mode change 100644 => 100755 src/components/Notification/Notification.vue
 mode change 100644 => 100755 src/components/Notification/NotificationProvider.vue
 mode change 100644 => 100755 src/components/Notification/icons/CloseIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/ErrorIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/InfoIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/SuccessIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/WarningIcon.vue
 mode change 100644 => 100755 src/components/Notification/icons/index.ts
 mode change 100644 => 100755 src/components/Notification/index.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/Notification.interface.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/NotificationConfig.interface.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/NotificationsState.interface.ts
 mode change 100644 => 100755 src/components/Notification/interfaces/index.ts
 mode change 100644 => 100755 src/components/Notification/store/index.ts
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_61.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_62.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_63.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_64.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_65.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/Table_66.vue
 mode change 100644 => 100755 src/components/Pages/Anomali/index.ts
 mode change 100644 => 100755 src/components/Pages/Cico/Table_60.vue
 mode change 100644 => 100755 src/components/Pages/Cico/index.ts
 mode change 100644 => 100755 src/components/Pages/Ctt/Table_67.vue
 mode change 100644 => 100755 src/components/Pages/Ctt/index.ts
 mode change 100644 => 100755 src/components/Pages/EmptyPage.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_1.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_10.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_11.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_12.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_13.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_14.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_15.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_16.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_17.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_18.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_19.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_2.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_20.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_3.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_4.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_5.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_6.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_7.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_8.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/Table_9.vue
 mode change 100644 => 100755 src/components/Pages/Gangguan/index.ts
 mode change 100644 => 100755 src/components/Pages/HomeEmpty.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_21.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_22.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_23.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_24.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_25.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_26.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_27.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_28.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_29.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_30.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_31.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_32.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_33.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_34.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/Table_35.vue
 mode change 100644 => 100755 src/components/Pages/Keluhan/index.ts
 mode change 100644 => 100755 src/components/Pages/Material/Table_68.vue
 mode change 100644 => 100755 src/components/Pages/Material/Table_69.vue
 mode change 100644 => 100755 src/components/Pages/Material/index.ts
 mode change 100644 => 100755 src/components/Pages/MenuProvider.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_36.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_37.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_38.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_39.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_40.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_41.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_42.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_43.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_44.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_45.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_46.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_47.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_48.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_49.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_50.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_51.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_52.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_53.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_54.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_55.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_56.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_57.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_58.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/Table_59.vue
 mode change 100644 => 100755 src/components/Pages/Monalisa/index.ts
 mode change 100644 => 100755 src/components/Pages/PencarianData/Table_71.vue
 mode change 100644 => 100755 src/components/Pages/PencarianData/index.ts
 mode change 100644 => 100755 src/components/Pages/Transaksi/Table_70.vue
 mode change 100644 => 100755 src/components/Pages/Transaksi/index.ts
 mode change 100644 => 100755 src/components/Pages/Welcome.vue
 mode change 100644 => 100755 src/components/PictureInitial.vue
 mode change 100644 => 100755 src/components/Select.vue
 mode change 100644 => 100755 src/components/SelectMulti.vue
 mode change 100644 => 100755 src/components/__tests__/HelloWorld.spec.ts
 mode change 100644 => 100755 src/components/icons/IconBars3.vue
 mode change 100644 => 100755 src/components/icons/IconBox.vue
 mode change 100644 => 100755 src/components/icons/IconCommunity.vue
 mode change 100644 => 100755 src/components/icons/IconDatabase.vue
 mode change 100644 => 100755 src/components/icons/IconDocumentation.vue
 mode change 100644 => 100755 src/components/icons/IconDotOutline.vue
 mode change 100644 => 100755 src/components/icons/IconEcosystem.vue
 mode change 100644 => 100755 src/components/icons/IconFileSearch.vue
 mode change 100644 => 100755 src/components/icons/IconFileX.vue
 mode change 100644 => 100755 src/components/icons/IconFilter.vue
 mode change 100644 => 100755 src/components/icons/IconGauge.vue
 mode change 100644 => 100755 src/components/icons/IconLightningSlash.vue
 mode change 100644 => 100755 src/components/icons/IconLinkBreak.vue
 mode change 100644 => 100755 src/components/icons/IconLockKey.vue
 mode change 100644 => 100755 src/components/icons/IconMonitor.vue
 mode change 100644 => 100755 src/components/icons/IconNetworkChange.vue
 mode change 100644 => 100755 src/components/icons/IconNetworkDisconnected.vue
 mode change 100644 => 100755 src/components/icons/IconPlugs.vue
 mode change 100644 => 100755 src/components/icons/IconSmileySad.vue
 mode change 100644 => 100755 src/components/icons/IconSupport.vue
 mode change 100644 => 100755 src/components/icons/IconSwap.vue
 mode change 100644 => 100755 src/components/icons/IconTooling.vue
 mode change 100644 => 100755 src/components/icons/IconWallet.vue
 mode change 100644 => 100755 src/main.ts
 mode change 100644 => 100755 src/router/index.ts
 mode change 100644 => 100755 src/stores/auth.ts
 mode change 100644 => 100755 src/stores/command.ts
 mode change 100644 => 100755 src/stores/date.ts
 mode change 100644 => 100755 src/stores/dialog.ts
 mode change 100644 => 100755 src/stores/filters.ts
 mode change 100644 => 100755 src/stores/filtersAction.ts
 mode change 100644 => 100755 src/stores/media.ts
 mode change 100644 => 100755 src/stores/menu.ts
 mode change 100644 => 100755 src/stores/posts.ts
 mode change 100644 => 100755 src/stores/queries.ts
 mode change 100644 => 100755 src/stores/region.ts
 mode change 100644 => 100755 src/stores/totalDuration.ts
 mode change 100644 => 100755 src/stores/totalReport.ts
 mode change 100644 => 100755 src/stores/ulp.ts
 mode change 100644 => 100755 src/stores/up3.ts
 mode change 100644 => 100755 src/stores/user.ts
 mode change 100644 => 100755 src/types/gangguan.ts
 mode change 100644 => 100755 src/types/menu.ts
 mode change 100644 => 100755 src/utils/graphql.ts
 mode change 100644 => 100755 src/utils/icons.ts
 mode change 100644 => 100755 src/utils/network.ts
 mode change 100644 => 100755 src/utils/numbers.ts
 mode change 100644 => 100755 src/utils/route.ts
 mode change 100644 => 100755 src/utils/storage.ts
 mode change 100644 => 100755 src/utils/texts.ts
 mode change 100644 => 100755 src/views/HomeView.vue
 mode change 100644 => 100755 src/views/LoginView.vue
 mode change 100644 => 100755 src/views/NotFoundView.vue
 mode change 100644 => 100755 src/views/TestView.vue
 mode change 100644 => 100755 tailwind.config.js
 mode change 100644 => 100755 tsconfig.app.json
 mode change 100644 => 100755 tsconfig.json
 mode change 100644 => 100755 tsconfig.node.json
 mode change 100644 => 100755 tsconfig.vitest.json
 mode change 100644 => 100755 vercel.json
 mode change 100644 => 100755 vite.config.ts
 mode change 100644 => 100755 vitest.config.ts

diff --git a/.env.development b/.env.development
old mode 100644
new mode 100755
diff --git a/.env.production b/.env.production
old mode 100644
new mode 100755
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
old mode 100644
new mode 100755
diff --git a/.github/workflows/docker-image-development.yml b/.github/workflows/docker-image-development.yml
old mode 100644
new mode 100755
diff --git a/.github/workflows/docker-image-release.yml b/.github/workflows/docker-image-release.yml
old mode 100644
new mode 100755
diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
diff --git a/.prettierrc.json b/.prettierrc.json
old mode 100644
new mode 100755
diff --git a/.tw-patch/tw-class-list.json b/.tw-patch/tw-class-list.json
old mode 100644
new mode 100755
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
old mode 100644
new mode 100755
diff --git a/Dockerfile b/Dockerfile
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/deployment.yaml b/deployment.yaml
old mode 100644
new mode 100755
diff --git a/env.d.ts b/env.d.ts
old mode 100644
new mode 100755
diff --git a/index.html b/index.html
old mode 100644
new mode 100755
diff --git a/nginx.conf b/nginx.conf
old mode 100644
new mode 100755
diff --git a/package-lock.json b/package-lock.json
old mode 100644
new mode 100755
index baae450..d1e3ff7
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "graphql": "^16.8.1",
         "graphql-tag": "^2.12.6",
         "jspdf": "^2.5.1",
+        "nvm": "^0.0.4",
         "pinia": "^2.1.3",
         "qs": "^6.11.2",
         "react": "^18.2.0",
@@ -6905,6 +6906,15 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/nvm": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/nvm/-/nvm-0.0.4.tgz",
+      "integrity": "sha512-jvmyELykYcdyd0VCGY0E8Aqe5MngEasVvlPvrcJHbwBMUbVqa72mPdQuPzyTcykEtEx7jDrMY0QA5MoV+8EhgA==",
+      "deprecated": "This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.",
+      "bin": {
+        "nvm": "bin/nvm"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz",
diff --git a/package.json b/package.json
old mode 100644
new mode 100755
index 81bf18d..5cd537e
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
+    "nvm": "^0.0.4",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
     "react": "^18.2.0",
diff --git a/postcss.config.js b/postcss.config.js
old mode 100644
new mode 100755
diff --git a/public/assets/css/loader.css b/public/assets/css/loader.css
old mode 100644
new mode 100755
diff --git a/public/assets/images/favicon.ico b/public/assets/images/favicon.ico
old mode 100644
new mode 100755
diff --git a/public/assets/images/pln.ico b/public/assets/images/pln.ico
old mode 100644
new mode 100755
diff --git a/src/App.vue b/src/App.vue
old mode 100644
new mode 100755
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
old mode 100644
new mode 100755
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
old mode 100644
new mode 100755
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
old mode 100644
new mode 100755
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
old mode 100644
new mode 100755
diff --git a/src/assets/icons/dot-outline.svg b/src/assets/icons/dot-outline.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/gauge.svg b/src/assets/icons/gauge.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/lightning-slash.svg b/src/assets/icons/lightning-slash.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/monitor.svg b/src/assets/icons/monitor.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/plugs.svg b/src/assets/icons/plugs.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/smiley-sad.svg b/src/assets/icons/smiley-sad.svg
old mode 100644
new mode 100755
diff --git a/src/assets/icons/swap.svg b/src/assets/icons/swap.svg
old mode 100644
new mode 100755
diff --git a/src/assets/images/hero.png b/src/assets/images/hero.png
old mode 100644
new mode 100755
diff --git a/src/assets/images/pln-with-text.png b/src/assets/images/pln-with-text.png
old mode 100644
new mode 100755
diff --git a/src/assets/images/pln.png b/src/assets/images/pln.png
old mode 100644
new mode 100755
diff --git a/src/components/Button.vue b/src/components/Button.vue
old mode 100644
new mode 100755
diff --git a/src/components/Buttons/ButtonDropdown.vue b/src/components/Buttons/ButtonDropdown.vue
old mode 100644
new mode 100755
diff --git a/src/components/Buttons/ButtonPrimary.vue b/src/components/Buttons/ButtonPrimary.vue
old mode 100644
new mode 100755
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
old mode 100644
new mode 100755
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
old mode 100644
new mode 100755
diff --git a/src/components/Dialogs/ActionDialog.vue b/src/components/Dialogs/ActionDialog.vue
old mode 100644
new mode 100755
diff --git a/src/components/Dialogs/DetailDialog.vue b/src/components/Dialogs/DetailDialog.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
old mode 100644
new mode 100755
index f1a85c4..d72c584
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -17,7 +17,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
old mode 100644
new mode 100755
index c892fd5..e9ae3b0
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -20,7 +20,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
old mode 100644
new mode 100755
index ac02e78..24144c8
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -13,14 +13,13 @@ import {
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import InputNumber from '@/components/Form/InputNumber.vue'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const sla = [
   {
@@ -50,7 +49,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
old mode 100644
new mode 100755
index 742b0f2..207f1f2
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -9,13 +9,15 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
   posko: ulp.value,
-  periode: ''
+  periode: '',
+  minDurasiResponseTime: 1,
+  maxDurasiResponseTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value;
@@ -27,7 +29,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
@@ -36,6 +38,40 @@ const setUlp = (value: any) => {
   selectedUlp(value);
   data.value.posko = value;
 };
+const triggerInput = ref(false)
+const sla = [
+  {
+    id: 0,
+    name: 'Durasi Menit'
+  },
+  {
+    id: 1,
+    name: 'Dibawah  / Sesuai SLA (<= 45 menit)'
+  },
+  {
+    id: 2,
+    name: 'Melebihi SLA (> 45 menit)'
+  }
+];
+const changeDuration = (value: any) => {
+  if (value.id === 0) {
+    console.log('Durasi Menit')
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 5
+    triggerInput.value = false
+  } else if (value.id === 1) {
+    data.value.minDurasiResponseTime = 0
+    data.value.maxDurasiResponseTime = 45
+    console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
+    triggerInput.value = true
+  } else {
+    data.value.minDurasiResponseTime = 46
+    data.value.maxDurasiResponseTime = 99999 * 60 * 24
+    triggerInput.value = true
+    console.log('Melebihi SLA (> 45 menit)')
+  }
+
+}
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -90,12 +126,30 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select placeholder="Durasi Menit" />
+      <Select 
+        @update:selected="changeDuration($event)" 
+        :data="sla" 
+        placeholder="Durasi Menit"
+      />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.minDurasiResponseTime =value
+          }
+          "
+        @value="data.minDurasiResponseTime"
+        :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix />
+        <InputWithSuffix 
+          @update:minute-value="
+          (value :any)=> {
+            data.maxDurasiResponseTime = value
+          }
+          "
+        @value="data.maxDurasiResponseTime"
+        :disabled="triggerInput" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
old mode 100644
new mode 100755
index c4ec4df..d495e4b
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -9,7 +9,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -28,7 +28,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
old mode 100644
new mode 100755
index e405774..ebdab50
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -1,27 +1,39 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import { ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
+
 </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">Distribusi/Wilayah:</label>
 
-    <Select placeholder="Semua Distribusi/Wilayah"/>
+    <Select placeholder="Semua Distribusi/Wilayah" />
   </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"
-      >Area:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
 
     <Select placeholder="Semua Area" />
   </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
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
@@ -29,9 +41,9 @@
   <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 @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type15.vue b/src/components/Form/FiltersType/Type15.vue
old mode 100644
new mode 100755
index 5492379..3a99461
--- a/src/components/Form/FiltersType/Type15.vue
+++ b/src/components/Form/FiltersType/Type15.vue
@@ -2,6 +2,21 @@
   import InputWithFilter from '../InputWithFilter.vue'
   import DatePicker from '@/components/DatePicker.vue'
   import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import { ref } from 'vue';
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+  const uppp = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
+const emit = defineEmits(['update:filters'])
+const data = ref({
+  uid: uid.value,
+  up3: uppp.value,
+  posko: ulp.value,
+  periode: '',
+  group: 1
+})
 </script>
 
 <template>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
old mode 100644
new mode 100755
index ad275f9..d314b3f
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -19,7 +19,7 @@ const poskoPlaceholder = 'Semua Posko'
 const mediaPlaceholder = 'Semua Media'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
+const posko = ref({ id: "", name: poskoPlaceholder })
 const media = ref({ id: 0, name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
@@ -44,7 +44,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
old mode 100644
new mode 100755
index 7bf7f2f..d6ad074
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp,fetchRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp,fetchRegional,fetchUid,fetchUidWithRegional, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { onMounted, ref } from 'vue';
 import { getMonthName } from '@/utils/texts';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -13,14 +13,14 @@ const bulanSelected = new Date().getMonth();
 const tahunSelected = new Date().getFullYear();
 const uppp = ref({ id: 0, name: up3Placholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const bulan = ref({ id: bulanSelected, name: bulanPlaceholder });
 const tahun = ref({ id: tahunSelected, name: tahunPlaceholder });
 const regional = ref({ id: 0, name: regionalPlaceholder });
 const emit = defineEmits(['update:filters'])
 // Find index of January
 const bulanIndex = months.findIndex(month => month.id === bulan.value.id);
-
+console.log(bulanSelected)
 // Remove January if found
 if (bulanIndex !== -1) {
   months.splice(bulanIndex, 1);
@@ -42,6 +42,8 @@ const data = ref({
 
 const setRegional = (value: any) => {
   regional.value = value;
+  fetchUid(); 
+  // harusnya fetchUidWithRegional(value);
   selectedUid(value);
   uid.value = { id: 0, name: uidPlaceholder };
   data.value.regional = value;
@@ -57,7 +59,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
old mode 100644
new mode 100755
index 199e63b..8e010bc
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -8,7 +8,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -26,7 +26,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
old mode 100644
new mode 100755
index 8a803f7..a35f1db
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -8,7 +8,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -27,7 +27,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value;
   selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
+  ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
 };
 
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
old mode 100644
new mode 100755
index f1a85c4..d72c584
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -17,7 +17,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
old mode 100644
new mode 100755
index 45a3b76..88945bb
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -10,7 +10,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -30,7 +30,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
old mode 100644
new mode 100755
index 5247344..bc14453
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -12,7 +12,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -31,7 +31,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -53,6 +53,13 @@ const sla = [
   }
 
 ]
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+}
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
@@ -63,7 +70,6 @@ const changeDuration = (value: any) => {
   } else if (value.id === 1) {
     data.value.minTime = 0
     data.value.maxTime = 45
-    console.log(data.value)
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
@@ -72,13 +78,8 @@ const changeDuration = (value: any) => {
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
-  console.log('value', data.value);
-  
 }
 watch(data, (newValue) => {
-  console.log('newValue', newValue.maxTime)
-
   emit('update:filters', newValue)
 })
 onMounted(() => {
@@ -91,32 +92,19 @@ onMounted(() => {
   <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>
 
-    <Select 
-      @update:selected="setUid($event)" 
-      :data="itemsUid" 
-      :placeholder="uidPlaceholder"
-    />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </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>
 
-    <Select 
-      @update:selected="setUp3($event)" 
-      :data="itemsUp3" 
-      :placeholder="up3Placeholder"
-
-    />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </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" 
-      :placeholder="poskoPlaceholder"
-    />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -132,32 +120,12 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select 
-      @update:selected="changeDuration($event)" 
-        
-      :data="sla" placeholder="Durasi Menit" />
+      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
-      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5"  >
-        <InputWithSuffix 
-        :default-value="`${data.minTime} Menit`"
-        :disabled="triggerInput"
-          @update:minuteValue="
-          (value :any)=> {
-            data.minTime =value
-          }
-          "
-         
-       />
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
-        :default-value="`${data.maxTime} Menit`"
-          @update:minuteValue="
-          (value :any)=> {
-            data.maxTime = value
-          }
-          "
-        :disabled="triggerInput"
-            />
+        <InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
old mode 100644
new mode 100755
index d80c165..d79661a
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -16,7 +16,7 @@ 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 posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -39,7 +39,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
old mode 100644
new mode 100755
index 3e7251b..0d86c92
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -19,7 +19,7 @@ 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 posko = ref({ id: "" ,name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -42,7 +42,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/index.ts b/src/components/Form/FiltersType/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
old mode 100644
new mode 100755
index b7fb5f8..a297a19
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -1,4 +1,4 @@
-import { getUid, getUp3, getPosko, getUlp,getUidRegional } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp,getUidRegional, getRegional } from '@/utils/network'
 import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
 import { useUp3Store } from '@/stores/up3'
@@ -38,15 +38,18 @@ const itemsPosko = ref<Item[]>([]);
 const itemsUlp = ref<Item[]>([]);
 const itemsRegional = ref<Item[]>([]);
 const itemsMedia = ref<Item[]>([]);
-const fetchRegional = () => {
-  itemsRegional.value = [
-    { id: "1", name: "Wilayah Sumatera" },
-    { id: "2", name: "Wilayah Jawa Bali" },
-    { id: "3", name: "Wilayah Kalimantan" },
-    { id: "4", name: "Wilayah Sulawesi" },
-    { id: "5", name: "Wilayah Nusa Tenggara" },
-    { id: "6", name: "Wilayah Maluku Papua" },
-  ]
+const fetchRegional =async () => {
+  try {
+  const res = await getRegional()
+    itemsRegional.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama.toUpperCase(),
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 }
 const fetchStatus = (data : any) => {
 
@@ -170,4 +173,4 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchUidWithRegional,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/InputNumber.vue b/src/components/Form/InputNumber.vue
old mode 100644
new mode 100755
index b6b5d08..9d1a44c
--- a/src/components/Form/InputNumber.vue
+++ b/src/components/Form/InputNumber.vue
@@ -22,7 +22,6 @@ const props = defineProps({
 const emit = defineEmits(['update:timeValue'])
 const timeValue = ref(1)
 watch(timeValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:timeValue', newValue)
 })
 
diff --git a/src/components/Form/InputWithFilter.vue b/src/components/Form/InputWithFilter.vue
old mode 100644
new mode 100755
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
old mode 100644
new mode 100755
index fed2b2a..2b9b5c0
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -21,15 +21,10 @@ const props = defineProps({
  
 })
 const emit = defineEmits(['update:menitValue'])
-const menitValue = ref<any>(props.defaultValue)
+const menitValue = ref(props.defaultValue)
 watch(menitValue, (newValue) => {
-  console.log('newValue', newValue)
   emit('update:menitValue', newValue)
 })
-
-watch(() => props.defaultValue, (newValue) => {
-  menitValue.value = newValue
-})
 </script>
 
 <template>
@@ -45,6 +40,7 @@ watch(() => props.defaultValue, (newValue) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
+      :defaultValue="props.defaultValue"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
       onblur="this.value = this.value ? this.value + ' Menit' : ''"
       onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
diff --git a/src/components/Input.vue b/src/components/Input.vue
old mode 100644
new mode 100755
diff --git a/src/components/InputText.vue b/src/components/InputText.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
old mode 100644
new mode 100755
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/Notification.vue b/src/components/Notification/Notification.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/NotificationProvider.vue b/src/components/Notification/NotificationProvider.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/CloseIcon.vue b/src/components/Notification/icons/CloseIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/ErrorIcon.vue b/src/components/Notification/icons/ErrorIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/InfoIcon.vue b/src/components/Notification/icons/InfoIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/SuccessIcon.vue b/src/components/Notification/icons/SuccessIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/WarningIcon.vue b/src/components/Notification/icons/WarningIcon.vue
old mode 100644
new mode 100755
diff --git a/src/components/Notification/icons/index.ts b/src/components/Notification/icons/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/Notification.interface.ts b/src/components/Notification/interfaces/Notification.interface.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/NotificationConfig.interface.ts b/src/components/Notification/interfaces/NotificationConfig.interface.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/NotificationsState.interface.ts b/src/components/Notification/interfaces/NotificationsState.interface.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/interfaces/index.ts b/src/components/Notification/interfaces/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Notification/store/index.ts b/src/components/Notification/store/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
old mode 100644
new mode 100755
index 0cac13c..f18c375
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -101,7 +101,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -111,7 +111,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
old mode 100644
new mode 100755
index efabbcd..1e82b6e
--- a/src/components/Pages/Anomali/Table_62.vue
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -42,6 +42,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
old mode 100644
new mode 100755
index 6f969f5..5d68a22
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -79,6 +79,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
old mode 100644
new mode 100755
index 834db62..0cec0aa
--- a/src/components/Pages/Anomali/Table_64.vue
+++ b/src/components/Pages/Anomali/Table_64.vue
@@ -66,7 +66,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
old mode 100644
new mode 100755
index 7f7768f..3ba0150
--- a/src/components/Pages/Anomali/Table_65.vue
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -87,6 +87,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(true)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
old mode 100644
new mode 100755
index efabbcd..1fb89be
--- a/src/components/Pages/Anomali/Table_66.vue
+++ b/src/components/Pages/Anomali/Table_66.vue
@@ -42,6 +42,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { ref } from 'vue'
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
+const loading = ref(false)
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/index.ts b/src/components/Pages/Anomali/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
old mode 100644
new mode 100755
index 51eea6b..89f6bae
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -34,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -43,7 +49,15 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { Type1 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -78,12 +92,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-1',
-        reportButton: true
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Cico/index.ts b/src/components/Pages/Cico/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
old mode 100644
new mode 100755
index 65a1a3b..a8ed96e
--- a/src/components/Pages/Ctt/Table_67.vue
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+   <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type3 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -56,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -65,7 +71,15 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import Filters from '@/components/Form/Filters.vue'
+import { Type3 } from '@/components/Form/FiltersType'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const dataDetail = ref<any>()
+const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +114,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-3',
-        reportButton: true
-    })
-})
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/index.ts b/src/components/Pages/Ctt/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/EmptyPage.vue b/src/components/Pages/EmptyPage.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
old mode 100644
new mode 100755
index edde852..7153880
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,12 +1,12 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
     <Type1 @update:filters="(value) => {
-        filters = value
-      }
+      filters = value
+    }
       " />
   </Filters>
 
-  <div id="data">
+  <div id="dataTable">
     <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"
@@ -97,7 +97,7 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Tanggal Respon:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_respon" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -111,21 +111,21 @@
         <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" />
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" 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" />
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" 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" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -139,14 +139,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Status:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.status" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" 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" />
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -181,14 +181,14 @@
         <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" />
+        <InputText :readonly="true" :value="dataDetail?.media" 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" />
+        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
       </div>
     </div>
 
@@ -221,7 +221,8 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const position = { of: '#data' }
+import { fetchStatus } from '@/components/Form/FiltersType/reference'
+const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
@@ -293,16 +294,14 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
   }
 `
 const filterData = (params: any) => {
+  const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
-  const posko = params.posko ? params.posko.id : ''
-  const uid = params.uid ? params.uid.id : 0
-  const up3 = params.up3 ? params.up3.id : 0
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko,
-    idUid: uid,
-    idUp3: up3
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -313,6 +312,8 @@ const filterData = (params: any) => {
             ...item,
             pembuat_laporan: '-',
             waktu_lapor: '-',
+            status_akhir: fetchStatus(item.status_akhir),
+            posko: item.posko_asal
           }
         ]
       })
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
old mode 100644
new mode 100755
index e1fb885..470e115
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -188,16 +188,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
old mode 100644
new mode 100755
index 4e7ece9..e450aa5
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -257,15 +257,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
old mode 100644
new mode 100755
index 7171732..0686f3c
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -184,15 +184,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
old mode 100644
new mode 100755
index d3f24e9..dbb2d33
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -186,15 +186,13 @@ query rekapitulasiGangguanPerTanggal(
     })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
old mode 100644
new mode 100755
index 805f843..b764a8e
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -1,10 +1,10 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -145,24 +145,22 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   }
 `
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
 
 
@@ -177,7 +175,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-    
+
 }
 const filters = ref();
 </script>
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
old mode 100644
new mode 100755
index 2c8fc3c..eb4420c
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -120,15 +120,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
 
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
old mode 100644
new mode 100755
index 9ea618f..b818e32
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -271,15 +271,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     const filters = useFiltersStore()
 
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
old mode 100644
new mode 100755
index c4f12f0..e4f02f1
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -201,15 +201,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
old mode 100644
new mode 100755
index f45dab6..2089acc
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -177,15 +177,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 const filterData = (params: any) => {
   
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
old mode 100644
new mode 100755
index 7aca001..826845b
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -150,15 +150,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 const filterData = (params: any) => {
 
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
 
     onResult(queryResult => {
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
old mode 100644
new mode 100755
index af9cb86..c7deac2
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -155,15 +155,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGU
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
old mode 100644
new mode 100755
index 2f727f7..ea4ab88
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -68,6 +68,7 @@ const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
     const { minTime, maxTime, posko, uid, up3 } = params;
+    console.log(params)
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
old mode 100644
new mode 100755
index 5086c33..b3880ab
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -105,15 +105,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
+
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3?.id ? up3.id : 0,
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
old mode 100644
new mode 100755
index 9d4ffb5..f3168e8
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -155,8 +155,8 @@ const filterData = (param: any) => {
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid,
-        idUp3: up3,
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
old mode 100644
new mode 100755
index efdc5b8..cac2c04
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -240,15 +240,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
+
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/index.ts b/src/components/Pages/Gangguan/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/HomeEmpty.vue b/src/components/Pages/HomeEmpty.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
old mode 100644
new mode 100755
index f7b69a7..f4f0a12
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -81,7 +81,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -164,16 +167,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPI
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
old mode 100644
new mode 100755
index 01388bb..42b5a58
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -84,7 +84,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -170,9 +173,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
     const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
     refetch({
@@ -180,10 +181,9 @@ const filterData = (params: any) => {
         maxJmlLapor: maxJmlLapor,
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
old mode 100644
new mode 100755
index e8a6eda..a62a677
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -80,7 +80,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -163,9 +166,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
     const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
     refetch({
@@ -173,10 +174,9 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiResponseTime: minDurasiResponseTime,
         maxDurasiResponseTime: maxDurasiResponseTime,
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
old mode 100644
new mode 100755
index e749520..72f20c3
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -82,7 +82,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -167,9 +170,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
     const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
     refetch({
@@ -177,10 +178,9 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiRecoveryTime: minDurasiRecoveryTime,
         maxDurasiRecoveryTime: maxDurasiRecoveryTime,
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanRecoveryTime
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
old mode 100644
new mode 100755
index a333140..9881a3c
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -84,7 +84,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -163,16 +166,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
old mode 100644
new mode 100755
index ad45849..16a0128
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -80,7 +80,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -161,16 +164,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
old mode 100644
new mode 100755
index a4fbce7..4def93a
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -14,8 +14,8 @@
             <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" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
@@ -58,7 +58,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -78,7 +77,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' };
+const showIndicator = ref(true);
+const shading = ref(true);
+const showPane = ref(true);
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -149,7 +151,7 @@ const GET_DATA = gql`
         }
 `
 
-const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: '',
@@ -161,16 +163,14 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     const media = params.media ? params.media.id : ''
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3,
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
         media: media
     })
 
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
old mode 100644
new mode 100755
index c6ca6de..f7f4c5d
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -62,7 +62,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -176,16 +175,13 @@ query rekapitulasiKeluhanAll
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
old mode 100644
new mode 100755
index b3ab454..bf4f5f1
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -144,14 +144,14 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-  query rekapitulasiKeluhanPerFungsiBidang(
+  query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiKeluhanPerFungsiBidang(
+    rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -190,21 +190,18 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiKeluhanPerFungsiBidang
+            data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
 
         }
         console.log(queryResult.data)
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
old mode 100644
new mode 100755
index 00a70a0..9ea8f91
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -93,7 +93,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -181,16 +184,13 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult(queryResult => {
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
old mode 100644
new mode 100755
index a6c5bff..5b2d706
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -83,8 +83,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type13 from '@/components/Form/FiltersType/Type13.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -94,7 +93,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -182,16 +184,13 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+      const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id :0,
+        idUp3: up3? up3.id:0})
 
 
     onResult(queryResult => {
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
old mode 100644
new mode 100755
index 77bbe03..cf80430
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -1,205 +1,78 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type13 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type13 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)]"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :data-source="data"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :data-source="data" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-        caption="NO"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="tanggal"
-        caption="Tanggal Lapor"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field=""
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Total"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -229,7 +102,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -306,7 +182,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -317,19 +193,17 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
-    
+
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
 
@@ -341,5 +215,5 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
- }
+}
 </script>
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
old mode 100644
new mode 100755
index f423b65..ff4d8fa
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,10 +1,10 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type8 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type8 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
     <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
       :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -13,7 +13,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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" />
@@ -42,36 +42,36 @@
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
             css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
             css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-            css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
     </DxDataGrid>
@@ -101,7 +101,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -178,7 +181,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -189,21 +192,19 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanPerUnit
-     
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -212,6 +213,6 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
-  
+
 }
 </script>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
old mode 100644
new mode 100755
index 97afa3f..5ba92df
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -1,19 +1,19 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => {
+      filters = value
+    }
+      " />
+  </Filters>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-      :word-wrap-enabled="true">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-         <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+      <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" />
@@ -23,8 +23,8 @@
         caption="NO" css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-                    :caption="i" css-class="custom-table-column" />
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number" :caption="i"
+          css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -33,8 +33,8 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -53,7 +53,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -139,7 +142,7 @@ const GET_DATA = gql`
     }
   }
 `
-const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
@@ -150,21 +153,19 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
-    })
+  const { posko, uid, up3 } = params
+  refetch({
+    dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : "",
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
-  
+
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
old mode 100644
new mode 100755
index be1f318..af36afa
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -1,28 +1,30 @@
 <template>
-<Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type8 @update:filters="(value) => {
             filters = value
         }
             " />
     </Filters>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
             <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 :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit"
+                css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -84,7 +86,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -157,34 +162,32 @@ query rekapitulasiKeluhanRatingPerUnit
         total 
         }
 }`;
-const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const posko = params.posko ? params.posko.id : ''
-    const uid = params.uid ? params.uid.id : 0
-    const up3 = params.up3 ? params.up3.id : 0
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
 
-    
+
 
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit;
-          
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -193,6 +196,6 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-  
+
 }
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Keluhan/index.ts b/src/components/Pages/Keluhan/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
old mode 100644
new mode 100755
index d88d8a4..83ae7da
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type14 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -36,16 +42,19 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
-
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-14'
-    })
-})
+import Filters from '@/components/Form/Filters.vue';
+import { Type14 } from '@/components/Form/FiltersType';
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
+const filters = ref()
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
old mode 100644
new mode 100755
index 6cabde2..c78aa91
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -31,10 +31,15 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const loading = ref(false)
 
 onMounted(() => {
     const filters = useFiltersStore()
diff --git a/src/components/Pages/Material/index.ts b/src/components/Pages/Material/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
old mode 100644
new mode 100755
index add6a38..ab0b4d0
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -150,11 +150,11 @@ const filterData = (params: any) => {
     tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid  ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : bulanSekarang.value,
-        tahun: bulan ? tahun : tahunSekarang.value
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : bulanSekarang.value,
+        tahun: bulan ? tahun.id : tahunSekarang.value
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_37.vue b/src/components/Pages/Monalisa/Table_37.vue
old mode 100644
new mode 100755
index 2bb02ba..5bce029
--- a/src/components/Pages/Monalisa/Table_37.vue
+++ b/src/components/Pages/Monalisa/Table_37.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -77,6 +77,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -142,14 +143,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTime
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
old mode 100644
new mode 100755
index c9d5cf2..4897ef5
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -55,12 +55,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -69,9 +69,9 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
-const monalisaRecoveryTimeKeluhan = gql`
-  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
-    monalisaRecoveryTimeKeluhan(
+const monalisaRecoveryTimeGangguan = gql`
+  query DaftarmonalisaRecoveryTimeGangguan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeGangguan(
       regional:$regional
       posko: $posko
       idUid: $idUid
@@ -89,7 +89,7 @@ const monalisaRecoveryTimeKeluhan = gql`
     }
   }
 `;
-const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
     regional: "",
     posko: "",
     idUid: 0,
@@ -100,18 +100,20 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKel
 const filterData = (params: any) => {
 
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+            queryResult.data.monalisaRecoveryTimeGangguan.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
                 }];
diff --git a/src/components/Pages/Monalisa/Table_39.vue b/src/components/Pages/Monalisa/Table_39.vue
old mode 100644
new mode 100755
index 9001c0c..3112c2d
--- a/src/components/Pages/Monalisa/Table_39.vue
+++ b/src/components/Pages/Monalisa/Table_39.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -65,11 +65,11 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_40.vue b/src/components/Pages/Monalisa/Table_40.vue
old mode 100644
new mode 100755
index dce4030..a6895b6
--- a/src/components/Pages/Monalisa/Table_40.vue
+++ b/src/components/Pages/Monalisa/Table_40.vue
@@ -100,10 +100,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -159,11 +158,11 @@ const filterData = (params: any) => {
 
   refetch({
     regional: regional,
-    posko: posko,
-    idUid: idUid ? idUid : 0,
-    idUp3: idUp3 ? idUp3 : 0,
-    bulan: bulan ? bulan : 10,
-    tahun: bulan ? tahun : 2023
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_41.vue b/src/components/Pages/Monalisa/Table_41.vue
old mode 100644
new mode 100755
index 18aa714..ae0f56a
--- a/src/components/Pages/Monalisa/Table_41.vue
+++ b/src/components/Pages/Monalisa/Table_41.vue
@@ -54,10 +54,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -104,11 +103,11 @@ const filterData = (params: any) => {
 
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_42.vue b/src/components/Pages/Monalisa/Table_42.vue
old mode 100644
new mode 100755
index 39a520a..ab378ab
--- a/src/components/Pages/Monalisa/Table_42.vue
+++ b/src/components/Pages/Monalisa/Table_42.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
 })
 const filterData = (params: any) => {
     const { regional, posko, idUid, idUp3, bulan, tahun } = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_43.vue b/src/components/Pages/Monalisa/Table_43.vue
old mode 100644
new mode 100755
index e98abe6..9191d4b
--- a/src/components/Pages/Monalisa/Table_43.vue
+++ b/src/components/Pages/Monalisa/Table_43.vue
@@ -24,17 +24,17 @@
             <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
-                        caption="Des 2018" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
-                        caption="Des 2019" css-class="custom-table-column" />
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
-                        caption="s.d Jan 2018" css-class="custom-table-column" />
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
-                        caption="Jan 2019" css-class="custom-table-column" />
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -64,12 +64,12 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -114,14 +114,16 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
 })
 const filterData = (params: any) => {
     const {regional, posko, idUid, idUp3, bulan, tahun} = params;
-
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
         regional: regional,
-        posko: posko,
-        idUid: idUid  ? idUid : 0,
-        idUp3: idUp3 ? idUp3 : 0,
-        bulan: bulan ? bulan : 10,
-        tahun: bulan ? tahun : 2023
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
old mode 100644
new mode 100755
index 409f104..50e9db6
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -12,19 +12,19 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxDataGrid>
@@ -34,8 +34,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {ref} from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -52,10 +51,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 const position = { of: '#data' }
@@ -82,35 +80,34 @@ const monalisaGangguanBelumSelesai = gql`
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_bulan
-      jumlah_bulan_n_1
-      jumlah_tahun
-      jumlah_tahun_n_1
-      nama_posko
-      persen_bulan
-      persen_tahun
+        gangguan
+informasi
+nama_posko
+total
     }
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
-    bulan: 10,
-    tahun: 2023,
+
     regional: '',
     posko: '',
     idUid: 0,
-    idUp3: 0
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
 })
 const filterData = (params: any) => {
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
-    const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
-    const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
     refetch({
-        bulan: 10,
-        tahun: 2023,
-        regional: '',
-        posko: posko,
-        idUid: uid,
-        idUp3: up3
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Table_45.vue b/src/components/Pages/Monalisa/Table_45.vue
old mode 100644
new mode 100755
index b1cd80a..18d29cb
--- a/src/components/Pages/Monalisa/Table_45.vue
+++ b/src/components/Pages/Monalisa/Table_45.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${ getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -54,7 +54,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+const data = ref<any[]>([])
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -84,12 +91,77 @@ const onExporting = (e: any) => {
     }
 }
 
+
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
+const MONALISAJUMLAHKALIKELUHAN = gql`
+  query DaftarMonalisaJumlahKaliKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahKaliKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: bulanSekarang.value,
+    tahun: tahunSekarang.value
+})
+
+const filterData = (params: any) => {
+    const {regional, posko, idUid, idUp3, bulan, tahun} = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid  ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : bulanSekarang.value,
+        tahun: bulan ? tahun.id : tahunSekarang.value
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            data.value = queryResult.data.monalisaJumlahKaliKeluhan;
+        }
+        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]
     console.log(data)
 }
-const filterData = (params: any) => {
-    console.log(params)
-}
-const filters = ref()
+onMounted(() => {
+    console.log(bulanSekarang.value)
+});
+const filters= ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_46.vue b/src/components/Pages/Monalisa/Table_46.vue
old mode 100644
new mode 100755
index 45217a5..f0db8f0
--- a/src/components/Pages/Monalisa/Table_46.vue
+++ b/src/components/Pages/Monalisa/Table_46.vue
@@ -6,34 +6,35 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -46,7 +47,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -54,14 +54,19 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -90,14 +95,77 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
+const monalisaDispatchingTimeKeluhan = gql`
+  query DaftarmonalisaDispatchingTimeKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaDispatchingTimeKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        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]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
-}
+
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
old mode 100644
new mode 100755
index 10e38cf..531c236
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -53,6 +53,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +63,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -89,14 +94,69 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
+const monalisaRecoveryTimeKeluhan = gql`
+  query DaftarmonalisaRecoveryTimeKeluhan($regional:regional, $posko: String, $idUid: Int, $idUp3: Int,$bulan: Int, $tahun: Int) {
+    monalisaRecoveryTimeKeluhan(
+      regional:$regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        jumlah_bulan
+        jumlah_bulan_n_1
+        jumlah_tahun
+        jumlah_tahun_n_1
+        nama_posko
+        persen_bulan
+        persen_tahun
+    }
+  }
+`;
+const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
+    regional: "",
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023,
+})
+const filterData = (params: any) => {
+
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult(queryResult => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRecoveryTimeKeluhan.forEach((item: any) => {
+                data.value = [...data.value, {
+                    ...item,
+                }];
+            });
+        }
+        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]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
-}
+
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
old mode 100644
new mode 100755
index d6320e7..724976a
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -26,11 +26,11 @@
                         <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -38,11 +38,11 @@
                         <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -52,11 +52,11 @@
                         <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RPT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -64,11 +64,11 @@
                         <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="Jumlah Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
-                    <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn alignment="center" caption="RCT Keluhan" css-class="custom-table-column">
                         <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field=""
                             css-class="custom-table-column" />
                     </DxColumn>
@@ -89,6 +89,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -96,7 +98,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -130,9 +132,77 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaJumlahDurasiRptRctKeluhan = gql`
+  query DaftarmonalisaJumlahDurasiRptRctKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaJumlahDurasiRptRctKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_keluhan_rct_bulan
+      jumlah_keluhan_rct_sampai_bulan
+      jumlah_keluhan_rpt_bulan
+      jumlah_keluhan_rpt_sampai_bulan
+      nama_posko
+      rct_keluhan_bulan
+      rct_keluhan_sampai_bulan
+      rpt_keluhan_bulan
+      rpt_keluhan_sampai_bulan
+      total_rct_bulan
+      total_rct_sampai_bulan
+      total_rpt_bulan
+      total_rpt_sampai_bulan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctKeluhan, {
+  bulan: 10,
+  tahun: 2023,
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaJumlahDurasiRptRctKeluhan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+onError((error) => {
+  console.log(error)
+})
 }
+
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_49.vue b/src/components/Pages/Monalisa/Table_49.vue
old mode 100644
new mode 100755
index 4eca558..a032329
--- a/src/components/Pages/Monalisa/Table_49.vue
+++ b/src/components/Pages/Monalisa/Table_49.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
@@ -18,11 +18,11 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="50" alignment="center" data-field="" caption="NO" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="ID Keluhan" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="" caption="Jenis Keluhan" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Jumlah" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="" caption="%" css-class="custom-table-column" />
+            <DxColumn :width="50" alignment="center"  :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"  caption="NO" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="id_keluhan" caption="ID Keluhan" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="jenis_keluhan" caption="Jenis Keluhan" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
+            <DxColumn :width="120" alignment="center" data-field="persen_keluhan" caption="%" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -39,6 +39,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -46,7 +48,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -80,9 +82,67 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaKeluhanPerJenisKeluhan = gql`
+  query DaftarmonalisaKeluhanPerJenisKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaKeluhanPerJenisKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      id_keluhan
+      jumlah
+      persen_keluhan
+      tipe_permasalahan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaKeluhanPerJenisKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaKeluhanPerJenisKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
old mode 100644
new mode 100755
index 77c4ea7..481352b
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -22,18 +22,18 @@
             <DxColumn :width="200" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number" caption="Des 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number" caption="Des 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+                        :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-                       <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number" caption="s.d Jan 2018"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number" caption="Jan 2019"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+                        :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
                     <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
@@ -53,6 +53,9 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +63,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +99,72 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaRekapitulasiLaporUlangKeluhan = gql`
+  query DaftarmonalisaRekapitulasiLaporUlangKeluhan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiLaporUlangKeluhan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      jumlah_bulan
+      jumlah_bulan_n_1
+      jumlah_tahun
+      jumlah_tahun_n_1
+      nama_posko
+      persen_bulan
+      persen_tahun
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangKeluhan, {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+})
+const filterData = (params: any) => {
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params;
+    bulanSekarang.value = bulan.id;
+    tahunSekarang.value = tahun.id;
+    tahunLalu.value = tahun.id - 1;
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.monalisaRekapitulasiLaporUlangKeluhan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_51.vue b/src/components/Pages/Monalisa/Table_51.vue
old mode 100644
new mode 100755
index 76c12da..694f9d6
--- a/src/components/Pages/Monalisa/Table_51.vue
+++ b/src/components/Pages/Monalisa/Table_51.vue
@@ -1,34 +1,82 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type2 @update:filters="(value) => {
-            filters = value
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type2
+      @update:filters="
+        (value) => {
+          filters = value
         }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" 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" />
-            <DxColumnFixing :enabled="true" />
+      "
+    />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" 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"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="keluhan"
+          data-type="number"
+          caption="Keluhan"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,12 +84,23 @@ import { ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -49,43 +108,100 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(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 onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const monalisaRekapitulasiKeluhanBelumSelesai = gql`
+  query DaftarmonalisaRekapitulasiKeluhanBelumSelesai(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    monalisaRekapitulasiKeluhanBelumSelesai(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+      keluhan
+      informasi
+      nama_posko
+      total
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiKeluhanBelumSelesai, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.monalisaRekapitulasiKeluhanBelumSelesai.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
old mode 100644
new mode 100755
index 331b5f7..cbfde2e
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -60,6 +60,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/Monalisa/index.ts b/src/components/Pages/Monalisa/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
old mode 100644
new mode 100755
index 2af40d5..4c4edbe
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type15 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
@@ -37,10 +43,11 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted,ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { Type15 } from '@/components/Form/FiltersType';
+import Filters from '@/components/Form/Filters.vue';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -49,11 +56,10 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const loading = ref(false)
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-15'
-    })
-})
+const filters = ref();
+const filterData = async (filters: any) => {
+    loading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    loading.value = false
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/PencarianData/index.ts b/src/components/Pages/PencarianData/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Transaksi/Table_70.vue b/src/components/Pages/Transaksi/Table_70.vue
old mode 100644
new mode 100755
index 2a10496..6bb89a8
--- a/src/components/Pages/Transaksi/Table_70.vue
+++ b/src/components/Pages/Transaksi/Table_70.vue
@@ -1,5 +1,11 @@
 <template>
-    <div>
+     <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type17 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
@@ -41,6 +47,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { Type17 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -139,11 +147,8 @@ const data = [
     }
 ]
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-17'
-    })
-})
+const filters = ref();
+const filterData = (filters: any) => {
+    console.log(filters)
+}
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Transaksi/index.ts b/src/components/Pages/Transaksi/index.ts
old mode 100644
new mode 100755
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
old mode 100644
new mode 100755
diff --git a/src/components/PictureInitial.vue b/src/components/PictureInitial.vue
old mode 100644
new mode 100755
diff --git a/src/components/Select.vue b/src/components/Select.vue
old mode 100644
new mode 100755
diff --git a/src/components/SelectMulti.vue b/src/components/SelectMulti.vue
old mode 100644
new mode 100755
diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconBars3.vue b/src/components/icons/IconBars3.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconBox.vue b/src/components/icons/IconBox.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconDatabase.vue b/src/components/icons/IconDatabase.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconDotOutline.vue b/src/components/icons/IconDotOutline.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconFileSearch.vue b/src/components/icons/IconFileSearch.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconFileX.vue b/src/components/icons/IconFileX.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconFilter.vue b/src/components/icons/IconFilter.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconGauge.vue b/src/components/icons/IconGauge.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconLightningSlash.vue b/src/components/icons/IconLightningSlash.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconLinkBreak.vue b/src/components/icons/IconLinkBreak.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconLockKey.vue b/src/components/icons/IconLockKey.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconMonitor.vue b/src/components/icons/IconMonitor.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconNetworkChange.vue b/src/components/icons/IconNetworkChange.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconNetworkDisconnected.vue b/src/components/icons/IconNetworkDisconnected.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconPlugs.vue b/src/components/icons/IconPlugs.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconSmileySad.vue b/src/components/icons/IconSmileySad.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconSwap.vue b/src/components/icons/IconSwap.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
old mode 100644
new mode 100755
diff --git a/src/components/icons/IconWallet.vue b/src/components/icons/IconWallet.vue
old mode 100644
new mode 100755
diff --git a/src/main.ts b/src/main.ts
old mode 100644
new mode 100755
diff --git a/src/router/index.ts b/src/router/index.ts
old mode 100644
new mode 100755
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
old mode 100644
new mode 100755
diff --git a/src/stores/command.ts b/src/stores/command.ts
old mode 100644
new mode 100755
diff --git a/src/stores/date.ts b/src/stores/date.ts
old mode 100644
new mode 100755
diff --git a/src/stores/dialog.ts b/src/stores/dialog.ts
old mode 100644
new mode 100755
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
old mode 100644
new mode 100755
diff --git a/src/stores/filtersAction.ts b/src/stores/filtersAction.ts
old mode 100644
new mode 100755
diff --git a/src/stores/media.ts b/src/stores/media.ts
old mode 100644
new mode 100755
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
old mode 100644
new mode 100755
diff --git a/src/stores/posts.ts b/src/stores/posts.ts
old mode 100644
new mode 100755
diff --git a/src/stores/queries.ts b/src/stores/queries.ts
old mode 100644
new mode 100755
diff --git a/src/stores/region.ts b/src/stores/region.ts
old mode 100644
new mode 100755
diff --git a/src/stores/totalDuration.ts b/src/stores/totalDuration.ts
old mode 100644
new mode 100755
diff --git a/src/stores/totalReport.ts b/src/stores/totalReport.ts
old mode 100644
new mode 100755
diff --git a/src/stores/ulp.ts b/src/stores/ulp.ts
old mode 100644
new mode 100755
diff --git a/src/stores/up3.ts b/src/stores/up3.ts
old mode 100644
new mode 100755
diff --git a/src/stores/user.ts b/src/stores/user.ts
old mode 100644
new mode 100755
diff --git a/src/types/gangguan.ts b/src/types/gangguan.ts
old mode 100644
new mode 100755
diff --git a/src/types/menu.ts b/src/types/menu.ts
old mode 100644
new mode 100755
diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
old mode 100644
new mode 100755
index 70a926a..c0ec287
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -3,7 +3,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core
 export const apolloClient = () => {
 
   const httpLink =  createHttpLink({
-    uri: 'http://10.8.0.13:8080/graphql',
+    uri: 'http://10.8.0.13:32169/graphql',
     credentials: 'include', // Include credentials for cross-origin requests
   });
 
diff --git a/src/utils/icons.ts b/src/utils/icons.ts
old mode 100644
new mode 100755
diff --git a/src/utils/network.ts b/src/utils/network.ts
old mode 100644
new mode 100755
index 9f1783f..3176707
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -6,9 +6,10 @@ const instance = axios.create({
 
 const getUid = async () => await instance.get('/uid')
 const getUidRegional = async (regional: number) => await instance.get('/uid?regional=' + regional)
+const getRegional = async () => await instance.get('/regional')
 const getMedia = async () => await instance.get('/media')
 const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional}
+export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional,getRegional}
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
old mode 100644
new mode 100755
diff --git a/src/utils/route.ts b/src/utils/route.ts
old mode 100644
new mode 100755
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
old mode 100644
new mode 100755
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
old mode 100644
new mode 100755
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
old mode 100644
new mode 100755
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
old mode 100644
new mode 100755
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
old mode 100644
new mode 100755
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
old mode 100644
new mode 100755
diff --git a/tailwind.config.js b/tailwind.config.js
old mode 100644
new mode 100755
diff --git a/tsconfig.app.json b/tsconfig.app.json
old mode 100644
new mode 100755
diff --git a/tsconfig.json b/tsconfig.json
old mode 100644
new mode 100755
diff --git a/tsconfig.node.json b/tsconfig.node.json
old mode 100644
new mode 100755
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
old mode 100644
new mode 100755
diff --git a/vercel.json b/vercel.json
old mode 100644
new mode 100755
diff --git a/vite.config.ts b/vite.config.ts
old mode 100644
new mode 100755
diff --git a/vitest.config.ts b/vitest.config.ts
old mode 100644
new mode 100755

From 2d877d997a920077c3070aac18958eb47f314cd2 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 19 Feb 2024 12:10:06 +0700
Subject: [PATCH 13/17] Update network URL and data source in Table components

---
 src/components/Form/FiltersType/Type1.vue  | 12 ++++++------
 src/components/Pages/Monalisa/Table_44.vue |  2 +-
 src/components/Pages/Monalisa/Table_47.vue |  2 +-
 src/components/Pages/Monalisa/Table_48.vue |  2 +-
 src/components/Pages/Monalisa/Table_50.vue |  2 +-
 src/utils/network.ts                       |  5 +++--
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index d72c584..6e171ff 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -13,15 +13,15 @@ import {
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-const uppp = ref({ id: 0, name: uppPlaceholder })
+const up3 = ref({ id: 0, name: up3laceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: "", name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: posko.value,
   periode: ''
 })
@@ -33,12 +33,12 @@ watch(data.value, (value) => {
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: uppPlaceholder }
+  up3.value = { id: 0, name: up3laceholder }
   data.value.uid = value
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  up3.value = value
   selectedUp3Posko(value)
   posko.value = { id: "", name: poskoPlaceholder }
   data.value.up3 = value
@@ -70,7 +70,7 @@ onMounted(() => {
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Pages/Monalisa/Table_44.vue b/src/components/Pages/Monalisa/Table_44.vue
index 50e9db6..f6b3d90 100755
--- a/src/components/Pages/Monalisa/Table_44.vue
+++ b/src/components/Pages/Monalisa/Table_44.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index 531c236..68a4d82 100755
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
diff --git a/src/components/Pages/Monalisa/Table_48.vue b/src/components/Pages/Monalisa/Table_48.vue
index 724976a..15558cd 100755
--- a/src/components/Pages/Monalisa/Table_48.vue
+++ b/src/components/Pages/Monalisa/Table_48.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
diff --git a/src/components/Pages/Monalisa/Table_50.vue b/src/components/Pages/Monalisa/Table_50.vue
index 481352b..eb6f1b1 100755
--- a/src/components/Pages/Monalisa/Table_50.vue
+++ b/src/components/Pages/Monalisa/Table_50.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
diff --git a/src/utils/network.ts b/src/utils/network.ts
index 47dc6df..b0ae1e7 100755
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -1,7 +1,8 @@
 import axios from 'axios'
-
+const url = 'http://10.8.0.13:32180'
 const instance = axios.create({
-  baseURL: 'http://192.168.1.84/:32180'
+  // baseURL: 'http://192.168.1.84:32180'
+  baseURL: url
 })
 
 const getUid = async () => await instance.get('/uid')

From 2758481259c7a78510f9331a6ddeffff679f4b74 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Mon, 19 Feb 2024 13:49:49 +0700
Subject: [PATCH 14/17] Update loading visibility in Table components

---
 src/components/Pages/Gangguan/Table_10.vue |  24 ++--
 src/components/Pages/Gangguan/Table_11.vue |  13 +-
 src/components/Pages/Gangguan/Table_12.vue | 100 +++++++-------
 src/components/Pages/Gangguan/Table_13.vue |   5 +-
 src/components/Pages/Gangguan/Table_14.vue |   4 +-
 src/components/Pages/Gangguan/Table_15.vue |   4 +-
 src/components/Pages/Gangguan/Table_16.vue |   4 +-
 src/components/Pages/Gangguan/Table_17.vue |   4 +-
 src/components/Pages/Gangguan/Table_18.vue |   4 +-
 src/components/Pages/Gangguan/Table_19.vue |   4 +-
 src/components/Pages/Gangguan/Table_20.vue |   4 +-
 src/components/Pages/Gangguan/Table_3.vue  |   2 +-
 src/components/Pages/Gangguan/Table_4.vue  |   2 +-
 src/components/Pages/Gangguan/Table_5.vue  |   2 +-
 src/components/Pages/Gangguan/Table_6.vue  |   2 +-
 src/components/Pages/Gangguan/Table_7.vue  |   2 +-
 src/components/Pages/Gangguan/Table_8.vue  |   6 +-
 src/components/Pages/Gangguan/Table_9.vue  |  16 +--
 src/components/Pages/Monalisa/Table_52.vue | 130 ++++++++++++++----
 src/components/Pages/Monalisa/Table_53.vue |  93 ++++++++++---
 src/components/Pages/Monalisa/Table_54.vue |  83 ++++++++++--
 src/components/Pages/Monalisa/Table_55.vue |  83 ++++++++++--
 src/components/Pages/Monalisa/Table_56.vue | 147 ++++++++++++++-------
 src/components/Pages/Monalisa/Table_57.vue |  91 +++++++++++--
 src/components/Pages/Monalisa/Table_58.vue |  84 ++++++++++--
 src/components/Pages/Monalisa/Table_59.vue |  86 ++++++++++--
 26 files changed, 747 insertions(+), 252 deletions(-)

diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 470e115..4762d32 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -1,11 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div>
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -15,8 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                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" />
             <DxColumnFixing :enabled="true" />
@@ -188,13 +187,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUA
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
 
@@ -213,6 +213,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const filters= ref();
+const filters = ref();
 
 </script>
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index e450aa5..944e1d7 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -15,8 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
-
+                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" />
             <DxColumnFixing :enabled="true" />
@@ -248,7 +247,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
     posko: "",
@@ -257,13 +256,13 @@ const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 0686f3c..91c8a56 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -1,31 +1,31 @@
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type9 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type9 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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" />
             <DxColumnFixing :enabled="true" />
 
-             <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 :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu" css-class="custom-table-column" />
+            <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 :width="120" alignment="center" data-field="kode_regu" caption="Kode"
+                css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -46,36 +46,36 @@
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -85,7 +85,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
-import { onMounted ,ref} from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
@@ -175,22 +175,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
-        idUid: 0,
-        idUp3: 0,
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: "",
+    idUid: 0,
+    idUp3: 0,
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -203,7 +203,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-   
+
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index dbb2d33..972c5ee 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -13,8 +13,9 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index b764a8e..999e050 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index eb4420c..8a0c7f1 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index b818e32..af32f15 100755
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index e4f02f1..9b644a2 100755
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 2089acc..bb9a442 100755
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index 826845b..be56138 100755
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index c7deac2..d92efe5 100755
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -13,8 +13,8 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index ea4ab88..b4f672d 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -14,7 +14,7 @@
             <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" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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="50" alignment="center"
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 2871a26..42c5dc2 100755
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -14,7 +14,7 @@
             <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" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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="50" alignment="center"
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index fb323a9..aaffbd3 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -14,7 +14,7 @@
             <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" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+            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="50" alignment="center"
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index a5a2671..a06674a 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -14,7 +14,7 @@
             <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" />
             <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true"/>
+            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="50" alignment="center"
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index b3880ab..7a93e1f 100755
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -14,7 +14,7 @@
             <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" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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="50" alignment="center"
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index f3168e8..18cdddd 100755
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -15,7 +15,7 @@
             <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" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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="50" alignment="center"
@@ -155,8 +155,8 @@ const filterData = (param: any) => {
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index cac2c04..8700621 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,11 +1,11 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type1 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
             :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
@@ -15,7 +15,7 @@
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-model:visible.sync="loading" :enabled="true" />
+                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" />
             <DxColumnFixing :enabled="true" />
@@ -306,5 +306,5 @@ const filterData = (params: any) => {
     })
 }
 
-const filters= ref();
+const filters = ref();
 </script>
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index 6db98bc..d84877f 100755
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -19,18 +19,18 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -39,21 +39,21 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
                     data-type="number" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -62,25 +62,25 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field=""
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
                     data-type="number" />
             </DxColumn>
             <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
                     css-class="custom-table-column" />
             </DxColumn>
 
@@ -99,6 +99,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -106,7 +108,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -135,14 +136,87 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const penurunanJumlahKomplainBulanan = gql`
+  query DaftarpenurunanJumlahKomplainBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        delta_penurunan_gangguan
+        delta_penurunan_informasi
+        delta_penurunan_keluhan
+        gangguan_bulan_ini
+        gangguan_bulan_lalu
+        informasi_gangguan_bulan_ini
+        informasi_gangguan_bulan_lalu
+        informasi_keluhan_bulan_ini
+        informasi_keluhan_bulan_lalu
+        keluhan_bulan_ini
+        keluhan_bulan_lalu
+        nama_posko
+        persen_penurunan_gangguan
+        persen_penurunan_informasi
+        persen_penurunan_keluhan
+        persen_penurunan_total
+        total_bulan_ini
+        total_bulan_lalu
+        total_komplain_bulan_ini
+        total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index 680806e..b858457 100755
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -20,30 +20,30 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Feb 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -62,6 +62,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -69,7 +71,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -100,12 +101,74 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintBulanan = gql`
+  query DaftaragingComplaintBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        aging_komplain_gangguan
+        aging_komplain_keluhan
+        nama_posko
+        persen_rata_aging_komplain
+        rata_rct_gangguan_bulan
+        rata_rct_gangguan_sla
+        rata_rct_keluhan_bulan
+        rata_rct_keluhan_sla
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_54.vue b/src/components/Pages/Monalisa/Table_54.vue
index cc689e9..c9d45a9 100755
--- a/src/components/Pages/Monalisa/Table_54.vue
+++ b/src/components/Pages/Monalisa/Table_54.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -20,20 +20,20 @@
             <DxColumnFixing :enabled="true" />
 
             <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -51,6 +51,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -58,7 +60,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -92,9 +93,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintBulanan = gql`
+  query DaftaragingComplaintBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        ens_bencana_alam
+ens_terencana
+ens_tidak_terencana
+kpi_ens
+nama_posko
+total
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_55.vue b/src/components/Pages/Monalisa/Table_55.vue
index d980bee..c55c72a 100755
--- a/src/components/Pages/Monalisa/Table_55.vue
+++ b/src/components/Pages/Monalisa/Table_55.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
@@ -19,23 +19,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :min-width="250" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -53,6 +53,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -60,7 +62,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +95,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_56.vue b/src/components/Pages/Monalisa/Table_56.vue
index 8a70cc3..e8788f2 100755
--- a/src/components/Pages/Monalisa/Table_56.vue
+++ b/src/components/Pages/Monalisa/Table_56.vue
@@ -18,58 +18,32 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
-
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="s.d Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+            </DxColumn>
+            <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
+                <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="s.d Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
+                <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Komplain"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="% Total"
+            </DxColumn>
+            <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
+                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
+                css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
@@ -86,6 +60,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -93,7 +69,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -124,12 +99,86 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const penurunanJumlahKomplainKumulatif = gql`
+  query DaftarpenurunanJumlahKomplainKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    penurunanJumlahKomplainKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        delta_penurunan_gangguan
+        delta_penurunan_informasi
+        delta_penurunan_keluhan
+        gangguan_bulan_ini
+        gangguan_bulan_lalu
+        informasi_gangguan_bulan_ini
+        informasi_gangguan_bulan_lalu
+        informasi_keluhan_bulan_ini
+        informasi_keluhan_bulan_lalu
+        keluhan_bulan_ini
+        keluhan_bulan_lalu
+        nama_posko
+        persen_penurunan_gangguan
+        persen_penurunan_informasi
+        persen_penurunan_keluhan
+        persen_penurunan_total
+        total_bulan_ini
+        total_bulan_lalu
+        total_komplain_bulan_ini
+        total_komplain_bulan_lalu
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.penurunanJumlahKomplainKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_57.vue b/src/components/Pages/Monalisa/Table_57.vue
index 5341f68..b776acd 100755
--- a/src/components/Pages/Monalisa/Table_57.vue
+++ b/src/components/Pages/Monalisa/Table_57.vue
@@ -19,31 +19,31 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn alignment="center" caption="Aging Complains(Kum)" css-class="custom-table-column">
+            <DxColumn alignment="center" caption="Aging Complains (Kums)" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Menit)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_gangguan_sla" data-type="number" caption="SLA (Menit)"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_bulan" data-type="number" caption="Feb 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="SLA (Jam)"
+                    <DxColumn :width="150" alignment="center" data-field="rata_rct_keluhan_sla" data-type="number" caption="SLA (Jam)"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="G"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_gangguan" data-type="number" caption="G"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="K"
+                <DxColumn :width="150" alignment="center" data-field="aging_komplain_keluhan" data-type="number" caption="K"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="% Rata-Rata Aging Complains"
+            <DxColumn :width="170" alignment="center" data-field="persen_rata_aging_komplain" data-type="number" caption="% Rata-Rata Aging Complains"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -61,6 +61,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -68,7 +70,6 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -102,9 +103,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const agingComplaintKumulatif = gql`
+  query DaftaragingComplaintKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    agingComplaintKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        aging_komplain_gangguan
+        aging_komplain_keluhan
+        nama_posko
+        persen_rata_aging_komplain
+        rata_rct_gangguan_bulan
+        rata_rct_gangguan_sla
+        rata_rct_keluhan_bulan
+        rata_rct_keluhan_sla
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(agingComplaintKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.agingComplaintKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_58.vue b/src/components/Pages/Monalisa/Table_58.vue
index d3882f0..1974d18 100755
--- a/src/components/Pages/Monalisa/Table_58.vue
+++ b/src/components/Pages/Monalisa/Table_58.vue
@@ -19,21 +19,21 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn alignment="center" caption="Periode: s.d Januari, 2020" css-class="custom-table-column">
-                <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit"
+            <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+                <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_terencana" data-type="number" caption="Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Tidak Terencana"
+                <DxColumn :width="150" alignment="center" data-field="ens_tidak_terencana" data-type="number" caption="Tidak Terencana"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Bencana Alam"
+                <DxColumn :width="150" alignment="center" data-field="ens_bencana_alam" data-type="number" caption="Bencana Alam"
                     css-class="custom-table-column" />
             </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="Total"
+            <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="KPI ENS"
+            <DxColumn :width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -51,6 +51,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -58,7 +60,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -92,9 +94,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanKumulatif = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanKumulatif(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanKumulatif, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_59.vue b/src/components/Pages/Monalisa/Table_59.vue
index cbfde2e..6125e65 100755
--- a/src/components/Pages/Monalisa/Table_59.vue
+++ b/src/components/Pages/Monalisa/Table_59.vue
@@ -19,24 +19,23 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :min-width="250" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Gangguan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_gangguan_berulang_total" data-type="number" caption="Total Gangguan"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="s.d Jan 2020"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_bulan" data-type="number" caption="Jan 2020"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total Keluhan"
+                    <DxColumn :width="150" alignment="center" data-field="kepatuhan_akurasi_keluhan_berulang_total" data-type="number" caption="Total Keluhan"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
-            <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Komplain Pelanggan %"
+            <DxColumn :width="150" alignment="center" data-field="persen_komplain_pelanggan" data-type="number" caption="Komplain Pelanggan %"
                 css-class="custom-table-column" />
 
         </DxDataGrid>
@@ -54,13 +53,16 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
+const data = ref<any[]>([])
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -94,9 +96,69 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
-const filterData = (params:any) => 
-{   
-    console.log(params)
+const kepatuhandanAkurasiDalamPelaporanBulanan = gql`
+  query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+    $regional: String
+    $posko: String
+    $idUid: Int
+    $idUp3: Int
+    $bulan: Int
+    $tahun: Int
+  ) {
+    kepatuhandanAkurasiDalamPelaporanBulanan(
+      regional: $regional
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      bulan: $bulan
+      tahun: $tahun
+    ) {
+        kepatuhan_akurasi_gangguan_berulang_bulan
+        kepatuhan_akurasi_gangguan_berulang_total
+        kepatuhan_akurasi_keluhan_berulang_bulan
+        kepatuhan_akurasi_keluhan_berulang_total
+        nama_posko
+        persen_komplain_pelanggan
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(kepatuhandanAkurasiDalamPelaporanBulanan, {
+  regional: '',
+  posko: '',
+  idUid: 0,
+  idUp3: 0,
+  bulan: 10,
+  tahun: 2023
+})
+const filterData = (params: any) => {
+  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+
+  refetch({
+    regional: regional,
+    posko: posko ? posko.id : "",
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const filters = ref()
 </script>
\ No newline at end of file

From a0ccf13466811da6a2e078fec3923fc32d1a2487 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Tue, 20 Feb 2024 18:44:11 +0700
Subject: [PATCH 15/17] Update dependencies and fix code issues

---
 package-lock.json                             | 3351 +++++++++--------
 package.json                                  |    1 +
 src/assets/css/style.css                      |  548 ++-
 src/components/Button.vue                     |    1 +
 src/components/DatePicker.vue                 |   28 +-
 src/components/Form/Filters.vue               |   16 +-
 src/components/Form/FiltersType/Type1.vue     |   37 +-
 src/components/Form/FiltersType/Type13.vue    |    2 +-
 src/components/Form/FiltersType/Type14.vue    |   48 +-
 src/components/Form/FiltersType/Type16.vue    |    4 +-
 src/components/Form/FiltersType/Type18.vue    |   26 +-
 src/components/Form/FiltersType/Type4.vue     |    2 +-
 src/components/Form/FiltersType/Type5.vue     |    4 +-
 src/components/Form/FiltersType/Type6.vue     |    4 +-
 src/components/Form/FiltersType/Type7.vue     |   33 +-
 src/components/Form/FiltersType/Type8.vue     |    4 +-
 src/components/Form/FiltersType/Type9.vue     |    2 +-
 src/components/Form/InlineRadioGroup.vue      |    3 +-
 src/components/Form/InputWithSuffix.vue       |   28 +-
 src/components/Pages/Anomali/Table_61.vue     |   96 +-
 src/components/Pages/Anomali/Table_62.vue     |    3 +-
 src/components/Pages/Anomali/Table_63.vue     |  141 +-
 src/components/Pages/Anomali/Table_64.vue     |  123 +-
 src/components/Pages/Anomali/Table_65.vue     |   78 +-
 src/components/Pages/Anomali/Table_66.vue     |    3 +
 src/components/Pages/Cico/Table_60.vue        |  107 +-
 src/components/Pages/Ctt/Table_67.vue         |   98 +-
 src/components/Pages/Gangguan/Table_1.vue     |   49 +-
 src/components/Pages/Gangguan/Table_10.vue    |    2 +-
 src/components/Pages/Gangguan/Table_11.vue    |    5 +-
 src/components/Pages/Gangguan/Table_12.vue    |    2 +-
 src/components/Pages/Gangguan/Table_13.vue    |    2 +-
 src/components/Pages/Gangguan/Table_14.vue    |    2 +-
 src/components/Pages/Gangguan/Table_15.vue    |    2 +-
 src/components/Pages/Gangguan/Table_16.vue    |    2 +-
 src/components/Pages/Gangguan/Table_17.vue    |    2 +-
 src/components/Pages/Gangguan/Table_18.vue    |    2 +-
 src/components/Pages/Gangguan/Table_19.vue    |    2 +-
 src/components/Pages/Gangguan/Table_2.vue     |    6 +-
 src/components/Pages/Gangguan/Table_20.vue    |    2 +-
 src/components/Pages/Gangguan/Table_3.vue     |    4 +-
 src/components/Pages/Gangguan/Table_4.vue     |    4 +-
 src/components/Pages/Gangguan/Table_5.vue     |    4 +-
 src/components/Pages/Gangguan/Table_6.vue     |    4 +-
 src/components/Pages/Gangguan/Table_7.vue     |    4 +-
 src/components/Pages/Gangguan/Table_8.vue     |    2 +-
 src/components/Pages/Gangguan/Table_9.vue     |    2 +-
 src/components/Pages/Keluhan/Table_21.vue     |    5 +-
 src/components/Pages/Keluhan/Table_22.vue     |    4 +-
 src/components/Pages/Keluhan/Table_23.vue     |    4 +-
 src/components/Pages/Keluhan/Table_24.vue     |    4 +-
 src/components/Pages/Keluhan/Table_25.vue     |    4 +-
 src/components/Pages/Keluhan/Table_26.vue     |    4 +-
 src/components/Pages/Keluhan/Table_27.vue     |    4 +-
 src/components/Pages/Keluhan/Table_30.vue     |    2 +-
 src/components/Pages/Keluhan/Table_31.vue     |    2 +-
 src/components/Pages/Keluhan/Table_35.vue     |    2 +-
 src/components/Pages/Material/Table_68.vue    |  105 +-
 src/components/Pages/Material/Table_69.vue    |  131 +-
 src/components/Pages/Monalisa/Table_52.vue    |  174 +-
 src/components/Pages/Monalisa/Table_53.vue    |    3 +
 .../Pages/PencarianData/Table_71.vue          |    2 +-
 src/components/SelectMulti.vue                |  198 +-
 src/stores/totalDuration.ts                   |    4 +-
 tailwind.config.js                            |  178 +-
 65 files changed, 3454 insertions(+), 2271 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1e3ff7..1b4d632 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@vue/apollo-components": "^4.0.0",
         "@vue/apollo-composable": "^4.0.1",
         "@vue/apollo-option": "^4.0.0",
+        "@vueform/multiselect": "^2.6.6",
         "axios": "^1.6.7",
         "devextreme": "23.1.5",
         "devextreme-vue": "23.1.5",
@@ -106,17 +107,19 @@
       }
     },
     "node_modules/@apollo/client": {
-      "version": "3.8.10",
-      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.10.tgz",
-      "integrity": "sha512-p/22RZ8ehHyvySnC20EHPPe0gdu8Xp6ZCiXOfdEe1ZORw5cUteD/TLc66tfKv8qu8NLIfbiWoa+6s70XnKvxqg==",
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.9.5.tgz",
+      "integrity": "sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==",
       "dependencies": {
         "@graphql-typed-document-node/core": "^3.1.1",
+        "@wry/caches": "^1.0.0",
         "@wry/equality": "^0.5.6",
         "@wry/trie": "^0.5.0",
         "graphql-tag": "^2.12.6",
         "hoist-non-react-statics": "^3.3.2",
         "optimism": "^0.18.0",
         "prop-types": "^15.7.2",
+        "rehackt": "0.0.5",
         "response-iterator": "^0.2.6",
         "symbol-observable": "^4.0.0",
         "ts-invariant": "^0.10.3",
@@ -124,7 +127,7 @@
         "zen-observable-ts": "^1.2.5"
       },
       "peerDependencies": {
-        "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0",
+        "graphql": "^15.0.0 || ^16.0.0",
         "graphql-ws": "^5.5.5",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -145,11 +148,6 @@
         }
       }
     },
-    "node_modules/@apollo/client/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/@apollo/link-context": {
       "version": "2.0.0-beta.3",
       "resolved": "https://registry.npmjs.org/@apollo/link-context/-/link-context-2.0.0-beta.3.tgz",
@@ -171,12 +169,12 @@
       "dev": true
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.22.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz",
-      "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.22.13",
+        "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
       },
       "engines": {
@@ -184,30 +182,30 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz",
-      "integrity": "sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.0.tgz",
-      "integrity": "sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
+      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
-        "@babel/helper-compilation-targets": "^7.22.15",
-        "@babel/helper-module-transforms": "^7.23.0",
-        "@babel/helpers": "^7.23.0",
-        "@babel/parser": "^7.23.0",
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.0",
-        "@babel/types": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -223,12 +221,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz",
-      "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.23.0",
+        "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
         "@jridgewell/trace-mapping": "^0.3.17",
         "jsesc": "^2.5.1"
@@ -250,14 +248,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz",
-      "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.22.9",
-        "@babel/helper-validator-option": "^7.22.15",
-        "browserslist": "^4.21.9",
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-validator-option": "^7.23.5",
+        "browserslist": "^4.22.2",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -266,9 +264,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.6.tgz",
-      "integrity": "sha512-cBXU1vZni/CpGF29iTu4YRbOZt3Wat6zCoMDxRF1MayiEc4URxOj31tT65HUM0CRpMowA3HCJaAOVOUnMf96cw==",
+      "version": "7.23.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz",
+      "integrity": "sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -440,9 +438,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
-      "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -458,32 +456,32 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz",
-      "integrity": "sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.1",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.1.tgz",
-      "integrity": "sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
+      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.0",
-        "@babel/types": "^7.23.0"
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz",
-      "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==",
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
       "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -495,9 +493,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -590,9 +588,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
-      "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -601,34 +599,34 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
-      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
+      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/parser": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz",
-      "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/generator": "^7.23.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.0",
-        "@babel/types": "^7.23.0",
-        "debug": "^4.1.0",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
+        "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -636,12 +634,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz",
-      "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.22.5",
+        "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
@@ -657,6 +655,11 @@
         "tslib": "2.0.1"
       }
     },
+    "node_modules/@devexpress/utils/node_modules/tslib": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+    },
     "node_modules/@devextreme/runtime": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@devextreme/runtime/-/runtime-3.0.11.tgz",
@@ -1013,18 +1016,18 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.1.tgz",
-      "integrity": "sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
+      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
-      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -1044,10 +1047,20 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.23.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
-      "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -1059,10 +1072,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@eslint/js": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.51.0.tgz",
-      "integrity": "sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
+      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1125,9 +1150,12 @@
       }
     },
     "node_modules/@headlessui/vue": {
-      "version": "1.7.16",
-      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.16.tgz",
-      "integrity": "sha512-nKT+nf/q6x198SsyK54mSszaQl/z+QxtASmgMEJtpxSX2Q0OPJX0upS/9daDyiECpeAsvjkoOrm2O/6PyBQ+Qg==",
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.19.tgz",
+      "integrity": "sha512-VFjKPybogux/5/QYGSq4zgG/x3RcxId15W8uguAJAjPBxelI23dwjOjTx/mIiMkM/Hd3rzFxcf2aIp56eEWRcA==",
+      "dependencies": {
+        "@tanstack/vue-virtual": "^3.0.0-beta.60"
+      },
       "engines": {
         "node": ">=10"
       },
@@ -1136,27 +1164,49 @@
       }
     },
     "node_modules/@heroicons/vue": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.0.18.tgz",
-      "integrity": "sha512-BcTC9nq2TkwNSfQuqo96J7ehx4etezypc2YeTq7KsXWxrcrerhkgjLrxGRBnStN0wrXo0Gv4BInybqz5uBG6Cw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.1.tgz",
+      "integrity": "sha512-Yi5nh/89L193ALgHyJUQUdNLsKXPrrE3yj5yiR8WAlo7nZyXGxGauQcEAmBsa2XJGMhBMuEdoOiuZ8wEwTBxVQ==",
       "peerDependencies": {
         "vue": ">= 3"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.11",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
-      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^1.2.1",
-        "debug": "^4.1.1",
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
       "engines": {
         "node": ">=10.10.0"
       }
     },
+    "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1171,11 +1221,100 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
+      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/@jest/schemas": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
@@ -1202,9 +1341,9 @@
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
-      "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
       "engines": {
         "node": ">=6.0.0"
       }
@@ -1223,18 +1362,18 @@
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
-      "integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz",
-      "integrity": "sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
     },
     "node_modules/@lit/reactive-element": {
       "version": "1.6.3",
@@ -1245,13 +1384,13 @@
       }
     },
     "node_modules/@lottiefiles/lottie-player": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-2.0.2.tgz",
-      "integrity": "sha512-R9WF2/gFboZ0GW3QjqtbZF94JQq8oI1t5XWZPtTypvk2xTizphybZu+c08QFQbqY6rnkazHIyRBj2MK0qr6Hrw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/lottie-player/-/lottie-player-2.0.3.tgz",
+      "integrity": "sha512-f91pxEscvfgf/BbI+r+7HD0HJ9HP7ttWqx6FxxZIQe1Pr+hfjs+DsqusN2syWkqiUk07tilKFBJt3/cRZ4x3Kw==",
       "dependencies": {
         "@types/pako": "^1.0.1",
         "lit": "^2.1.2",
-        "lottie-web": "^5.10.0",
+        "lottie-web": "^5.12.2",
         "pako": "^2.0.4",
         "resize-observer-polyfill": "^1.5.1"
       }
@@ -1305,19 +1444,20 @@
         "vue": ">=3.2.39"
       }
     },
-    "node_modules/@pkgr/utils": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
-      "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
       "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "fast-glob": "^3.3.0",
-        "is-glob": "^4.0.3",
-        "open": "^9.1.0",
-        "picocolors": "^1.0.0",
-        "tslib": "^2.6.0"
-      },
       "engines": {
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       },
@@ -1325,16 +1465,10 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@pkgr/utils/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
-    },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
-      "integrity": "sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
+      "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
       "dev": true
     },
     "node_modules/@sinclair/typebox": {
@@ -1376,9 +1510,9 @@
       }
     },
     "node_modules/@tailwindcss-mangle/core/node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -1413,9 +1547,9 @@
       }
     },
     "node_modules/@tailwindcss/forms": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
-      "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+      "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
       "dev": true,
       "dependencies": {
         "mini-svg-data-uri": "^1.2.3"
@@ -1439,6 +1573,30 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.1.1.tgz",
+      "integrity": "sha512-I5lerX+RWxLM+zw35gwwQIoLvtkOm0ecuQUlEjNey+Ga6TnR66WKLBnSHre59onugxhpDLT2nofRYzxf+izDFQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.1.1.tgz",
+      "integrity": "sha512-62am497kFAOEdOlK7ECEqKiZPxgaPk5BbK4ah+PhTrvz1yNRCHbUbYGe8JwV1DIoY9k1MNXGBLUW5hAa5tvnzQ==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.1.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -1455,30 +1613,30 @@
       "dev": true
     },
     "node_modules/@types/chai": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.6.tgz",
-      "integrity": "sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==",
+      "version": "4.3.11",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz",
+      "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==",
       "dev": true
     },
     "node_modules/@types/chai-subset": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.3.tgz",
-      "integrity": "sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/chai-subset/-/chai-subset-1.3.5.tgz",
+      "integrity": "sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==",
       "dev": true,
       "dependencies": {
         "@types/chai": "*"
       }
     },
     "node_modules/@types/file-saver": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.6.tgz",
-      "integrity": "sha512-Mw671DVqoMHbjw0w4v2iiOro01dlT/WhWp5uwecBa0Wg8c+bcZOjgF1ndBnlaxhtvFCgTRBtsGivSVhrK/vnag==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
       "dev": true
     },
     "node_modules/@types/jsdom": {
-      "version": "21.1.3",
-      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.3.tgz",
-      "integrity": "sha512-1zzqSP+iHJYV4lB3lZhNBa012pubABkj9yG/GuXuf6LZH1cSPIJBqFDrm5JX65HHt6VOnNYdTui/0ySerRbMgA==",
+      "version": "21.1.6",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
+      "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -1487,71 +1645,74 @@
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.13",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
-      "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==",
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.18.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.4.tgz",
-      "integrity": "sha512-t3rNFBgJRugIhackit2mVcLfF6IRc0JE4oeizPQL8Zrm8n2WY/0wOdpOPhdtG0V9Q2TlW/axbF1MJ6z+Yj/kKQ==",
-      "devOptional": true
+      "version": "18.19.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.17.tgz",
+      "integrity": "sha512-SzyGKgwPzuWp2SHhlpXKzCX0pIOfcI4V2eF37nNBJOhwlegQ83omtVQ1XxZpDE06V/d6AQvfQdPfnw0tRC//Ng==",
+      "devOptional": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
     },
     "node_modules/@types/pako": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.5.tgz",
-      "integrity": "sha512-cg6x1RjMyCYoAdhOyNC/144EqhdHJXXZiiTgN3o+ZtOu4+ZQVN5msZgNyxzDI1w+dMYDdRamDzto3+bkR3FFQQ=="
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-1.0.7.tgz",
+      "integrity": "sha512-YBtzT2ztNF6R/9+UXj2wTGFnC9NklAnASt3sC0h2m1bbH7G6FyBIkt4AN8ThZpNfxUo1b2iMVO0UawiJymEt8A=="
     },
     "node_modules/@types/qs": {
-      "version": "6.9.9",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
-      "integrity": "sha512-wYLxw35euwqGvTDx6zfY1vokBFnsK0HNrzc6xNHchxfO2hpuRg74GbkEW7e3sSmPvj0TjCDT1VCa6OtHXnubsg=="
+      "version": "6.9.11",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.11.tgz",
+      "integrity": "sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ=="
     },
     "node_modules/@types/raf": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.2.tgz",
-      "integrity": "sha512-sM4HyDVlDFl4goOXPF+g9nNHJFZQGot+HgySjM4cRjqXzjdatcEvYrtG4Ia8XumR9T6k8G2tW9B7hnUj51Uf0A==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
       "optional": true
     },
     "node_modules/@types/semver": {
-      "version": "7.5.3",
-      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz",
-      "integrity": "sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==",
+      "version": "7.5.7",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.7.tgz",
+      "integrity": "sha512-/wdoPq1QqkSj9/QOeKkFquEuPzQbHTWAMPH/PaUMB+JuR31lXhlWXRZ52IpfDYVlDOUBvX09uBrPwxGT1hjNBg==",
       "dev": true
     },
     "node_modules/@types/tough-cookie": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.3.tgz",
-      "integrity": "sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
       "dev": true
     },
     "node_modules/@types/trusted-types": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.4.tgz",
-      "integrity": "sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ=="
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
     "node_modules/@types/uuid": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.5.tgz",
-      "integrity": "sha512-xfHdwa1FMJ082prjSJpoEI57GZITiQz10r3vEJCHa2khEFQjKy91aWKz6+zybzssCvXUwE1LQWgWVwZ4nYUvHQ=="
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA=="
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.18",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.18.tgz",
-      "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw=="
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.7.4.tgz",
-      "integrity": "sha512-DAbgDXwtX+pDkAHwiGhqP3zWUGpW49B7eqmgpPtg+BKJXwdct79ut9+ifqOFPJGClGKSHXn2PTBatCnldJRUoA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
+      "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.7.4",
-        "@typescript-eslint/type-utils": "6.7.4",
-        "@typescript-eslint/utils": "6.7.4",
-        "@typescript-eslint/visitor-keys": "6.7.4",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/type-utils": "6.21.0",
+        "@typescript-eslint/utils": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1589,9 +1750,9 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -1610,15 +1771,15 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.4.tgz",
-      "integrity": "sha512-I5zVZFY+cw4IMZUeNCU7Sh2PO5O57F7Lr0uyhgCJmhN/BuTlnc55KxPonR4+EM3GBdfiCyGZye6DgMjtubQkmA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.7.4",
-        "@typescript-eslint/types": "6.7.4",
-        "@typescript-eslint/typescript-estree": "6.7.4",
-        "@typescript-eslint/visitor-keys": "6.7.4",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1638,13 +1799,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.7.4.tgz",
-      "integrity": "sha512-SdGqSLUPTXAXi7c3Ob7peAGVnmMoGzZ361VswK2Mqf8UOYcODiYvs8rs5ILqEdfvX1lE7wEZbLyELCW+Yrql1A==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.7.4",
-        "@typescript-eslint/visitor-keys": "6.7.4"
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1655,13 +1816,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.7.4.tgz",
-      "integrity": "sha512-n+g3zi1QzpcAdHFP9KQF+rEFxMb2KxtnJGID3teA/nxKHOVi3ylKovaqEzGBbVY2pBttU6z85gp0D00ufLzViQ==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
+      "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.7.4",
-        "@typescript-eslint/utils": "6.7.4",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/utils": "6.21.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1682,9 +1843,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.7.4.tgz",
-      "integrity": "sha512-o9XWK2FLW6eSS/0r/tgjAGsYasLAnOWg7hvZ/dGYSSNjCh+49k5ocPN8OmG5aZcSJ8pclSOyVKP2x03Sj+RrCA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1695,16 +1856,17 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.7.4.tgz",
-      "integrity": "sha512-ty8b5qHKatlNYd9vmpHooQz3Vki3gG+3PchmtsA4TgrZBKWHNjWfkQid7K7xQogBqqc7/BhGazxMD5vr6Ha+iQ==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.7.4",
-        "@typescript-eslint/visitor-keys": "6.7.4",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
         "semver": "^7.5.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1734,9 +1896,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -1755,17 +1917,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.7.4.tgz",
-      "integrity": "sha512-PRQAs+HUn85Qdk+khAxsVV+oULy3VkbH3hQ8hxLRJXWBEd7iI+GbQxH5SEUSH7kbEoTp6oT1bOwyga24ELALTA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
+      "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.7.4",
-        "@typescript-eslint/types": "6.7.4",
-        "@typescript-eslint/typescript-estree": "6.7.4",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -1792,9 +1954,9 @@
       }
     },
     "node_modules/@typescript-eslint/utils/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -1813,12 +1975,12 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.7.4",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.7.4.tgz",
-      "integrity": "sha512-pOW37DUhlTZbvph50x5zZCkFn3xzwkGtNoJHzIM3svpiSkJzwOYr/kVBaXmf+RAQiUDs1AHEZVNPg6UJCJpwRA==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.7.4",
+        "@typescript-eslint/types": "6.21.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -1829,34 +1991,40 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.0.tgz",
-      "integrity": "sha512-xdguqb+VUwiRpSg+nsc2HtbAUSGak25DXYvpQQi4RVU1Xq1uworyoH/md9Rfd8zMmPR/pSghr309QNcftUVseg==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
+      "integrity": "sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==",
       "dev": true,
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.0.0",
+        "vite": "^4.0.0 || ^5.0.0",
         "vue": "^3.2.25"
       }
     },
     "node_modules/@vitejs/plugin-vue-jsx": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.0.2.tgz",
-      "integrity": "sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-3.1.0.tgz",
+      "integrity": "sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==",
       "dev": true,
       "dependencies": {
-        "@babel/core": "^7.22.10",
-        "@babel/plugin-transform-typescript": "^7.22.10",
+        "@babel/core": "^7.23.3",
+        "@babel/plugin-transform-typescript": "^7.23.3",
         "@vue/babel-plugin-jsx": "^1.1.5"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.0.0",
+        "vite": "^4.0.0 || ^5.0.0",
         "vue": "^3.0.0"
       }
     },
@@ -1956,30 +2124,31 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.3.tgz",
-      "integrity": "sha512-7Qgwu9bWUHN+cLrOkCbIVBkL+RVPREhvY07wY89dGxi4mY9mQCsUVRRp64F61lX7Nc27meMnvy0sWlzY0x6oQQ==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "1.10.3"
+        "@volar/source-map": "1.11.1"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.3.tgz",
-      "integrity": "sha512-QE9nwK3xsdBQGongHnC9SCR0itx7xUKQFsUDn5HbZY3pHpyXxdY1hSBG0eh9mE+aTKoM4KlqMvrb+19Tv9vS1Q==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.3.1"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.3.tgz",
-      "integrity": "sha512-n0ar6xGYpRoSvgGMetm/JXP0QAXx+NOUvxCaWCfCjiFivQRSLJeydYDijhoGBUl5KSKosqq9In5L3e/m2TqTcQ==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "1.10.3"
+        "@volar/language-core": "1.11.1",
+        "path-browserify": "^1.0.1"
       }
     },
     "node_modules/@vue/apollo-components": {
@@ -2014,6 +2183,31 @@
         }
       }
     },
+    "node_modules/@vue/apollo-composable/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/apollo-option": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vue/apollo-option/-/apollo-option-4.0.0.tgz",
@@ -2027,81 +2221,104 @@
       }
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
-      "integrity": "sha512-SgUymFpMoAyWeYWLAY+MkCK3QEROsiUnfaw5zxOVD/M64KQs8D/4oK6Q5omVA2hnvEOE0SCkH2TZxs/jnnUj7w==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.1.tgz",
+      "integrity": "sha512-jtEXim+pfyHWwvheYwUwSXm43KwQo8nhOBDyjrUITV6X2tB7lJm6n/+4sqR8137UVZZul5hBzWHdZ2uStYpyRQ==",
       "dev": true
     },
     "node_modules/@vue/babel-plugin-jsx": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.5.tgz",
-      "integrity": "sha512-nKs1/Bg9U1n3qSWnsHhCVQtAzI6aQXqua8j/bZrau8ywT1ilXQbK4FwEJGmU8fV7tcpuFvWmmN7TMmV1OBma1g==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.1.tgz",
+      "integrity": "sha512-Yy9qGktktXhB39QE99So/BO2Uwm/ZG+gpL9vMg51ijRRbINvgbuhyJEi4WYmGRMx/MSTfK0xjgZ3/MyY+iLCEg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-imports": "^7.22.5",
-        "@babel/plugin-syntax-jsx": "^7.22.5",
-        "@babel/template": "^7.22.5",
-        "@babel/traverse": "^7.22.5",
-        "@babel/types": "^7.22.5",
-        "@vue/babel-helper-vue-transform-on": "^1.1.5",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/template": "^7.22.15",
+        "@babel/traverse": "^7.23.7",
+        "@babel/types": "^7.23.6",
+        "@vue/babel-helper-vue-transform-on": "1.2.1",
+        "@vue/babel-plugin-resolve-type": "1.2.1",
         "camelcase": "^6.3.0",
         "html-tags": "^3.3.1",
         "svg-tags": "^1.0.0"
       },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/babel-plugin-resolve-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.1.tgz",
+      "integrity": "sha512-IOtnI7pHunUzHS/y+EG/yPABIAp0VN8QhQ0UCS09jeMVxgAnI9qdOzO85RXdQGxq+aWCdv8/+k3W0aYO6j/8fQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-sfc": "^3.4.15"
+      },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.19.tgz",
+      "integrity": "sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.9",
+        "@vue/shared": "3.4.19",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz",
+      "integrity": "sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.4.19",
+        "@vue/shared": "3.4.19"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz",
+      "integrity": "sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.9",
+        "@vue/compiler-core": "3.4.19",
+        "@vue/compiler-dom": "3.4.19",
+        "@vue/compiler-ssr": "3.4.19",
+        "@vue/shared": "3.4.19",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.6",
+        "postcss": "^8.4.33",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.19.tgz",
+      "integrity": "sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.19",
+        "@vue/shared": "3.4.19"
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
     },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "8.0.0",
@@ -2142,18 +2359,19 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.18",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.18.tgz",
-      "integrity": "sha512-byTi+mwSL7XnVRtfWE3MJy3HQryoVSQ3lymauXviegn3G1wwwlSOUljzQe3w5PyesOnBEIxYoavfKzMJnExrBA==",
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~1.10.3",
-        "@volar/source-map": "~1.10.3",
+        "@volar/language-core": "~1.11.1",
+        "@volar/source-map": "~1.11.1",
         "@vue/compiler-dom": "^3.3.0",
-        "@vue/reactivity": "^3.3.0",
         "@vue/shared": "^3.3.0",
+        "computeds": "^0.0.1",
         "minimatch": "^9.0.3",
         "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
       "peerDependencies": {
@@ -2165,94 +2383,58 @@
         }
       }
     },
-    "node_modules/@vue/language-core/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@vue/language-core/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.19.tgz",
+      "integrity": "sha512-+VcwrQvLZgEclGZRHx4O2XhyEEcKaBi50WbxdVItEezUf4fqRh838Ix6amWTdX0CNb/b6t3Gkz3eOebfcSt+UA==",
       "dependencies": {
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "@vue/shared": "3.4.19"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.19.tgz",
+      "integrity": "sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==",
       "dependencies": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.4.19",
+        "@vue/shared": "3.4.19"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.19.tgz",
+      "integrity": "sha512-IyZzIDqfNCF0OyZOauL+F4yzjMPN2rPd8nhqPP2N1lBn3kYqJpPHHru+83Rkvo2lHz5mW+rEeIMEF9qY3PB94g==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.4.19",
+        "@vue/shared": "3.4.19",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.19.tgz",
+      "integrity": "sha512-eAj2p0c429RZyyhtMRnttjcSToch+kTWxFPHlzGMkR28ZbF1PDlTcmGmlDxccBuqNd9iOQ7xPRPAGgPVj+YpQw==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.4.19",
+        "@vue/shared": "3.4.19"
       },
       "peerDependencies": {
-        "vue": "3.3.4"
+        "vue": "3.4.19"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz",
+      "integrity": "sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw=="
     },
     "node_modules/@vue/test-utils": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.1.tgz",
-      "integrity": "sha512-VO8nragneNzUZUah6kOjiFmD/gwRjUauG9DROh6oaOeFwX1cZRUNHhdeogE8635cISigXFTtGLUQWx5KCb0xeg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.4.tgz",
+      "integrity": "sha512-8jkRxz8pNhClAf4Co4ZrpAoFISdvT3nuSkUlY6Ys6rmTpw3DMWG/X3mw3gQ7QJzgCZO9f+zuE2kW57fi09MW7Q==",
       "dev": true,
       "dependencies": {
-        "js-beautify": "1.14.9",
-        "vue-component-type-helpers": "1.8.4"
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^1.8.21"
       },
       "peerDependencies": {
         "@vue/server-renderer": "^3.0.1",
@@ -2270,24 +2452,19 @@
       "integrity": "sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==",
       "dev": true
     },
-    "node_modules/@vue/typescript": {
-      "version": "1.8.18",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.18.tgz",
-      "integrity": "sha512-3M+lu+DUwJW0fNwd/rLE0FenmELxcC6zxgm/YZ25jSTi+uNGj9L5XvXvf20guC69gQvZ+cg49tTxbepfFVuNNQ==",
-      "dev": true,
-      "dependencies": {
-        "@volar/typescript": "~1.10.3",
-        "@vue/language-core": "1.8.18"
-      }
+    "node_modules/@vueform/multiselect": {
+      "version": "2.6.6",
+      "resolved": "https://registry.npmjs.org/@vueform/multiselect/-/multiselect-2.6.6.tgz",
+      "integrity": "sha512-JDWesVRmyGz9HmHp2Ooy1cb8XgKohiztwMDtjm8c0/Th+7wEZENZuYa0iY5CTvaJNANl3LVqh9BNnCc/YlM/Bg=="
     },
     "node_modules/@vueuse/core": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.5.0.tgz",
-      "integrity": "sha512-z/tI2eSvxwLRjOhDm0h/SXAjNm8N5ld6/SC/JQs6o6kpJ6Ya50LnEL8g5hoYu005i28L0zqB5L5yAl8Jl26K3A==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.18",
-        "@vueuse/metadata": "10.5.0",
-        "@vueuse/shared": "10.5.0",
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
         "vue-demi": ">=0.14.6"
       },
       "funding": {
@@ -2295,9 +2472,9 @@
       }
     },
     "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -2320,17 +2497,17 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.5.0.tgz",
-      "integrity": "sha512-fEbElR+MaIYyCkeM0SzWkdoMtOpIwO72x8WsZHRE7IggiOlILttqttM69AS13nrDxosnDBYdyy3C5mR1LCxHsw==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.5.0.tgz",
-      "integrity": "sha512-18iyxbbHYLst9MqU1X1QNdMHIjks6wC7XTVf0KNOv5es/Ms6gjVFCAAWTVP2JStuGqydg3DT+ExpFORUEi9yhg==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
       "dependencies": {
         "vue-demi": ">=0.14.6"
       },
@@ -2339,9 +2516,9 @@
       }
     },
     "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -2374,11 +2551,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@wry/caches/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/@wry/context": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
@@ -2390,11 +2562,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@wry/context/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/@wry/equality": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.5.7.tgz",
@@ -2406,11 +2573,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@wry/equality/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/@wry/trie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
@@ -2422,11 +2584,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@wry/trie/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -2435,15 +2592,18 @@
       "dev": true
     },
     "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
     },
     "node_modules/acorn": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
-      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -2462,9 +2622,9 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
-      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
       "dev": true,
       "engines": {
         "node": ">=0.4.0"
@@ -2572,36 +2732,36 @@
         "node": ">= 6"
       }
     },
-    "node_modules/archiver-utils/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+    "node_modules/archiver-utils/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/archiver-utils/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
-    "node_modules/archiver/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/archiver-utils/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/archiver-utils/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
+        "safe-buffer": "~5.1.0"
       }
     },
     "node_modules/arg": {
@@ -2616,13 +2776,16 @@
       "dev": true
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2638,17 +2801,18 @@
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
-      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -2684,9 +2848,9 @@
       }
     },
     "node_modules/async": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -2705,9 +2869,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.16",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
-      "integrity": "sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==",
+      "version": "10.4.17",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
+      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
       "dev": true,
       "funding": [
         {
@@ -2724,9 +2888,9 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.10",
-        "caniuse-lite": "^1.0.30001538",
-        "fraction.js": "^4.3.6",
+        "browserslist": "^4.22.2",
+        "caniuse-lite": "^1.0.30001578",
+        "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.2.0"
@@ -2742,9 +2906,9 @@
       }
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
+      "integrity": "sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -2797,9 +2961,9 @@
       ]
     },
     "node_modules/big-integer": {
-      "version": "1.6.51",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
-      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "version": "1.6.52",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
+      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
       "engines": {
         "node": ">=0.6"
       }
@@ -2834,19 +2998,6 @@
         "readable-stream": "^3.4.0"
       }
     },
-    "node_modules/bl/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/bluebird": {
       "version": "3.4.7",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
@@ -2863,25 +3014,12 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
-    "node_modules/bplist-parser": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
-      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
-      "dev": true,
-      "dependencies": {
-        "big-integer": "^1.6.44"
-      },
-      "engines": {
-        "node": ">= 5.10.0"
-      }
-    },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+        "balanced-match": "^1.0.0"
       }
     },
     "node_modules/braces": {
@@ -2962,42 +3100,10 @@
         "node": ">= 4"
       }
     },
-    "node_modules/browserify-sign/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/browserify-sign/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/browserslist": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz",
-      "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==",
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
       "dev": true,
       "funding": [
         {
@@ -3014,9 +3120,9 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001541",
-        "electron-to-chromium": "^1.4.535",
-        "node-releases": "^2.0.13",
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
+        "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
       "bin": {
@@ -3089,35 +3195,22 @@
         "node": ">=0.2.0"
       }
     },
-    "node_modules/bundle-name": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
-      "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
-      "dev": true,
-      "dependencies": {
-        "run-applescript": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/c12": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-1.5.1.tgz",
-      "integrity": "sha512-BWZRJgDEveT8uI+cliCwvYSSSSvb4xKoiiu5S0jaDbKBopQLQF7E+bq9xKk1pTcG+mUa3yXuFO7bD9d8Lr9Xxg==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-1.8.0.tgz",
+      "integrity": "sha512-93U6RndoaAwFQPBcS9F/6lwtgBfrWh4695sQ/ChILkbj0C7zOZVptOU3Sxp0I/9xvfW/lzBWD90AXDQz4muSkA==",
       "dev": true,
       "dependencies": {
         "chokidar": "^3.5.3",
-        "defu": "^6.1.2",
-        "dotenv": "^16.3.1",
-        "giget": "^1.1.3",
-        "jiti": "^1.20.0",
-        "mlly": "^1.4.2",
+        "defu": "^6.1.4",
+        "dotenv": "^16.3.2",
+        "giget": "^1.2.1",
+        "jiti": "^1.21.0",
+        "json5": "^2.2.3",
+        "jsonc-parser": "^3.2.1",
+        "mlly": "^1.5.0",
         "ohash": "^1.1.3",
-        "pathe": "^1.1.1",
+        "pathe": "^1.1.2",
         "perfect-debounce": "^1.0.0",
         "pkg-types": "^1.0.3",
         "rc9": "^2.1.1"
@@ -3133,12 +3226,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3174,9 +3273,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001546",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz",
-      "integrity": "sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw==",
+      "version": "1.0.30001588",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
+      "integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
       "dev": true,
       "funding": [
         {
@@ -3219,9 +3318,9 @@
       "optional": true
     },
     "node_modules/chai": {
-      "version": "4.3.10",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-4.3.10.tgz",
-      "integrity": "sha512-0UXG04VuVbruMUYbJ6JctvH0YnC/4q3/AkT18q4NaITo91CUm0liMS9VqzT9vZhVQ/1eqPanMWjBM+Juhfb/9g==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
       "dev": true,
       "dependencies": {
         "assertion-error": "^1.1.0",
@@ -3274,15 +3373,9 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -3295,6 +3388,9 @@
       "engines": {
         "node": ">= 8.10.0"
       },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       }
@@ -3328,6 +3424,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/citty": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
+      "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
+      "dev": true,
+      "dependencies": {
+        "consola": "^3.2.3"
+      }
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -3356,12 +3461,6 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
-    "node_modules/colorette": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3396,18 +3495,11 @@
         "node": ">= 10"
       }
     },
-    "node_modules/compress-commons/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -3424,6 +3516,15 @@
         "proto-list": "~1.2.1"
       }
     },
+    "node_modules/consola": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
+      "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -3431,9 +3532,9 @@
       "dev": true
     },
     "node_modules/core-js": {
-      "version": "3.33.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.0.tgz",
-      "integrity": "sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw==",
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -3468,19 +3569,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/crc32-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -3524,7 +3612,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3593,9 +3680,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-urls": {
       "version": "4.0.0",
@@ -3677,64 +3764,20 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/default-browser": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
-      "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
-      "dev": true,
-      "dependencies": {
-        "bundle-name": "^3.0.0",
-        "default-browser-id": "^3.0.0",
-        "execa": "^7.1.1",
-        "titleize": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser-id": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
-      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
-      "dev": true,
-      "dependencies": {
-        "bplist-parser": "^0.2.0",
-        "untildify": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/define-data-property": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
-      "integrity": "sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==",
-      "dev": true,
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
-      }
-    },
-    "node_modules/define-lazy-prop": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
-      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-properties": {
@@ -3755,9 +3798,9 @@
       }
     },
     "node_modules/defu": {
-      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.3.tgz",
-      "integrity": "sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ==",
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "dev": true
     },
     "node_modules/delayed-stream": {
@@ -3959,14 +4002,14 @@
       "optional": true
     },
     "node_modules/dotenv": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "version": "16.4.4",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.4.tgz",
+      "integrity": "sha512-XvPXc8XAQThSjAbY6cQ/9PcBXmFoWuw1sQ3b8HqUCR6ziGXjkTi//kB9SWa2UwqlgdAIuRqAa/9hVljzPehbYg==",
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/motdotla/dotenv?sponsor=1"
+        "url": "https://dotenvx.com"
       }
     },
     "node_modules/duplexer2": {
@@ -3977,6 +4020,43 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "node_modules/duplexer2/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/duplexer2/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/duplexer2/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/duplexer2/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "node_modules/editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -3995,15 +4075,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/editorconfig/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/editorconfig/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4032,9 +4103,9 @@
       }
     },
     "node_modules/editorconfig/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4053,9 +4124,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.544",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.544.tgz",
-      "integrity": "sha512-54z7squS1FyFRSUqq/knOFSptjjogLZXbKcYk3B0qkE1KZzvqASwRZnY2KzZQJqIYLVD38XZeoiMRflYSwyO4w==",
+      "version": "1.4.673",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
+      "integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
       "dev": true
     },
     "node_modules/elliptic": {
@@ -4083,12 +4154,12 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/encrypt-storage": {
-      "version": "2.12.16",
-      "resolved": "https://registry.npmjs.org/encrypt-storage/-/encrypt-storage-2.12.16.tgz",
-      "integrity": "sha512-hfc1lgHOglDkhcfqodjpT1axnn/7WrAPQx9Hj9WIaMmpD47+to450wmhYLUBFOLtQPMem4i26ChrQQ2r6EjnDQ==",
+      "version": "2.12.22",
+      "resolved": "https://registry.npmjs.org/encrypt-storage/-/encrypt-storage-2.12.22.tgz",
+      "integrity": "sha512-PJF1wLqKneCzEvHvaPkYUKHgCeIvxa8QFfG2GIGJtSzfjBnxa/7cCRrd/Nqs5wBPrXZVyDLZ731ek0pHofo+1g==",
       "dependencies": {
         "crypto-browserify": "^3.12.0",
-        "crypto-js": "^4.1.1"
+        "crypto-js": "^4.2.0"
       },
       "funding": {
         "type": "individual",
@@ -4107,7 +4178,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -4125,50 +4195,52 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
-      "integrity": "sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==",
+      "version": "1.22.4",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.4.tgz",
+      "integrity": "sha512-vZYJlk2u6qHYxBOTjAeg7qUxHdNfih64Uu2J8QqWgXZ2cri0ZpJAkzDUK/q593+mvKwlxyaxr6F1Q+3LKoQRgg==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.2",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-set-tostringtag": "^2.0.1",
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.6",
+        "call-bind": "^1.0.7",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.2",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.1",
-        "get-symbol-description": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
+        "has-property-descriptors": "^1.0.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.1",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.12",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
+        "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "safe-array-concat": "^1.0.1",
-        "safe-regex-test": "^1.0.0",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.0",
+        "safe-regex-test": "^1.0.3",
         "string.prototype.trim": "^1.2.8",
         "string.prototype.trimend": "^1.0.7",
         "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.0",
+        "typed-array-buffer": "^1.0.1",
         "typed-array-byte-length": "^1.0.0",
         "typed-array-byte-offset": "^1.0.0",
         "typed-array-length": "^1.0.4",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4177,15 +4249,34 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
+      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
+        "get-intrinsic": "^1.2.2",
+        "has-tostringtag": "^1.0.0",
+        "hasown": "^2.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4250,9 +4341,9 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
       "engines": {
         "node": ">=6"
       }
@@ -4267,18 +4358,19 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.51.0.tgz",
-      "integrity": "sha512-2WuxRZBrlwnXi+/vFSJyjMqrNjtJqiasMzehF0shoLaW7DzS3/9Yvrmq5JiT66+pNjiX4UBnLDiKHcWAr/OInA==",
+      "version": "8.56.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
+      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.2",
-        "@eslint/js": "8.51.0",
-        "@humanwhocodes/config-array": "^0.11.11",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.56.0",
+        "@humanwhocodes/config-array": "^0.11.13",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -4333,23 +4425,24 @@
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz",
-      "integrity": "sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
+      "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==",
       "dev": true,
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.8.5"
+        "synckit": "^0.8.6"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
       "funding": {
-        "url": "https://opencollective.com/prettier"
+        "url": "https://opencollective.com/eslint-plugin-prettier"
       },
       "peerDependencies": {
         "@types/eslint": ">=8.0.0",
         "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
         "prettier": ">=3.0.0"
       },
       "peerDependenciesMeta": {
@@ -4362,9 +4455,9 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.17.0.tgz",
-      "integrity": "sha512-r7Bp79pxQk9I5XDP0k2dpUC7Ots3OSWgvGZNu3BxmKK6Zg7NgVtcOB6OCna5Kb9oQwJPl5hq183WD0SY5tZtIQ==",
+      "version": "9.21.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.21.1.tgz",
+      "integrity": "sha512-XVtI7z39yOVBFJyi8Ljbn7kY9yHzznKXL02qQYn+ta63Iy4A9JFBw6o4OSB9hyD2++tVT+su9kQqetUyCCwhjw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -4372,7 +4465,7 @@
         "nth-check": "^2.1.1",
         "postcss-selector-parser": "^6.0.13",
         "semver": "^7.5.4",
-        "vue-eslint-parser": "^9.3.1",
+        "vue-eslint-parser": "^9.4.2",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
@@ -4395,9 +4488,9 @@
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -4408,9 +4501,9 @@
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4471,6 +4564,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/eslint/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4518,9 +4621,9 @@
       }
     },
     "node_modules/eslint/node_modules/globals": {
-      "version": "13.23.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
-      "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -4541,6 +4644,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4650,30 +4765,6 @@
         "node": ">=8.3.0"
       }
     },
-    "node_modules/exceljs/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/exceljs/node_modules/saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/exceljs/node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -4683,23 +4774,23 @@
       }
     },
     "node_modules/execa": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
-      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
       "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^4.3.0",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
         "is-stream": "^3.0.0",
         "merge-stream": "^2.0.0",
         "npm-run-path": "^5.1.0",
         "onetime": "^6.0.0",
-        "signal-exit": "^3.0.7",
+        "signal-exit": "^4.1.0",
         "strip-final-newline": "^3.0.0"
       },
       "engines": {
-        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+        "node": ">=16.17"
       },
       "funding": {
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
@@ -4729,9 +4820,9 @@
       "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
     },
     "node_modules/fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -4773,9 +4864,9 @@
       "dev": true
     },
     "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -4839,9 +4930,9 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.1.tgz",
-      "integrity": "sha512-/qM2b3LUIaIgviBQovTLvijfyOQXPtSRnRK26ksj2J7rzPIecePUIpJsZ4T02Qg+xiAEKIs5K8dsHEd+VaKa/Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
       "dev": true,
       "dependencies": {
         "flatted": "^3.2.9",
@@ -4849,7 +4940,7 @@
         "rimraf": "^3.0.2"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": "^10.12.0 || >=12.0.0"
       }
     },
     "node_modules/flatted": {
@@ -4886,6 +4977,21 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -4900,9 +5006,9 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
-      "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
       "dev": true,
       "engines": {
         "node": "*"
@@ -4979,23 +5085,15 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/fstream/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+    "node_modules/fstream/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "minimist": "^1.2.6"
       },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+      "bin": {
+        "mkdirp": "bin/cmd.js"
       }
     },
     "node_modules/fstream/node_modules/rimraf": {
@@ -5010,9 +5108,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -5068,39 +5169,44 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
       "dev": true,
       "engines": {
-        "node": ">=10"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5110,16 +5216,17 @@
       }
     },
     "node_modules/giget": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/giget/-/giget-1.1.3.tgz",
-      "integrity": "sha512-zHuCeqtfgqgDwvXlR84UNgnJDuUHQcNI5OqWqFxxuk2BshuKbYhJWdxBsEo4PvKqoGh23lUAIvBNpChMLv7/9Q==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/giget/-/giget-1.2.1.tgz",
+      "integrity": "sha512-4VG22mopWtIeHwogGSy1FViXVo0YT+m6BrqZfz0JJFwbSsePsCdOzdLIIli5BtMp7Xe8f/o2OmBpQX2NBOC24g==",
       "dev": true,
       "dependencies": {
-        "colorette": "^2.0.20",
-        "defu": "^6.1.2",
-        "https-proxy-agent": "^7.0.2",
-        "mri": "^1.2.0",
-        "node-fetch-native": "^1.4.0",
+        "citty": "^0.1.5",
+        "consola": "^3.2.3",
+        "defu": "^6.1.3",
+        "node-fetch-native": "^1.6.1",
+        "nypm": "^0.3.3",
+        "ohash": "^1.1.3",
         "pathe": "^1.1.1",
         "tar": "^6.2.0"
       },
@@ -5127,45 +5234,20 @@
         "giget": "dist/cli.mjs"
       }
     },
-    "node_modules/giget/node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/giget/node_modules/https-proxy-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz",
-      "integrity": "sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "dev": true,
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": "*"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -5183,24 +5265,23 @@
       }
     },
     "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=10"
+        "node": "*"
       }
     },
     "node_modules/globals": {
@@ -5251,7 +5332,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -5292,19 +5372,6 @@
         "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
       }
     },
-    "node_modules/graphql-tag/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
-    "node_modules/has": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
-      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -5324,12 +5391,11 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5358,12 +5424,12 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5385,38 +5451,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/hash-base/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/hash-base/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/hash.js": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
@@ -5426,6 +5460,17 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
+      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -5453,11 +5498,6 @@
         "react-is": "^16.7.0"
       }
     },
-    "node_modules/hoist-non-react-statics/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -5529,12 +5569,12 @@
       }
     },
     "node_modules/human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
       "dev": true,
       "engines": {
-        "node": ">=14.18.0"
+        "node": ">=16.17.0"
       }
     },
     "node_modules/iconv-lite": {
@@ -5569,9 +5609,9 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -5665,13 +5705,13 @@
       "dev": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
       "engines": {
@@ -5679,14 +5719,16 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5750,11 +5792,11 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5775,21 +5817,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-docker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
-      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5817,24 +5844,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-inside-container": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
-      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^3.0.0"
-      },
-      "bin": {
-        "is-inside-container": "cli.js"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -5956,12 +5965,12 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dev": true,
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5982,62 +5991,53 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-wsl/node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
     },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
     },
     "node_modules/jiti": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.20.0.tgz",
-      "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
     },
     "node_modules/js-beautify": {
-      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.14.9.tgz",
-      "integrity": "sha512-coM7xq1syLcMyuVGyToxcj2AlzhkDjmfklL8r0JgJ7A76wyGMpJ1oA35mr4APdYNO/o/4YY8H54NQIJzhMbhBg==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.1.tgz",
+      "integrity": "sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==",
       "dev": true,
       "dependencies": {
         "config-chain": "^1.1.13",
-        "editorconfig": "^1.0.3",
-        "glob": "^8.1.0",
-        "nopt": "^6.0.0"
+        "editorconfig": "^1.0.4",
+        "glob": "^10.3.3",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.0"
       },
       "bin": {
         "css-beautify": "js/bin/css-beautify.js",
@@ -6045,7 +6045,38 @@
         "js-beautify": "js/bin/js-beautify.js"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-beautify/node_modules/glob": {
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
       }
     },
     "node_modules/js-tokens": {
@@ -6107,6 +6138,18 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -6156,9 +6199,9 @@
       }
     },
     "node_modules/jsonc-parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
-      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
+      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
       "dev": true
     },
     "node_modules/jspdf": {
@@ -6189,11 +6232,43 @@
         "setimmediate": "^1.0.5"
       }
     },
+    "node_modules/jszip/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/jszip/node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
+    "node_modules/jszip/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/jszip/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/jszip/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -6214,6 +6289,38 @@
         "node": ">= 0.6.3"
       }
     },
+    "node_modules/lazystream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -6427,13 +6534,12 @@
       "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="
     },
     "node_modules/loupe": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.6.tgz",
-      "integrity": "sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==",
-      "deprecated": "Please upgrade to 2.3.7 which fixes GHSA-4q6p-r6v2-jvc5",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
       "dev": true,
       "dependencies": {
-        "get-func-name": "^2.0.0"
+        "get-func-name": "^2.0.1"
       }
     },
     "node_modules/lru-cache": {
@@ -6446,9 +6552,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.4",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
-      "integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -6569,14 +6675,17 @@
       "integrity": "sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg=="
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": "*"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/minimist": {
@@ -6591,7 +6700,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
       "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6628,35 +6736,27 @@
       "dev": true
     },
     "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dependencies": {
-        "minimist": "^1.2.6"
-      },
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "dev": true,
       "bin": {
         "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/mlly": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.4.2.tgz",
-      "integrity": "sha512-i/Ykufi2t1EZ6NaPLdfnZk2AX8cs0d+mTzVKuPfqPKPatxLApaBoxJQ9x1/uckXtrS/U5oisPMDkNs0yQTaBRg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.5.0.tgz",
+      "integrity": "sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.10.0",
-        "pathe": "^1.1.1",
+        "acorn": "^8.11.3",
+        "pathe": "^1.1.2",
         "pkg-types": "^1.0.3",
-        "ufo": "^1.3.0"
-      }
-    },
-    "node_modules/mri": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
-      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+        "ufo": "^1.3.2"
       }
     },
     "node_modules/ms": {
@@ -6682,9 +6782,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -6711,30 +6811,30 @@
       "dev": true
     },
     "node_modules/node-fetch-native": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.4.1.tgz",
-      "integrity": "sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.2.tgz",
+      "integrity": "sha512-69mtXOFZ6hSkYiXAVB5SqaRvrbITC/NPyqv7yuu/qw0nmgPyYbIMYYNIDhNtwPrzk0ptrimrLz/hhjvm4w5Z+w==",
       "dev": true
     },
     "node_modules/node-releases": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
       "dev": true
     },
     "node_modules/nopt": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
-      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.0.tgz",
+      "integrity": "sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==",
       "dev": true,
       "dependencies": {
-        "abbrev": "^1.0.0"
+        "abbrev": "^2.0.0"
       },
       "bin": {
         "nopt": "bin/nopt.js"
       },
       "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
     "node_modules/normalize-package-data": {
@@ -6800,6 +6900,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/npm-run-all/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/npm-run-all/node_modules/cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -6816,6 +6926,18 @@
         "node": ">=4.8"
       }
     },
+    "node_modules/npm-run-all/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/npm-run-all/node_modules/path-key": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
@@ -6868,9 +6990,9 @@
       }
     },
     "node_modules/npm-run-path": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
+      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
       "dev": true,
       "dependencies": {
         "path-key": "^4.0.0"
@@ -6921,6 +7043,24 @@
       "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
       "dev": true
     },
+    "node_modules/nypm": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.6.tgz",
+      "integrity": "sha512-2CATJh3pd6CyNfU5VZM7qSwFu0ieyabkEdnogE30Obn1czrmOYiZ8DOZLe1yBdLKWoyD3Mcy2maUs+0MR3yVjQ==",
+      "dev": true,
+      "dependencies": {
+        "citty": "^0.1.5",
+        "execa": "^8.0.1",
+        "pathe": "^1.1.2",
+        "ufo": "^1.3.2"
+      },
+      "bin": {
+        "nypm": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": "^14.16.0 || >=16.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -6938,9 +7078,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6955,13 +7095,13 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
         "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
@@ -7001,24 +7141,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/open": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
-      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
-      "dev": true,
-      "dependencies": {
-        "default-browser": "^4.0.0",
-        "define-lazy-prop": "^3.0.0",
-        "is-inside-container": "^1.0.0",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/opencollective-postinstall": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
@@ -7049,11 +7171,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/optimism/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -7160,6 +7277,12 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7181,7 +7304,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7191,6 +7313,29 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/path-scurry": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "dependencies": {
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -7201,9 +7346,9 @@
       }
     },
     "node_modules/pathe": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
-      "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
       "dev": true
     },
     "node_modules/pathval": {
@@ -7280,9 +7425,9 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.6.tgz",
-      "integrity": "sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
       "dependencies": {
         "@vue/devtools-api": "^6.5.0",
         "vue-demi": ">=0.14.5"
@@ -7305,9 +7450,9 @@
       }
     },
     "node_modules/pinia/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -7349,9 +7494,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
+      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
       "funding": [
         {
           "type": "opencollective",
@@ -7367,7 +7512,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -7410,20 +7555,26 @@
       }
     },
     "node_modules/postcss-load-config": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
-      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "lilconfig": "^2.0.5",
-        "yaml": "^2.1.1"
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
       },
       "engines": {
         "node": ">= 14"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
       "peerDependencies": {
         "postcss": ">=8.0.9",
         "ts-node": ">=9.0.0"
@@ -7437,6 +7588,17 @@
         }
       }
     },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
+      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@@ -7456,9 +7618,9 @@
       }
     },
     "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7495,9 +7657,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
-      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -7547,6 +7709,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -7562,11 +7730,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prop-types/node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -7603,9 +7766,9 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
     },
     "node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -7724,10 +7887,9 @@
       }
     },
     "node_modules/react-is": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
-      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
-      "dev": true
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
@@ -7772,17 +7934,16 @@
       }
     },
     "node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/readdir-glob": {
@@ -7793,14 +7954,6 @@
         "minimatch": "^5.1.0"
       }
     },
-    "node_modules/readdir-glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/readdir-glob/node_modules/minimatch": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
@@ -7824,19 +7977,20 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
-      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7845,6 +7999,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/rehackt": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/rehackt/-/rehackt-0.0.5.tgz",
+      "integrity": "sha512-BI1rV+miEkaHj8zd2n+gaMgzu/fKz7BGlb4zZ6HAiY9adDmJMkaDcmuXlJFv0eyKUob+oszs3/2gdnXUrzx2Tg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -7865,9 +8036,9 @@
       "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "node_modules/resolve": {
-      "version": "1.22.6",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz",
-      "integrity": "sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==",
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -7929,25 +8100,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/rimraf/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/ripemd160": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@@ -7973,128 +8125,19 @@
       }
     },
     "node_modules/rrule": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/rrule/-/rrule-2.7.2.tgz",
-      "integrity": "sha512-NkBsEEB6FIZOZ3T8frvEBOB243dm46SPufpDckY/Ap/YH24V1zLeMmDY8OA10lk452NdrF621+ynDThE7FQU2A==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/rrule/-/rrule-2.8.1.tgz",
+      "integrity": "sha512-hM3dHSBMeaJ0Ktp7W38BJZ7O1zOgaFEsn41PDk+yHoEtfLV+PoJt9E9xAlZiWgf/iqEqionN0ebHFZIDAp+iGw==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/rrule/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/rrweb-cssom": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
       "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
       "dev": true
     },
-    "node_modules/run-applescript": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
-      "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
-      "dev": true,
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/run-applescript/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/run-applescript/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/run-applescript/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8118,13 +8161,13 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
-      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz",
+      "integrity": "sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.5",
+        "get-intrinsic": "^1.2.2",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -8135,27 +8178,38 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/safe-array-concat/node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
-    },
     "node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -8166,15 +8220,14 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/saxes": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "dev": true,
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
       "engines": {
-        "node": ">=v12.22.7"
+        "node": ">=10"
       }
     },
     "node_modules/scheduler": {
@@ -8194,6 +8247,22 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
+      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "dependencies": {
+        "define-data-property": "^1.1.2",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-function-name": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
@@ -8229,7 +8298,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -8241,7 +8309,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8256,13 +8323,17 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
+      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8275,10 +8346,15 @@
       "dev": true
     },
     "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
     "node_modules/slash": {
       "version": "3.0.0",
@@ -8308,9 +8384,9 @@
       }
     },
     "node_modules/spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
       "dev": true
     },
     "node_modules/spdx-expression-parse": {
@@ -8324,9 +8400,9 @@
       }
     },
     "node_modules/spdx-license-ids": {
-      "version": "3.0.16",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.16.tgz",
-      "integrity": "sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==",
+      "version": "3.0.17",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.17.tgz",
+      "integrity": "sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==",
       "dev": true
     },
     "node_modules/stackback": {
@@ -8336,26 +8412,26 @@
       "dev": true
     },
     "node_modules/stackblur-canvas": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
-      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
       "optional": true,
       "engines": {
         "node": ">=0.1.14"
       }
     },
     "node_modules/std-env": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.4.3.tgz",
-      "integrity": "sha512-f9aPhy8fYBuMN+sNfakZV18U39PbalgjXG3lLB9WkaYTxijru61wb57V9wxxNthXM5Sd88ETBWi29qLAsHO52Q==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
       "dev": true
     },
     "node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "dependencies": {
-        "safe-buffer": "~5.1.0"
+        "safe-buffer": "~5.2.0"
       }
     },
     "node_modules/string-width": {
@@ -8371,6 +8447,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.padend": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.5.tgz",
@@ -8444,6 +8534,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -8490,13 +8592,13 @@
       }
     },
     "node_modules/sucrase": {
-      "version": "3.34.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
-      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
-        "glob": "7.1.6",
+        "glob": "^10.3.10",
         "lines-and-columns": "^1.1.6",
         "mz": "^2.7.0",
         "pirates": "^4.0.1",
@@ -8507,7 +8609,7 @@
         "sucrase-node": "bin/sucrase-node"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=16 || 14 >=14.17"
       }
     },
     "node_modules/sucrase/node_modules/commander": {
@@ -8519,19 +8621,21 @@
       }
     },
     "node_modules/sucrase/node_modules/glob": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": "*"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -8590,13 +8694,13 @@
       "dev": true
     },
     "node_modules/synckit": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
-      "integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
+      "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
       "dev": true,
       "dependencies": {
-        "@pkgr/utils": "^2.3.1",
-        "tslib": "^2.5.0"
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
@@ -8605,26 +8709,20 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/synckit/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
-    },
     "node_modules/tailwindcss": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
+      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
         "chokidar": "^3.5.3",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
-        "fast-glob": "^3.2.12",
+        "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.18.2",
+        "jiti": "^1.19.1",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
@@ -8648,22 +8746,22 @@
       }
     },
     "node_modules/tailwindcss-patch": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss-patch/-/tailwindcss-patch-2.2.2.tgz",
-      "integrity": "sha512-YYVCj+05+O+pxHXV7kAnRd5OFCY3KrfmG9IrcDCync4HuC6vCg+OUHbcsvooCaufmMeaG7VOkyKVaNfEH/EjAg==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss-patch/-/tailwindcss-patch-2.2.3.tgz",
+      "integrity": "sha512-UtCCGO2Fg4JgsBzmCAagTb+o75jGc8gUSbBd1/TiOX7alcmEo3+6r+BcJ3XU+8INo7CeMSsKiUTJyMlNbI8Pgg==",
       "dev": true,
       "dependencies": {
-        "@babel/generator": "^7.22.15",
-        "@babel/parser": "^7.22.16",
-        "@babel/traverse": "^7.22.19",
-        "@babel/types": "^7.22.19",
+        "@babel/generator": "^7.23.6",
+        "@babel/parser": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
         "@tailwindcss-mangle/config": "^2.2.2",
         "cac": "^6.7.14",
-        "jiti": "^1.20.0",
-        "lilconfig": "^2.1.0",
-        "postcss": "^8.4.29",
-        "resolve": "^1.22.5",
-        "semver": "^7.5.4"
+        "jiti": "^1.21.0",
+        "lilconfig": "^3.0.0",
+        "postcss": "^8.4.34",
+        "resolve": "^1.22.8",
+        "semver": "^7.6.0"
       },
       "bin": {
         "tailwindcss-patch": "bin/tw-patch.js",
@@ -8678,6 +8776,18 @@
         }
       }
     },
+    "node_modules/tailwindcss-patch/node_modules/lilconfig": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
+      "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
     "node_modules/tailwindcss-patch/node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -8691,9 +8801,9 @@
       }
     },
     "node_modules/tailwindcss-patch/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -8712,9 +8822,9 @@
       "dev": true
     },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "version": "6.0.15",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
+      "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -8755,31 +8865,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/tar-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/tar/node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "dev": true,
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/tar/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -8829,9 +8914,9 @@
       }
     },
     "node_modules/tinybench": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
-      "integrity": "sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.6.0.tgz",
+      "integrity": "sha512-N8hW3PG/3aOoZAN5V/NSAEDz0ZixDSSt5b/a05iqtpgfLWMSVuCo7w0k2vVvEjdrIoeGqZzweX2WlyioNIHchA==",
       "dev": true
     },
     "node_modules/tinypool": {
@@ -8844,26 +8929,14 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.0.tgz",
-      "integrity": "sha512-d2eda04AN/cPOR89F7Xv5bK/jrQEhmcLFe6HFldoeO9AJtps+fqEnh486vnT/8y4bw38pSyxDcTCAq+Ks2aJTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
       }
     },
-    "node_modules/titleize": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
-      "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/tmp": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -8931,12 +9004,12 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
-      "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz",
+      "integrity": "sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==",
       "dev": true,
       "engines": {
-        "node": ">=16.13.0"
+        "node": ">=16"
       },
       "peerDependencies": {
         "typescript": ">=4.2.0"
@@ -8971,16 +9044,11 @@
         "node": ">=8"
       }
     },
-    "node_modules/ts-invariant/node_modules/tslib": {
+    "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
-    "node_modules/tslib": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
-      "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
-    },
     "node_modules/turndown": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/turndown/-/turndown-7.1.2.tgz",
@@ -9023,14 +9091,14 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.1.tgz",
+      "integrity": "sha512-RSqu1UEuSlrBhHTWC8O9FnPjOduNs4M7rJ4pRKoEjtx1zUNOPN2sSXHLDX+Y2WPbHIxbvg4JFo2DNAEfPIKWoQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9055,16 +9123,17 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-tcqKMrTRXjqvHN9S3553NPCaGL0VPgFI92lXszmrE8DMhiDPLBYLlvo8Uu4WZAAX/aGqp/T1sbA4ph8EWjDF9Q==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.6",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
         "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9101,9 +9170,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.1.tgz",
-      "integrity": "sha512-uY/99gMLIOlJPwATcMVYfqDSxUR9//AUcgZMzwfSTJPDKzA1S8mX4VLqa+fiAtveraQUBCz4FFcwVZBGbwBXIw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz",
+      "integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
       "dev": true
     },
     "node_modules/unbox-primitive": {
@@ -9121,6 +9190,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "devOptional": true
+    },
     "node_modules/universalify": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
@@ -9131,15 +9206,15 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.5.1.tgz",
-      "integrity": "sha512-0QkvG13z6RD+1L1FoibQqnvTwVBXvS4XSPwAyinVgoOCl2jAgwzdUKmEj05o4Lt8xwQI85Hb6mSyYkcAGwZPew==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.7.1.tgz",
+      "integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.11.2",
+        "acorn": "^8.11.3",
         "chokidar": "^3.5.3",
         "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.0"
+        "webpack-virtual-modules": "^0.6.1"
       }
     },
     "node_modules/unplugin-tailwindcss-mangle": {
@@ -9155,15 +9230,6 @@
         "unplugin": "^1.5.0"
       }
     },
-    "node_modules/untildify": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
-      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/unzipper": {
       "version": "0.10.14",
       "resolved": "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz",
@@ -9181,6 +9247,38 @@
         "setimmediate": "~1.0.4"
       }
     },
+    "node_modules/unzipper/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/unzipper/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/unzipper/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/unzipper/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -9344,9 +9442,9 @@
       }
     },
     "node_modules/vite-plugin-css-injected-by-js": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.3.0.tgz",
-      "integrity": "sha512-xG+jyHNCmUqi/TXp6q88wTJGeAOrNLSyUUTp4qEQ9QZLGcHWQQsCsSSKa59rPMQr8sOzfzmWDd8enGqfH/dBew==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.4.0.tgz",
+      "integrity": "sha512-wS5+UYtJXQ/vNornsqTQxOLBVO/UjXU54ZsYMeX0mj2OrbStMQ4GLgvneVDQGPwyGJcm/ntBPawc2lA7xx+Lpg==",
       "peerDependencies": {
         "vite": ">2.0.0-0"
       }
@@ -9429,52 +9527,35 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz",
+      "integrity": "sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "node_modules/vue-component-type-helpers": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.4.tgz",
-      "integrity": "sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==",
-      "dev": true
-    },
-    "node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
+        "@vue/compiler-dom": "3.4.19",
+        "@vue/compiler-sfc": "3.4.19",
+        "@vue/runtime-dom": "3.4.19",
+        "@vue/server-renderer": "3.4.19",
+        "@vue/shared": "3.4.19"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
+        "typescript": "*"
       },
       "peerDependenciesMeta": {
-        "@vue/composition-api": {
+        "typescript": {
           "optional": true
         }
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-1.8.27.tgz",
+      "integrity": "sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==",
+      "dev": true
+    },
     "node_modules/vue-eslint-parser": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
-      "integrity": "sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==",
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",
+      "integrity": "sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -9508,9 +9589,9 @@
       }
     },
     "node_modules/vue-eslint-parser/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -9543,9 +9624,9 @@
       }
     },
     "node_modules/vue-tailwind-datepicker": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.1.tgz",
-      "integrity": "sha512-+X4f+JTUc65hemfm15R9I4lCgJ3ChwGJzVrbiS64qIDujrI6HnfPXk53r/uO6Li3inplkiAta1M/xyHuLCcU6w==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/vue-tailwind-datepicker/-/vue-tailwind-datepicker-1.6.5.tgz",
+      "integrity": "sha512-j6OpfNYD8ZNX8QUaek6ng0aVaUfNc2T1e+goZRLg07o72cmoCSlUfvPWYBYbbFe0hOXe1TLigWLunNoDT5K7zg==",
       "dependencies": {
         "@vueuse/core": "^10.5.0",
         "vite-plugin-css-injected-by-js": "^3.3.0"
@@ -9557,9 +9638,9 @@
       }
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.14",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
-      "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
@@ -9567,13 +9648,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.18",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.18.tgz",
-      "integrity": "sha512-AwQxBB9SZX308TLL1932P1JByuMsXC2jLfRBGt8SBdm1e3cXkDlFaXUAqibfKnoQ1ZC2zO2NSbeBNdSjOcdvJw==",
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
       "dev": true,
       "dependencies": {
-        "@vue/language-core": "1.8.18",
-        "@vue/typescript": "1.8.18",
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
         "semver": "^7.5.4"
       },
       "bin": {
@@ -9596,9 +9677,9 @@
       }
     },
     "node_modules/vue-tsc/node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -9690,7 +9771,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -9718,16 +9798,16 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
-      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.14.tgz",
+      "integrity": "sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.6",
+        "call-bind": "^1.0.5",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9768,6 +9848,53 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -9804,9 +9931,9 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/ws": {
-      "version": "8.14.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",
-      "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -9853,9 +9980,9 @@
       "dev": true
     },
     "node_modules/yaml": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
-      "integrity": "sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
+      "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==",
       "engines": {
         "node": ">= 14"
       }
@@ -9942,38 +10069,6 @@
       "engines": {
         "node": ">= 10"
       }
-    },
-    "node_modules/zip-stream/node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/zip-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 5cd537e..d547729 100755
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@vue/apollo-components": "^4.0.0",
     "@vue/apollo-composable": "^4.0.1",
     "@vue/apollo-option": "^4.0.0",
+    "@vueform/multiselect": "^2.6.6",
     "axios": "^1.6.7",
     "devextreme": "23.1.5",
     "devextreme-vue": "23.1.5",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 50c023a..c163ba1 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -50,6 +52,8 @@ html {
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -567,10 +577,26 @@ select {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
+@media (forced-colors: active)  {
+  [type='radio']:checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -585,6 +611,14 @@ select {
   background-repeat: no-repeat;
 }
 
+@media (forced-colors: active)  {
+  [type='checkbox']:indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
 [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
@@ -705,6 +739,40 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 html {
   height: 100%;
   --tw-bg-opacity: 1;
@@ -883,6 +951,10 @@ body {
   visibility: visible;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .static {
   position: static;
 }
@@ -912,14 +984,30 @@ body {
   bottom: 0px;
 }
 
+.-bottom-px {
+  bottom: -1px;
+}
+
 .-left-2 {
   left: -0.5rem;
 }
 
+.-left-px {
+  left: -1px;
+}
+
+.-right-px {
+  right: -1px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
 
+.bottom-auto {
+  bottom: auto;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -960,6 +1048,10 @@ body {
   top: 100%;
 }
 
+.top-px {
+  top: 1px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -984,6 +1076,37 @@ body {
   grid-column: span 7 / span 7;
 }
 
+.-m-px {
+  margin: -1px;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
+.m-3 {
+  margin: 0.75rem;
+}
+
+.m-3\.5 {
+  margin: 0.875rem;
+}
+
+.mx-0 {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.mx-0\.5 {
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+}
+
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1017,6 +1140,14 @@ body {
   margin-right: -3rem;
 }
 
+.-mt-px {
+  margin-top: -1px;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1065,6 +1196,14 @@ body {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-3\.5 {
+  margin-right: 0.875rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1109,6 +1248,14 @@ body {
   margin-top: 1.5rem;
 }
 
+.box-border {
+  box-sizing: border-box;
+}
+
+.box-content {
+  box-sizing: content-box;
+}
+
 .line-clamp-1 {
   overflow: hidden;
   display: -webkit-box;
@@ -1160,6 +1307,10 @@ body {
   height: 4rem;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1213,6 +1364,10 @@ body {
   height: 100%;
 }
 
+.h-px {
+  height: 1px;
+}
+
 .h-screen-80 {
   height: 80vh;
 }
@@ -1265,6 +1420,18 @@ body {
   width: 4rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-2\.5 {
+  width: 0.625rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -1313,6 +1480,14 @@ body {
   width: 100%;
 }
 
+.w-px {
+  width: 1px;
+}
+
+.min-w-0 {
+  min-width: 0px;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1321,6 +1496,10 @@ body {
   max-width: 80rem;
 }
 
+.max-w-full {
+  max-width: 100%;
+}
+
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1337,6 +1516,10 @@ body {
   flex: none;
 }
 
+.flex-shrink {
+  flex-shrink: 1;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1349,6 +1532,10 @@ body {
   flex-grow: 1;
 }
 
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
 .grow {
   flex-grow: 1;
 }
@@ -1367,6 +1554,11 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-full {
+  --tw-translate-y: -100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1392,6 +1584,11 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-full {
+  --tw-translate-y: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-180 {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1427,6 +1624,10 @@ body {
   cursor: default;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1442,6 +1643,16 @@ body {
   scroll-padding-bottom: 0.5rem;
 }
 
+.list-none {
+  list-style-type: none;
+}
+
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .auto-cols-auto {
   grid-auto-columns: auto;
 }
@@ -1502,10 +1713,6 @@ body {
   gap: 0.25rem;
 }
 
-.gap-2 {
-  gap: 0.5rem;
-}
-
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1605,12 +1812,24 @@ body {
   overflow-y: auto;
 }
 
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-normal {
+  white-space: normal;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1619,6 +1838,10 @@ body {
   white-space: pre-wrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1639,15 +1862,29 @@ body {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .rounded-xl {
   border-radius: 0.75rem;
 }
 
+.rounded-b {
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .rounded-b-2xl {
   border-bottom-right-radius: 1rem;
   border-bottom-left-radius: 1rem;
 }
 
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -1658,11 +1895,21 @@ body {
   border-bottom-right-radius: 9999px;
 }
 
+.rounded-t {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
 .rounded-t-2xl {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
 
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1723,11 +1970,6 @@ 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));
@@ -1738,6 +1980,11 @@ body {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1758,6 +2005,16 @@ body {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1808,6 +2065,10 @@ body {
   background-color: rgb(13 148 136 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-vtd-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(205 222 227 / var(--tw-bg-opacity));
@@ -1850,6 +2111,10 @@ body {
   --tw-bg-opacity: 0.05;
 }
 
+.bg-opacity-50 {
+  --tw-bg-opacity: 0.5;
+}
+
 .bg-opacity-60 {
   --tw-bg-opacity: 0.6;
 }
@@ -1862,10 +2127,30 @@ body {
   --tw-bg-opacity: 0.8;
 }
 
+.bg-multiselect-caret {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.bg-multiselect-remove {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 320 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3e%3c/path%3e%3c/svg%3e");
+}
+
+.bg-multiselect-spinner {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 512 512' fill='%2322c55e' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z'%3e%3c/path%3e%3c/svg%3e");
+}
+
 .bg-none {
   background-image: none;
 }
 
+.bg-center {
+  background-position: center;
+}
+
+.bg-no-repeat {
+  background-repeat: no-repeat;
+}
+
 .fill-gray-500 {
   fill: #6b7280;
 }
@@ -1907,10 +2192,6 @@ body {
   padding: 0px;
 }
 
-.p-0\.5 {
-  padding: 0.125rem;
-}
-
 .p-1 {
   padding: 0.25rem;
 }
@@ -1977,6 +2258,11 @@ body {
   padding-bottom: 0px;
 }
 
+.py-0\.5 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2022,6 +2308,16 @@ body {
   padding-bottom: 1.5rem;
 }
 
+.py-\[5px\] {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.py-px {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2046,6 +2342,10 @@ body {
   padding-left: 0.75rem;
 }
 
+.pl-3\.5 {
+  padding-left: 0.875rem;
+}
+
 .pr-10 {
   padding-right: 2.5rem;
 }
@@ -2054,10 +2354,22 @@ body {
   padding-right: 3rem;
 }
 
+.pr-16 {
+  padding-right: 4rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
 
+.pr-3 {
+  padding-right: 0.75rem;
+}
+
+.pr-3\.5 {
+  padding-right: 0.875rem;
+}
+
 .pr-4 {
   padding-right: 1rem;
 }
@@ -2098,6 +2410,10 @@ body {
   text-align: start;
 }
 
+.font-sans {
+  font-family: Plus Jakarta Sans, sans-serif;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2186,10 +2502,18 @@ body {
   line-height: 1;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .leading-relaxed {
   line-height: 1.625;
 }
 
+.leading-snug {
+  line-height: 1.375;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -2208,11 +2532,6 @@ 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));
@@ -2258,6 +2577,11 @@ body {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-100 {
+  --tw-text-opacity: 1;
+  color: rgb(220 252 231 / var(--tw-text-opacity));
+}
+
 .text-green-400 {
   --tw-text-opacity: 1;
   color: rgb(74 222 128 / var(--tw-text-opacity));
@@ -2323,6 +2647,10 @@ body {
   color: rgb(13 148 136 / var(--tw-text-opacity));
 }
 
+.text-transparent {
+  color: transparent;
+}
+
 .text-vtd-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2385,6 +2713,10 @@ body {
   opacity: 0.75;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2426,6 +2758,11 @@ body {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.outline-none {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .outline {
   outline-style: solid;
 }
@@ -2455,10 +2792,6 @@ 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));
@@ -2584,6 +2917,11 @@ body {
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
+.hover\:bg-black:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -2629,6 +2967,10 @@ body {
   background-color: rgb(255 255 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-opacity-10:hover {
+  --tw-bg-opacity: 0.1;
+}
+
 .hover\:text-primary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2639,6 +2981,10 @@ body {
   color: rgb(2 73 90 / var(--tw-text-opacity));
 }
 
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
+
 .focus\:border-0:focus {
   border-width: 0px;
 }
@@ -2835,53 +3181,15 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.group:hover .group-hover\:opacity-60 {
+  opacity: 0.6;
+}
+
 .peer:checked ~ .peer-checked\:text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:bg-opacity-50 {
-    --tw-bg-opacity: 0.5;
-  }
-
-  .dark\:text-vtd-primary-400 {
-    --tw-text-opacity: 1;
-    color: rgb(53 124 141 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-opacity-70 {
-    --tw-text-opacity: 0.7;
-  }
-
-  .dark\:hover\:text-vtd-primary-300:hover {
-    --tw-text-opacity: 1;
-    color: rgb(104 157 170 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus\:border-vtd-primary-500:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(3 91 113 / var(--tw-border-opacity));
-  }
-
-  .dark\:focus\:bg-opacity-50:focus {
-    --tw-bg-opacity: 0.5;
-  }
-
-  .dark\:focus\:text-vtd-primary-300:focus {
-    --tw-text-opacity: 1;
-    color: rgb(104 157 170 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus\:ring-opacity-20:focus {
-    --tw-ring-opacity: 0.2;
-  }
-
-  .dark\:focus\:ring-opacity-25:focus {
-    --tw-ring-opacity: 0.25;
-  }
-}
-
 @media (min-width: 640px) {
   .sm\:static {
     position: static;
@@ -3378,3 +3686,105 @@ body {
     line-height: 1.25rem;
   }
 }
+
+.rtl\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
+  left: auto;
+}
+
+.rtl\:right-0:where([dir="rtl"], [dir="rtl"] *) {
+  right: 0px;
+}
+
+.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.25rem;
+}
+
+.rtl\:ml-3:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.75rem;
+}
+
+.rtl\:ml-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0.875rem;
+}
+
+.rtl\:mr-0:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: 0px;
+}
+
+.rtl\:pl-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0px;
+}
+
+.rtl\:pl-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.5rem;
+}
+
+.rtl\:pl-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.75rem;
+}
+
+.rtl\:pl-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0.875rem;
+}
+
+.rtl\:pr-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0px;
+}
+
+.rtl\:pr-2:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.5rem;
+}
+
+.rtl\:pr-3:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.75rem;
+}
+
+.rtl\:pr-3\.5:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.875rem;
+}
+
+.rtl\:text-right:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-opacity-50 {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:text-vtd-primary-400 {
+    --tw-text-opacity: 1;
+    color: rgb(53 124 141 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-opacity-70 {
+    --tw-text-opacity: 0.7;
+  }
+
+  .dark\:hover\:text-vtd-primary-300:hover {
+    --tw-text-opacity: 1;
+    color: rgb(104 157 170 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:border-vtd-primary-500:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(3 91 113 / var(--tw-border-opacity));
+  }
+
+  .dark\:focus\:bg-opacity-50:focus {
+    --tw-bg-opacity: 0.5;
+  }
+
+  .dark\:focus\:text-vtd-primary-300:focus {
+    --tw-text-opacity: 1;
+    color: rgb(104 157 170 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:ring-opacity-20:focus {
+    --tw-ring-opacity: 0.2;
+  }
+
+  .dark\:focus\:ring-opacity-25:focus {
+    --tw-ring-opacity: 0.25;
+  }
+}
diff --git a/src/components/Button.vue b/src/components/Button.vue
index 3343109..7625e73 100755
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -45,6 +45,7 @@ const buttonStyle = computed(() => {
 })
 
 const emit = defineEmits(['on:click'])
+
 </script>
 
 <template>
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index e990d36..a68317b 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -12,7 +12,31 @@ const formatter = ref({
 })
 
 const emit = defineEmits(['update:dateValue'])
-
+const customShortcuts = () => {
+  return [
+    {
+      label: "Last 15 Days",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setDate(date.getDate() + 1)), date];
+      },
+    },
+    {
+      label: "Last Years",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
+      },
+    },
+    {
+      label: "Last 3 Years",
+      atClick: () => {
+        const date = new Date();
+        return [new Date(date.setFullYear(date.getFullYear() - 3)), new Date()];
+      },
+    },
+  ];
+};
 watch(dateValue, (newValue) => {
   emit('update:dateValue', newValue)
 })
@@ -24,7 +48,7 @@ watch(dateValue, (newValue) => {
       v-model="dateValue"
       :formatter="formatter"
       separator=" s/d "
-      :shortcuts="false"
+      :shortcuts="customShortcuts"
       :auto-apply="false"
       as-single
       use-range
diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
index 8adf19a..09a8b95 100755
--- a/src/components/Form/Filters.vue
+++ b/src/components/Form/Filters.vue
@@ -2,19 +2,10 @@
 <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
-  }
-})
 
-const emit = defineEmits(['runSearch'])
+const emit = defineEmits(['runSearch','resetForm'])
 </script>
 
 <template>
@@ -26,7 +17,7 @@ const emit = defineEmits(['runSearch'])
     <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)"
+          @on:click="() => emit('resetForm')"
           label="Ulangi"
           style-type="outline"
           class-name="bg-white"
@@ -35,11 +26,10 @@ const emit = defineEmits(['runSearch'])
         </Button>
 
         <Button
-          v-if="reportButton"
           label="Lihat Laporan"
           style-type="outline"
           class-name="bg-white"
-        >
+        > 
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 6e171ff..6efc4f7 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -10,6 +10,12 @@ import {
   itemsPosko
 } from './reference'
 
+const props = defineProps({
+  runReset: {
+    type: Boolean,
+    required: true
+  }
+});
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@@ -17,7 +23,7 @@ const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const up3 = ref({ id: 0, name: up3laceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +46,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -49,7 +55,20 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
-
+watch(() => props.runReset, (value) => {
+  if (value) {
+    uid.value = { id: 0, name: uidPlaceholder }
+    up3.value = { id: 0, name: up3laceholder }
+    posko.value = { id: 0, name: poskoPlaceholder }
+    data.value.periode = ''
+    data.value = {
+      uid: uid.value,
+      up3: up3.value,
+      posko: posko.value,
+      periode: ''
+    }
+  }
+})
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -58,17 +77,13 @@ onMounted(() => {
 
 <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 :data="itemsUid" @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="up3" :placeholder="up3laceholder" />
   </div>
@@ -82,8 +97,8 @@ onMounted(() => {
   <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 @update:date-value="(value) => {
-        data.periode = value
-      }
+      data.periode = value
+    }
       " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index d495e4b..78ccdcb 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -77,6 +77,6 @@ onMounted(() => {
     <InlineRadioGroup @update:group-value="(value) => {
       data.group = value
       console.log('data.group', value)
-    }" :radio-items="[{ id: 1, title: 'Tidak', checked: true }, { id: 2, title: 'Ya, Grupkan' }]" />
+    }" :radio-items="[{ id: 1, title: 'Tidak' }, { id: 2, title: 'Ya, Grupkan' }]" />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
index ebdab50..bbef3e6 100755
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -1,41 +1,63 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { ref } from 'vue';
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import { onMounted, ref } from 'vue';
+const uidPlaceholder = 'Semua Distribusi/Wilayah';
+const up3Placeholder = 'Semua Area';
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: "", name: ulpPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
-  posko: ulp.value,
+  up3: up3.value,
+  posko: posko.value,
   periode: '',
-  group: 1
 })
+const setUid = (value: any) => {
+  uid.value = value;
+  selectedUid(value);
+  up3.value = { id: 0, name: up3Placeholder };
+  data.value.uid = value;
+};
 
+const setUp3 = (value: any) => {
+  up3.value = value;
+  selectedUp3Posko(value);
+  posko.value = { id: 0, name: poskoPlaceholder };
+  data.value.up3 = value;
+};
+
+const setPosko = (value: any) => {
+  posko.value = value;
+  selectedPosko(value);
+  data.value.posko = value;
+};
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </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">Distribusi/Wilayah:</label>
-
-    <Select placeholder="Semua Distribusi/Wilayah" />
+    <Select :data="itemsUid" @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">Area:</label>
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
 
-    <Select placeholder="Semua Area" />
   </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 placeholder="Semua Posko" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index d314b3f..ad275f9 100755
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -19,7 +19,7 @@ const poskoPlaceholder = 'Semua Posko'
 const mediaPlaceholder = 'Semua Media'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const media = ref({ id: 0, name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
@@ -44,7 +44,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index fd8c3ab..1a418fa 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -1,17 +1,16 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
 import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
-fetchData();
+fetchUid();
 
-const departments = [
-    { id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
-    { id: 2, name: 'HR', contact: 'Kenton Towne' },
-    { id: 3, name: 'Sales', contact: 'Therese Wunsch' },
-    { id: 4, name: 'Finance', contact: 'Benedict Kessler' },
-    { id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
+const jenisTransakasi = [
+    { id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
+    { id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM',  }, 
+    { id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM',  },  
+    { id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev'  },
   ]
 
 </script>
@@ -38,12 +37,15 @@ const departments = [
   <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">Jenis Transaksi:</label>
 
-    <SelectMulti :data="departments" placeholder="Semua Jenis Transaksi" />
+    <SelectMulti 
+      :tags="jenisTransakasi" 
+      placeholder="Semua Jenis Transaksi" 
+      useLabel 
+      label="Jenis Transaksi"
+      />
   </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  />
   </div>
-</template> -->
-
-<template></template>
+</template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index a35f1db..75c42b8 100755
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -38,7 +38,7 @@ const setUlp = (value: any) => {
 };
 onMounted(() => {
   emit('update:filters', data.value)
-  fetchUid()
+  // fetchUid()
 })
 </script>
 
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index d72c584..f1a85c4 100755
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -17,7 +17,7 @@ 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: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -40,7 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 88945bb..45a3b76 100755
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -10,7 +10,7 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: "", name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -30,7 +30,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index bc14453..51d2ae9 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -12,14 +12,14 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
 const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: "", name: poskoPlaceholder });
+const posko = ref({ id: 0, name: poskoPlaceholder });
 const data = ref({
   uid: uid.value,
   up3: up3.value,
   posko: posko.value,
   periode: '',
-  minTime: 1,
-  maxTime: 1
+  minTime: useTotalDuration().getDataMin().split(' ')[0],
+  maxTime: useTotalDuration().getDataMax().split(' ')[0]
 })
 const setUid = (value: any) => {
   uid.value = value
@@ -31,7 +31,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -40,8 +40,6 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
-
-
 const sla = [
   {
     id: 1,
@@ -53,28 +51,32 @@ const sla = [
   }
 
 ]
+
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
+  useTotalDuration().setDataMin(value)
+
 }
 const setMax = (value: any) => {
   data.value.maxTime = value
+  useTotalDuration().setDataMax(value)
 }
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
+    setMin("1 Menit")
+    setMax("5 Menit")
     console.log('Durasi Menit')
-    data.value.minTime = 0
-    data.value.maxTime = 5
     triggerInput.value = false
   } else if (value.id === 1) {
-    data.value.minTime = 0
-    data.value.maxTime = 45
+    setMin("1 Menit")
+    setMax("45 Menit")
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    data.value.minTime = 46
-    data.value.maxTime = 99999 * 60 * 24
+    setMin("45 Menit")
+    setMax(99999 * 60 * 24+ ' Menit')
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
@@ -123,9 +125,12 @@ onMounted(() => {
       <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix @default-value="data.minTime" @update:menit-value="setMin($event)" />
+        <InputWithSuffix 
+        :value="`${data.minTime} Menit`"
+         />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix @default-value="data.maxTime" @update:menit-value="setMax($event)" />
+        <InputWithSuffix 
+        :value="`${data.maxTime} Menit`"/>
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index d79661a..d80c165 100755
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -16,7 +16,7 @@ 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: "", name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -39,7 +39,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index 0d86c92..88ec1e9 100755
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -42,7 +42,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: "", name: poskoPlaceholder }
+  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
index a017791..b7aef2e 100755
--- a/src/components/Form/InlineRadioGroup.vue
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -5,7 +5,8 @@
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
           <input v-model="groupValue" 
             type="radio" name="radio"
-            :checked="item.checked" @change="onChange(item)"
+            :checked="itemSelected.id === item.id ? true : false"
+            @change="onChange(item)"
             class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
           <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
             item.title }}</label>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index 2b9b5c0..d2e85a3 100755
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -14,17 +14,21 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
-  defaultValue: {
+  value: {
     type: String,
     default: '1 Menit'
   }
  
 })
-const emit = defineEmits(['update:menitValue'])
-const menitValue = ref(props.defaultValue)
-watch(menitValue, (newValue) => {
-  emit('update:menitValue', newValue)
-})
+const handleInput = (e :any) => {
+  e.value = e.value.replace(/[^0-9.]/g, '')
+}
+const handleBlur = (e :any) => {
+  e.value = e.value ? e.value + ' Menit' : ''
+}
+const handleFocus = (e:any) => {
+  e.value = e.value.replace(/[^0-9.]/g, '')
+}
 </script>
 
 <template>
@@ -32,7 +36,7 @@ watch(menitValue, (newValue) => {
  
   class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
-      v-model="menitValue"
+     :value="props.value"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
@@ -40,12 +44,10 @@ watch(menitValue, (newValue) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
-      :defaultValue="props.defaultValue"
-      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
-      onblur="this.value = this.value ? this.value + ' Menit' : ''"
-      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
-      class="w-full 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
-      "
+      @oninput="handleInput($event)"
+      @onblur="handleBlur($event)"
+      @onfocus="handleFocus($event)"
+      class="w-full 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"
     />
   </div>
 </template>
diff --git a/src/components/Pages/Anomali/Table_61.vue b/src/components/Pages/Anomali/Table_61.vue
index f18c375..0b228f8 100755
--- a/src/components/Pages/Anomali/Table_61.vue
+++ b/src/components/Pages/Anomali/Table_61.vue
@@ -1,18 +1,24 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
         </h1>
     </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
-        :word-wrap-enabled="true">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+        :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+        @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+        column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        <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" />
         <DxColumnFixing :enabled="true" />
@@ -111,11 +117,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable2 } from '.'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const loading = ref(false)
+const data = ref<any[]>([])
+
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -150,11 +161,70 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_62.vue b/src/components/Pages/Anomali/Table_62.vue
index 1e82b6e..6d04224 100755
--- a/src/components/Pages/Anomali/Table_62.vue
+++ b/src/components/Pages/Anomali/Table_62.vue
@@ -4,7 +4,7 @@
             Laporan Pengaduan PLN Mobile
         </h1>
     </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
         :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
         @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
@@ -48,6 +48,7 @@ const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
diff --git a/src/components/Pages/Anomali/Table_63.vue b/src/components/Pages/Anomali/Table_63.vue
index 5d68a22..220ba55 100755
--- a/src/components/Pages/Anomali/Table_63.vue
+++ b/src/components/Pages/Anomali/Table_63.vue
@@ -1,4 +1,10 @@
 <template>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
@@ -11,66 +17,70 @@
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        <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" />
         <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
-            <DxColumn :width="170" alignment="center" data-field="" caption="a" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="total_petugas" caption="a"
+                css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Total Petugas Yang Pengaduan Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="c" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+                    caption="d=b+c" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="% Petugas Yang Pengaduan Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="e=b/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_marking" data-type="number"
+                        caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_pln_mobile_non_marking" data-type="number"
+                        caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="f=c/a" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123_marking"
+                        data-type="number" caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center"
+                        data-field="total_penyelesaian_petugas_anomali_cc_123_non_marking" data-type="number"
+                        caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="g=e+f" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Marking"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Non Marking"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_marking"
+                        data-type="number" caption="Marking" css-class="custom-table-column" />
+                    <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_non_marking"
+                        data-type="number" caption="Non Marking" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxColumn>
     </DxDataGrid>
 
-    <AnomaliTable4 />
+    <AnomaliTable4 :filters-detail="filters" />
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -79,11 +89,16 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable4 } from '.'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { Type4 } from '@/components/Form/FiltersType'
+import Filters from '@/components/Form/Filters.vue'
+
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -118,12 +133,76 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const GET_laporanAnomaliPenangananPengaduanGangguanPetugas = gql`
+  query laporanAnomaliPenangananPengaduanGangguanPetugas($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliPenangananPengaduanGangguanPetugas(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+    ) {
+        nama_posko
+        persen_penyelesaian_petugas_anomali_cc_123_marking
+        persen_penyelesaian_petugas_anomali_cc_123_non_marking
+        persen_penyelesaian_petugas_anomali_marking
+        persen_penyelesaian_petugas_anomali_non_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_marking
+        persen_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_penyelesaian_petugas_anomali_cc_123_marking
+        total_penyelesaian_petugas_anomali_cc_123_non_marking
+        total_penyelesaian_petugas_anomali_marking
+        total_penyelesaian_petugas_anomali_non_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_marking
+        total_penyelesaian_petugas_anomali_pln_mobile_non_marking
+        total_petugas
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                        total_penyelesaian_petugas_anomali_cc_123: item.total_penyelesaian_petugas_anomali_cc_123_marking + item.total_penyelesaian_petugas_anomali_cc_123_non_marking,
+                        total_penyelesaian_petugas_anomali_pln_mobile: item.total_penyelesaian_petugas_anomali_pln_mobile_marking + item.total_penyelesaian_petugas_anomali_pln_mobile_non_marking,
+                        total_penyelesaian_petugas_anomali: item.total_penyelesaian_petugas_anomali_marking + item.total_penyelesaian_petugas_anomali_non_marking,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanAnomaliPenangananPengaduanGangguanPetugas,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_64.vue b/src/components/Pages/Anomali/Table_64.vue
index 0cec0aa..47baed2 100755
--- a/src/components/Pages/Anomali/Table_64.vue
+++ b/src/components/Pages/Anomali/Table_64.vue
@@ -4,54 +4,56 @@
             Laporan Pengaduan PLN Mobile
         </h1>
     </div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
-        :word-wrap-enabled="true">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+        :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+        @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+        column-resizing-mode="widget" :word-wrap-enabled="true">
         <DxSelection mode="single" />
         <DxPaging :enabled="false" />
         <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-           <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+        <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" />
         <DxColumnFixing :enabled="true" />
 
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
-        <DxColumn :width="170" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            css-class="custom-table-column" />
+        <DxColumn :width="170" alignment="center" data-field="nama_petugas" caption="Nama Petugas"
+            css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
             <DxColumn alignment="center" caption="(PLN Mobile, CC123, DLL)" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+                <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="a"
                     css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
             css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="b" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="c" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="total_penyelesaian_petugas_anomali" data-type="number"
+                    caption="d=b+c" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
             <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=b/a"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_pln_mobile"
+                    data-type="number" caption="e=b/a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f=c/a"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali_cc_123"
+                    data-type="number" caption="f=c/a" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g=e+f"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penyelesaian_petugas_anomali"
+                    data-type="number" caption="g=e+f" css-class="custom-table-column" />
             </DxColumn>
         </DxColumn>
 
@@ -59,6 +61,12 @@
 </template>
 
 <script setup lang="ts">
+defineProps({
+    filtersDetail: {
+        type: Object as PropType<any>,
+        required: true
+    }
+})
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -66,12 +74,18 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { ref } from 'vue'
+import { ref, watch, type PropType } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const loading = ref(true)
+const data = ref<any[]>([])
+const filtersDetail = ref({}); // Declare the 'filters' variable
+watch(() => filtersDetail.value, (newValue) => { // Access the 'value' property of the 'filters' ref
+    filterData(newValue)
+}, { immediate: true })
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -105,5 +119,68 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
     console.log(data)
 }
+const laporanAnomaliDetailPetugasPenangananPengaduanGangguan = gql`
+  query laporanAnomaliDetailPetugasPenangananPengaduanGangguan($dateFrom: Date!, 
+  $dateTo: Date!, $jenisLaporan: Int, $idUid: Int, $idUp3: Int,$posko: String) {
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      jenisLaporan :$jenisLaporan
+      idUid: $idUid
+      idUp3: $idUp3
+      posko: $posko
+
+    ) {
+        nama_petugas
+        nama_posko
+        persen_penyelesaian_petugas_anomali
+        persen_penyelesaian_petugas_anomali_cc_123
+        persen_penyelesaian_petugas_anomali_pln_mobile
+        total_penyelesaian_petugas_anomali
+        total_penyelesaian_petugas_anomali_cc_123
+        total_penyelesaian_petugas_anomali_pln_mobile
+        total_wo
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    laporanAnomaliDetailPetugasPenangananPengaduanGangguan,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
 
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_65.vue b/src/components/Pages/Anomali/Table_65.vue
index 3ba0150..c3daa3d 100755
--- a/src/components/Pages/Anomali/Table_65.vue
+++ b/src/components/Pages/Anomali/Table_65.vue
@@ -1,4 +1,10 @@
 <template>
+      <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type4 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div class="mt-4 lg:mt-6 max-w-7xl">
         <h1 class="text-xl font-medium md:text-2xl text-dark">
             Laporan Pengaduan Total
@@ -77,6 +83,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -87,11 +95,14 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { AnomaliTable6 } from '.'
+import { Type4 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
-const loading = ref(true)
+const data = ref<any[]>([])
 
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -127,11 +138,64 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-onMounted(() => {
-    const filters = useFiltersStore()
-
-    filters.setConfig({
-        type: 'type-4'
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
     })
-})
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Table_66.vue b/src/components/Pages/Anomali/Table_66.vue
index 1fb89be..d5b4532 100755
--- a/src/components/Pages/Anomali/Table_66.vue
+++ b/src/components/Pages/Anomali/Table_66.vue
@@ -35,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+import Filters from '@/components/Form/Filters.vue'
+
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -47,6 +49,7 @@ const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
+const data = ref<any[]>([])
 const loading = ref(false)
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Cico/Table_60.vue b/src/components/Pages/Cico/Table_60.vue
index 89f6bae..db9abfe 100755
--- a/src/components/Pages/Cico/Table_60.vue
+++ b/src/components/Pages/Cico/Table_60.vue
@@ -1,45 +1,47 @@
 <template>
-      <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type1 @update:filters="(value) => {
             filters = value
         }
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="200" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" caption="Personil Yantek"
+            <DxColumn :width="200" alignment="center" data-field="user_regu" caption="User Regu" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
                 caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
+            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
                 caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RPT WO Gangguan"
+            <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number" 
+            caption="Rata-rata RPT WO Gangguan"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Rata-rata RCT WO Gangguan"
+            <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number" caption="Rata-rata RCT WO Gangguan"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number" caption="Jumlah Wo Penugasan Khusus"
+            <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number" caption="Jumlah Wo Penugasan Khusus"
                 css-class="custom-table-column" />
-            <DxColumn :width="200" alignment="center" data-field="" data-type="number"
-                caption="Rata-rata Duarasi WO Penugasan" css-class="custom-table-column" />
+            <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_penugasan_khusus" data-type="number"
+                caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" />
 
         </DxDataGrid>
     </div>
 </template>
 
 <script setup lang="ts">
+
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
@@ -51,13 +53,18 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { Type1 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
+const data = ref<any[]>([])
 const showDetail = ref(false)
-const loading = ref(false)
+const showData = () => {
+    showDetail.value = true
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -86,14 +93,72 @@ const onExporting = (e: any) => {
         e.cancel = true
     }
 }
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
+    dataDetail.value = data
     console.log(data)
 }
 
-const filters = ref();
-const filterData = (filters: any) => {
-    console.log(filters)
+const GET_laporanCheckInCheckOut = gql`
+  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCheckInCheckOut(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+    avg_durasi_wo_gangguan_individual
+    avg_durasi_wo_penugasan_khusus
+    avg_rct_wo_gangguan_individual
+    avg_rpt_wo_gangguan_individual
+    jumlah_wo_gangguan_individual
+    jumlah_wo_penugasan_khusus
+    personil_yantek
+    user_regu
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCheckInCheckOut,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+
+
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Ctt/Table_67.vue b/src/components/Pages/Ctt/Table_67.vue
index a8ed96e..55e2492 100755
--- a/src/components/Pages/Ctt/Table_67.vue
+++ b/src/components/Pages/Ctt/Table_67.vue
@@ -1,5 +1,5 @@
 <template>
-   <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
         <Type3 @update:filters="(value) => {
             filters = value
         }
@@ -13,47 +13,47 @@
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
+                <DxColumn alignment="center"  caption="CC 123" css-class="custom-table-column">
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d=b+c"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e"
+                    <DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas" data-type="number" caption="e"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
+                    <DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
+                <DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
                     css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h"
+                <DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
                     css-class="custom-table-column" />
             </DxColumn>
 
@@ -73,13 +73,14 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import Filters from '@/components/Form/Filters.vue'
 import { Type3 } from '@/components/Form/FiltersType'
+import { useQuery } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const loading = ref(false)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -109,13 +110,74 @@ const onExporting = (e: any) => {
     }
 }
 
+const GET_laporanCttKwhPeriksa = gql`
+  query laporanCttKwhPeriksa($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+    laporanCttKwhPeriksa(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+        dlpd
+history_p2ti
+nama_posko
+rekomendasi_sistem_mendatangkan_petugas
+total_wo
+total_wo_cc123
+total_wo_comcen
+total_wo_loket
+total_wo_pln_mobile
+    }
+  }
+`
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        posko: posko ? posko.id : "",
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item,
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const { onResult, onError, loading, refetch } = useQuery(
+    GET_laporanCttKwhPeriksa,
+    {
+        dateFrom: new Date().toISOString().slice(0, 10),
+        dateTo: new Date().toISOString().slice(0, 10),
+        posko: '',
+        idUid: 0,
+        idUp3: 0
+    }
+)
+
 const onSelectionChanged = ({ selectedRowsData }: any) => {
     const data = selectedRowsData[0]
+    dataDetail.value = data
     console.log(data)
 }
-
-const filters = ref()
-const filterData = (filters: any) => {
-    console.log(filters)
+const showData = () => {
+    showDetail.value = true
 }
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 7153880..2e4a960 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,6 +1,6 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => {
+  <Filters @reset-form="runReset = !runReset" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 :run-reset="runReset" @update:filters="(value) => {
       filters = value
     }
       " />
@@ -12,15 +12,18 @@
       :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" />
+      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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="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="waktu_lapor"
@@ -31,13 +34,13 @@
         caption="Tgl Response" cell-template="data" />
       <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
         caption="Tgl Recovery" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_respon_time"
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_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"
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
         caption="Posko Awal" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
+      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
         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" />
@@ -125,14 +128,14 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko Awal:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" 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" />
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -188,7 +191,7 @@
         <h3 class="text-sm font-medium w-[170px] text-gray-800">
           Posko:
         </h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_asal" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
 
@@ -215,7 +218,6 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-
 import { useDialogStore } from '@/stores/dialog'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -230,24 +232,23 @@ const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-
+const runReset = ref(false)
 const closeDetail = () => {
   showDetail.value = false
 }
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
-
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5
+      indent: 100
     }).then(() => {
       doc.save(`.pdf`)
     })
   } else {
     const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
 
     exportToExcel({
       component: e.component,
@@ -255,7 +256,7 @@ const onExporting = (e: any) => {
       autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
       })
     })
 
@@ -264,7 +265,7 @@ const onExporting = (e: any) => {
 }
 
 const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
-  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
+  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
     daftarGangguanDialihkanKePoskoLain(
       dateFrom: $dateFrom
       dateTo: $dateTo
@@ -275,18 +276,18 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
+      waktu_lapor
       waktu_dialihkan
       waktu_recovery
       waktu_response
-      id_gangguan
       idpel_nometer
       keterangan_pelapor
       media
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko_asal
-      posko_tujuan
+      nama_posko_lama
+      nama_posko_baru
       status_akhir
       waktu_recovery
       waktu_response
@@ -299,7 +300,7 @@ const filterData = (params: any) => {
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
@@ -311,9 +312,7 @@ const filterData = (params: any) => {
           {
             ...item,
             pembuat_laporan: '-',
-            waktu_lapor: '-',
-            status_akhir: fetchStatus(item.status_akhir),
-            posko: item.posko_asal
+            posko: item.nama_posko_baru
           }
         ]
       })
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 4762d32..0e23194 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -6,7 +6,7 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 944e1d7..a7c2b28 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -19,7 +19,8 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
-
+            <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 :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
             <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
                 css-class="custom-table-column" :group-index="0" />
@@ -260,7 +261,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
     })
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 91c8a56..ff01389 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -188,7 +188,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
     })
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index 972c5ee..c5dd859 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -191,7 +191,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index 999e050..721ad0e 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -158,7 +158,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
     })
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 8a0c7f1..55934b5 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -124,7 +124,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index af32f15..1f4ed8e 100755
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -275,7 +275,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index 9b644a2..cef99ea 100755
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -205,7 +205,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index bb9a442..1be4a49 100755
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -181,7 +181,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index be56138..e3cfadb 100755
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -154,7 +154,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index bb3099d..4f0af4c 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -12,10 +12,10 @@
             column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-                v-if="loading" v-model:visible="loading" :enabled="true" />
+                v-if="loading" v-model:visible.sync="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="50" alignment="center"
@@ -240,7 +240,7 @@ const filterData = (params: any) => {
         maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index d92efe5..da26e38 100755
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -159,7 +159,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0,
     })
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index b4f672d..07b0f7f 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -11,7 +11,7 @@
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
             v-if="loading" v-model:visible="loading" :enabled="true" />
@@ -75,7 +75,7 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiResponseTime : minTime ? minTime : 0,
         maxDurasiResponseTime : maxTime ? maxTime : 1,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 42c5dc2..df5559c 100755
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -11,7 +11,7 @@
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
             v-if="loading" v-model:visible="loading" :enabled="true" />
@@ -75,7 +75,7 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
         maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index aaffbd3..f4201e9 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -11,7 +11,7 @@
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
             v-if="loading"  v-model:visible="loading" :enabled="true" />
@@ -108,7 +108,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index a06674a..18d9961 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -11,7 +11,7 @@
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
             v-if="loading"  v-model:visible="loading" :enabled="true"/>
@@ -103,7 +103,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
         media : media ? media.id : "Twitter"
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 7a93e1f..510e35f 100755
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -11,7 +11,7 @@
             :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-if="loading" v-model:visible="loading" :enabled="true" />
@@ -110,7 +110,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3?.id ? up3.id : 0,
     })
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index 18cdddd..07a33f0 100755
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -12,7 +12,7 @@
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 8700621..f429c1c 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -245,7 +245,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index f4f0a12..b12c5be 100755
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -5,15 +5,14 @@
         }
             " />
     </Filters>
-
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 42b5a58..84bbf01 100755
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index a62a677..6f3f64f 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 72f20c3..564ecc6 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 9881a3c..96447b1 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 16a0128..5be30e0 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :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"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 4def93a..8fed593 100755
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -5,14 +5,14 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
             <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 9ea8f91..721cf48 100755
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -5,7 +5,7 @@
             }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index 5b2d706..070748d 100755
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -5,7 +5,7 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index af36afa..9022484 100755
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -5,7 +5,7 @@
         }
             " />
     </Filters>
-    <div>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
             :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
diff --git a/src/components/Pages/Material/Table_68.vue b/src/components/Pages/Material/Table_68.vue
index 83ae7da..df61e76 100755
--- a/src/components/Pages/Material/Table_68.vue
+++ b/src/components/Pages/Material/Table_68.vue
@@ -11,30 +11,35 @@
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nomo_gangguan"
                 caption="Nomor Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_pelanggan"
                 caption="Nama Pelanggan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Isi Laporan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="isi_laporan"
+                caption="Isi Laporan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="penyebab_gangguan"
                 caption="Penyebab Gangguan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Padam" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="waktu_padam"
+                caption="Tgl Padam" />
             <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Tgl Nyala" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Regu" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="regu" caption="Regu" />
             <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Sumber" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber"
+                    caption="Sumber" />
                 <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Nama" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Satuan" />
-                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="" caption="Vol" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="satuan"
+                    caption="Satuan" />
+                <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="volume"
+                    caption="Vol" />
             </DxColumn>
 
         </DxDataGrid>
@@ -42,19 +47,81 @@
 </template>
 
 <script setup lang="ts">
+
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import Filters from '@/components/Form/Filters.vue';
 import { Type14 } from '@/components/Form/FiltersType';
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
-const filters = ref()
-const filterData = (filters: any) => {
-    console.log(filters)
+const data = ref<any[]>([])
+
+const daftarGangguanDanMaterialDipakai = gql`
+  query DaftardaftarGangguanDanMaterialDipakai(
+    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+  ) {
+    daftarGangguanDanMaterialDipakai(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        distribusi: $idUid
+        area: $idUp3
+        posko: $posko
+    ) {
+        isi_laporan
+        nama_material
+        nama_pelanggan
+        nomor_gangguan
+        penyebab_gangguan
+        regu
+        satuan
+        sumber
+        volume
+        waktu_padam
+
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    idUid: 0,
+    idUp3: 0,
+    posko: ''
+})
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+    const { posko, idUid, idUp3 } = params
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        posko: posko ? posko.id : "",
+
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Material/Table_69.vue b/src/components/Pages/Material/Table_69.vue
index c78aa91..fc70b3a 100755
--- a/src/components/Pages/Material/Table_69.vue
+++ b/src/components/Pages/Material/Table_69.vue
@@ -1,29 +1,35 @@
 <template>
-    <div>
+    <Filters @run-search="() => filterData(filters)" class="mb-4">
+        <Type14 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
+    <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center" data-field="" data-type="number"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="kode_material"
                 caption="Kode Material" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_material"
                 caption="Nama Material" />
-            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="" caption="Satuan" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field=""
+            <DxColumn css-class="custom-table-column" :width="120" alignment="center" data-field="satuan" caption="Satuan" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="sumber_material"
                 caption="Sumber Material" />
             <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
-                <DxColumn v-for="i in 31" css-class="custom-table-column" :width="150" alignment="center" data-field=""
-                    :caption="i" />
+                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
             </DxColumn>
 
         </DxDataGrid>
@@ -31,21 +37,106 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import { Type14 } from '@/components/Form/FiltersType';
+import Filters from '@/components/Form/Filters.vue';
+import { useQuery } from '@vue/apollo-composable';
+import gql from 'graphql-tag';
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
+const data = ref<any[]>([])
 
-onMounted(() => {
-    const filters = useFiltersStore()
+const rekapitulasiPemakaianMaterial = gql`
+  query DaftarrekapitulasiPemakaianMaterial(
+    $dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int
+  ) {
+    rekapitulasiPemakaianMaterial(
+        dateFrom: $dateFrom
+        dateTo: $dateTo
+        distribusi: $idUid
+        area: $idUp3
+        posko: $posko
+    ) {
+        kode_material
+nama_material
+satuan
+sumber_material
+tgl1
+tgl10
+tgl11
+tgl12
+tgl13
+tgl14
+tgl15
+tgl16
+tgl17
+tgl18
+tgl19
+tgl2
+tgl20
+tgl21
+tgl22
+tgl23
+tgl24
+tgl25
+tgl26
+tgl27
+tgl28
+tgl29
+tgl3
+tgl30
+tgl31
+tgl4
+tgl5
+tgl6
+tgl7
+tgl8
+tgl9
 
-    filters.setConfig({
-        type: 'type-14'
-    })
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    idUid: 0,
+    idUp3: 0,
+    posko: ''
 })
+const filterData = (params: any) => {
+    const dateValue = params.periode.split(' s/d ')
+
+    const { posko, idUid, idUp3 } = params
+
+    refetch({
+        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        dateTo: dateValue[1]? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        posko: posko ? posko.id : "",
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
+}
+const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_52.vue b/src/components/Pages/Monalisa/Table_52.vue
index d84877f..2facf6d 100755
--- a/src/components/Pages/Monalisa/Table_52.vue
+++ b/src/components/Pages/Monalisa/Table_52.vue
@@ -6,32 +6,34 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data"  :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <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" />
             <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Januari 2019" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+                css-class="custom-table-column" />
+            <DxColumn alignment="center" :caption="`${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
+                css-class="custom-table-column">
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="gangguan_bulan_lalu" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number" caption="Keluhan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_lalu" data-type="number"
+                        caption="Keluhan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_lalu" data-type="number"
+                        caption="Gangguan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_lalu" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
@@ -39,22 +41,22 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_lalu"
-                    data-type="number" />
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+                    data-field="total_komplain_bulan_lalu" data-type="number" />
             </DxColumn>
 
             <DxColumn alignment="center" caption="Januari 2020" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_ini" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="120" alignment="center" data-field="keluhan_bulan_lalu" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number" caption="Keluhan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number" caption="Gangguan"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="informasi_keluhan_bulan_ini" data-type="number"
+                        caption="Keluhan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="informasi_gangguan_bulan_ini" data-type="number"
+                        caption="Gangguan" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_bulan_ini" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
@@ -62,26 +64,26 @@
                     <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
-                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_komplain_bulan_ini"
-                    data-type="number" />
+                <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+                    data-field="total_komplain_bulan_ini" data-type="number" />
             </DxColumn>
             <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_keluhan" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_gangguan" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="delta_penurunan_informasi" data-type="number"
+                    caption="Informasi" css-class="custom-table-column" />
             </DxColumn>
             <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number" caption="Keluhan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number" caption="Gangguan"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number" caption="Informasi"
-                    css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number" caption="% Total"
-                    css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_keluhan" data-type="number"
+                    caption="Keluhan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_gangguan" data-type="number"
+                    caption="Gangguan" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_informasi" data-type="number"
+                    caption="Informasi" css-class="custom-table-column" />
+                <DxColumn :width="150" alignment="center" data-field="persen_penurunan_total" data-type="number"
+                    caption="% Total" css-class="custom-table-column" />
             </DxColumn>
 
         </DxDataGrid>
@@ -101,6 +103,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -108,6 +111,15 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+const tahunSekarang = ref(new Date().getFullYear())
+const bulanSekarang = ref(new Date().getMonth())
+if (bulanSekarang.value - 1 == 0) {
+    let bulanLalu = 12
+    let tahunLalu = tahunSekarang.value - 1
+} else {
+    let bulanLalu = bulanSekarang.value - 1
+    let tahunLalu = tahunSekarang.value
+}
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -137,8 +149,8 @@ const onExporting = (e: any) => {
     }
 }
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  console.log(data)
+    const data = selectedRowsData[0]
+    console.log(data)
 }
 const penurunanJumlahKomplainBulanan = gql`
   query DaftarpenurunanJumlahKomplainBulanan(
@@ -181,42 +193,42 @@ const penurunanJumlahKomplainBulanan = gql`
   }
 `
 const { onResult, onError, loading, refetch } = useQuery(penurunanJumlahKomplainBulanan, {
-  regional: '',
-  posko: '',
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
+    regional: '',
+    posko: '',
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+    const { regional, posko, idUid, idUp3, bulan, tahun } = params
 
-  refetch({
-    regional: regional,
-    posko: posko ? posko.id : "",
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
-    bulan: bulan ? bulan.id : 10,
-    tahun: bulan ? tahun.id : 2023
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-  })
-  onError((error) => {
-    console.log(error)
-  })
+    refetch({
+        regional: regional,
+        posko: posko ? posko.id : "",
+        idUid: idUid ? idUid.id : 0,
+        idUp3: idUp3 ? idUp3.id : 0,
+        bulan: bulan ? bulan.id : 10,
+        tahun: bulan ? tahun.id : 2023
+    })
+    onResult((queryResult) => {
+        if (queryResult.data != undefined) {
+            queryResult.data.penurunanJumlahKomplainBulanan.forEach((item: any) => {
+                data.value = [
+                    ...data.value,
+                    {
+                        ...item
+                    }
+                ]
+            })
+        }
+        console.log(queryResult.data)
+        console.log(queryResult.loading)
+        console.log(queryResult.networkStatus)
+    })
+    onError((error) => {
+        console.log(error)
+    })
 }
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Table_53.vue b/src/components/Pages/Monalisa/Table_53.vue
index b858457..1bbd5f4 100755
--- a/src/components/Pages/Monalisa/Table_53.vue
+++ b/src/components/Pages/Monalisa/Table_53.vue
@@ -71,6 +71,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
+const tahunSekarang = ref(new Date().getFullYear()) 
+const bulanSekarang = ref(new Date().getMonth())
+const tahunLalu = ref(tahunSekarang.value - 1)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
diff --git a/src/components/Pages/PencarianData/Table_71.vue b/src/components/Pages/PencarianData/Table_71.vue
index 4c4edbe..2d99817 100755
--- a/src/components/Pages/PencarianData/Table_71.vue
+++ b/src/components/Pages/PencarianData/Table_71.vue
@@ -11,7 +11,7 @@
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20, 'all']" display-mode="full"
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
                 :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
                <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
         v-if="loading" v-model:visible="loading" :enabled="true" />
diff --git a/src/components/SelectMulti.vue b/src/components/SelectMulti.vue
index 9f9294d..a42f7b6 100755
--- a/src/components/SelectMulti.vue
+++ b/src/components/SelectMulti.vue
@@ -1,107 +1,115 @@
 <script setup lang="ts">
-interface DataItem {
-  id: number;
-  name: string;
+
+import { type PropType } from 'vue'
+import Multiselect from '@vueform/multiselect'
+interface Tags {
+  id: number
+  value: string,
+  label: string
 }
 
-import { ref, computed, onMounted } from 'vue'
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-  TransitionRoot
-} from '@headlessui/vue'
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
-
-const props = defineProps({
+defineProps({
   placeholder: {
     type: String,
     default: ''
   },
-  data: {
-    type: Array as () => DataItem[],
-    default: []
+  tags: {
+    type: Array as PropType<Tags[]>,
+    required: true
+  },
+  useLabel: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: ''
   }
 })
-const emit = defineEmits(["update:selected"])
-
-const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
-
-let selected = ref<DataItem[]>([data.value[0]])
-let query = ref('')
-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, ''))
-    )
-)
-
-const show = ref(false)
- const removeJenis = (item: DataItem) => {
-    selected.value = selected.value.filter((i) => i.id !== item.id)
-  }
-onMounted(() => {
-})
-
-
 </script>
 
 <template>
-  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple>
-    <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="" />
-
-        <ComboboxButton id="Test" 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>
-      <span class="flex flex-wrap gap-2">
-        <span v-if="selected.length == 0" class="p-0.5">Empty</span>
-        <span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
-          <span>{{ item.name }}</span>
-          <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </span>
-      </span>
-      <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 }">
-                {{ 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 }">
-                <CheckIcon class="h-5 w-5" aria-hidden="true" />
-              </span>
-            </li>
-          </ComboboxOption>
-        </ComboboxOptions>
-      </TransitionRoot>
-    </div>
-  </Combobox>
-</template>
+  <div class="flex flex-col">
+    <Multiselect
+      mode="tags"
+      :placeholder="placeholder"
+      :close-on-select="false"
+      :searchable="true"
+      :create-option="true"
+      :options="tags"
+      :classes="{
+        container:
+          'relative py-[5px] mx-auto w-full flex items-center justify-end cursor-pointer rounded-lg  bg-gray-200 text-left text-base leading-snug outline-none',
+        containerDisabled: 'cursor-default bg-gray-50',
+        containerOpen: 'rounded-b-none',
+        containerOpenTop: 'rounded-t-none',
+        containerActive: '',
+        wrapper:
+          'relative mx-auto w-full flex items-center justify-end box-border cursor-pointer outline-none',
+        singleLabel:
+          'flex items-center h-full max-w-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 pr-16 box-border rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+        singleLabelText: 'overflow-ellipsis overflow-hidden block whitespace-nowrap max-w-full',
+        multipleLabel:
+          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+        search:
+          'w-full absolute inset-0 outline-none focus:ring-0 appearance-none box-border border-0 text-base font-sans bg-white rounded pl-3.5 rtl:pl-0 rtl:pr-3.5',
+        tags: 'flex-grow flex-shrink flex flex-wrap items-center mt-1 pl-2 min-w-0 rtl:pl-0 rtl:pr-2',
+        tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap min-w-0 rtl:pl-0 rtl:pr-2 rtl:mr-0 rtl:ml-1',
+        tagDisabled: 'pr-2 opacity-50 rtl:pl-2',
+        tagWrapper: 'whitespace-nowrap overflow-hidden overflow-ellipsis',
+        tagWrapperBreak: 'whitespace-normal break-all',
+        tagRemove:
+          'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-10 group',
+        tagRemoveIcon:
+          'bg-multiselect-remove bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
+        tagsSearchWrapper: 'inline-block relative mx-1 mb-1 flex-grow flex-shrink h-full',
+        tagsSearch:
+          ' bg-gray-200  absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base font-sans box-border w-full',
+        tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
+        placeholder:
+          'flex items-center text-sm h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-gray-400 rtl:left-auto rtl:right-0 rtl:pl-0 rtl:pr-3.5',
+        caret:
+          'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-10 opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none rtl:mr-0 rtl:ml-3.5',
+        caretOpen: 'rotate-180 pointer-events-auto',
+        clear:
+          'pr-3.5 relative z-10 opacity-40 transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80 rtl:pr-0 rtl:pl-3.5',
+        clearIcon:
+          'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
+        spinner:
+          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin flex-shrink-0 flex-grow-0 rtl:mr-0 rtl:ml-3.5',
+        infinite: 'flex items-center justify-center w-full',
+        infiniteSpinner:
+          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 animate-spin flex-shrink-0 flex-grow-0 m-3.5',
+        dropdown:
+          'max-h-60 absolute -left-px -right-px bottom-0 transform translate-y-full border border-gray-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b',
+        dropdownTop: '-translate-y-full top-px bottom-auto rounded-b-none rounded-t',
+        dropdownHidden: 'hidden',
+        options: 'flex flex-col p-0 m-0 list-none',
+        optionsTop: '',
+        group: 'p-0 m-0',
+        groupLabel:
+          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-gray-200 cursor-default leading-normal',
+        groupLabelPointable: 'cursor-pointer',
+        groupLabelPointed: 'bg-gray-300 text-gray-700',
+        groupLabelSelected: 'bg-green-600 text-white',
+        groupLabelDisabled: 'bg-gray-100 text-gray-300 cursor-not-allowed',
+        groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90',
+        groupLabelSelectedDisabled: 'text-green-100 bg-green-600 bg-opacity-50 cursor-not-allowed',
+        groupOptions: 'p-0 m-0',
+        option:
+          'flex items-center justify-start box-border text-left cursor-pointer text-base leading-snug py-2 px-3',
+        optionPointed: 'text-gray-800 bg-gray-100',
+        optionSelected: 'text-white bg-green-500',
+        optionDisabled: 'text-gray-300 cursor-not-allowed',
+        optionSelectedPointed: 'text-white bg-green-500 opacity-90',
+        optionSelectedDisabled: 'text-green-100 bg-green-500 bg-opacity-50 cursor-not-allowed',
+        noOptions: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
+        noResults: 'py-2 px-3 text-gray-600 bg-white text-left rtl:text-right',
+        fakeInput:
+          'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-none text-transparent',
+        assist: 'absolute -m-px w-px h-px overflow-hidden',
+        spacer: 'box-content'
+      }"
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/stores/totalDuration.ts b/src/stores/totalDuration.ts
index 81afbdb..eb80ec0 100755
--- a/src/stores/totalDuration.ts
+++ b/src/stores/totalDuration.ts
@@ -2,8 +2,8 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useTotalDuration = defineStore('totalDuration', () => {
-    const totalMin = ref(1)
-    const totalMax = ref(1)
+    const totalMin = ref("1 Menit")
+    const totalMax = ref("5 Menit")
     const setDataMin = (value: any) => {
         totalMin.value = value
     }
diff --git a/tailwind.config.js b/tailwind.config.js
index cf4fde5..7078f2c 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,102 +1,116 @@
 /** @type {import('tailwindcss').Config} */
-const colors = require("tailwindcss/colors")
+const svgToDataUri = require('mini-svg-data-uri')
+const colors = require('tailwindcss/colors')
 export default {
   content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-    "./src/**/**/*.{vue,js,ts,jsx,tsx}",
-    "./node_modules/vue-tailwind-datepicker/**/*.js"
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './src/**/**/*.{vue,js,ts,jsx,tsx}',
+    './node_modules/vue-tailwind-datepicker/**/*.js'
   ],
   theme: {
     extend: {
+      backgroundImage: (theme) => ({
+        'multiselect-caret': `url("${svgToDataUri(
+          `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>`
+        )}")`,
+        'multiselect-spinner': `url("${svgToDataUri(
+          `<svg viewBox="0 0 512 512" fill="${theme(
+            'colors.green.500'
+          )}" xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-10.052-13.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-30.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 5.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 8.042 232.792-4.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>`
+        )}")`,
+        'multiselect-remove': `url("${svgToDataUri(
+          `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path></svg>`
+        )}")`
+      }),
       fontFamily: {
-        sans: ['Plus Jakarta Sans', 'sans-serif'],
+        sans: ['Plus Jakarta Sans', 'sans-serif']
       },
       width: {
-        '266': '266px',
-        '320': '320px',
+        266: '266px',
+        320: '320px'
       },
       height: {
         'screen-80': '80vh'
       },
       colors: {
-        "vtd-primary": {
-          '50': '#e6eff1',
-          '100': '#cddee3',
-          '200': '#9abdc6',
-          '300': '#689daa',
-          '400': '#357c8d',
-          '500': '#035b71',
-          '600': '#02495a',
-          '700': '#02495a',
-          '800': '#01242d',
-          '900': '#011217',
+        'vtd-primary': {
+          50: '#e6eff1',
+          100: '#cddee3',
+          200: '#9abdc6',
+          300: '#689daa',
+          400: '#357c8d',
+          500: '#035b71',
+          600: '#02495a',
+          700: '#02495a',
+          800: '#01242d',
+          900: '#011217'
         },
-        'layout': '#F3F7F9',
-        'dark': '#151617',
-        'aside': '#2E3536',
-        'primary': {
-          '50': '#e6eff1',
-          '100': '#cddee3',
-          '200': '#9abdc6',
-          '300': '#689daa',
-          '400': '#357c8d',
-          '500': '#035b71',
-          '600': '#02495a',
-          '700': '#02495a',
-          '800': '#01242d',
-          '900': '#011217',
+        layout: '#F3F7F9',
+        dark: '#151617',
+        aside: '#2E3536',
+        primary: {
+          50: '#e6eff1',
+          100: '#cddee3',
+          200: '#9abdc6',
+          300: '#689daa',
+          400: '#357c8d',
+          500: '#035b71',
+          600: '#02495a',
+          700: '#02495a',
+          800: '#01242d',
+          900: '#011217'
         },
-        'secondary': {
-          '50': '#e5eef7',
-          '100': '#ccebef',
-          '200': '#99d7df',
-          '300': '#66c2d0',
-          '400': '#33aec0',
-          '500': '#00a2b9',
-          '600': '#007b8d',
-          '700': '#005c6a',
-          '800': '#003e46',
-          '900': '#001f23',
+        secondary: {
+          50: '#e5eef7',
+          100: '#ccebef',
+          200: '#99d7df',
+          300: '#66c2d0',
+          400: '#33aec0',
+          500: '#00a2b9',
+          600: '#007b8d',
+          700: '#005c6a',
+          800: '#003e46',
+          900: '#001f23'
         },
-        'red': {
-          '50': '#ffe5e5',
-          '100': '#ffcccc',
-          '200': '#ff9999',
-          '300': '#ff6666',
-          '400': '#ff3333',
-          '500': '#ff0000',
-          '600': '#cc0000',
-          '700': '#990000',
-          '800': '#660000',
-          '900': '#330000',
+        red: {
+          50: '#ffe5e5',
+          100: '#ffcccc',
+          200: '#ff9999',
+          300: '#ff6666',
+          400: '#ff3333',
+          500: '#ff0000',
+          600: '#cc0000',
+          700: '#990000',
+          800: '#660000',
+          900: '#330000'
         },
-        'yellow': {
-          '50': '#ffffe5',
-          '100': '#ffffcc',
-          '200': '#ffff99',
-          '300': '#ffff66',
-          '400': '#ffff33',
-          '500': '#ffff00',
-          '600': '#cccc00',
-          '700': '#999900',
-          '800': '#666600',
-          '900': '#333300',
+        yellow: {
+          50: '#ffffe5',
+          100: '#ffffcc',
+          200: '#ffff99',
+          300: '#ffff66',
+          400: '#ffff33',
+          500: '#ffff00',
+          600: '#cccc00',
+          700: '#999900',
+          800: '#666600',
+          900: '#333300'
         },
-        'gray': {
-          '50': '#f9fafb',
-          '100': '#f3f4f6',
-          '200': '#e5e7eb',
-          '300': '#d1d5db',
-          '400': '#9ca3af',
-          '500': '#6b7280',
-          '600': '#4b5563',
-          '700': '#374151',
-          '800': '#1f2937',
-          '900': '#111827',
-        },
-      },
-    },
+        gray: {
+          50: '#f9fafb',
+          100: '#f3f4f6',
+          200: '#e5e7eb',
+          300: '#d1d5db',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#374151',
+          800: '#1f2937',
+          900: '#111827'
+        }
+      }
+    }
   },
   plugins: [
     require('@tailwindcss/typography'),
@@ -104,6 +118,6 @@ export default {
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/container-queries'),
     require('@headlessui/tailwindcss'),
-    require('@headlessui/tailwindcss')({ prefix: 'ui' }),
-  ],
+    require('@headlessui/tailwindcss')({ prefix: 'ui' })
+  ]
 }
\ No newline at end of file

From 9d9e60a8b5a515d01fc48d64bc66a99692fdfbc1 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Thu, 22 Feb 2024 10:28:55 +0700
Subject: [PATCH 16/17] Add jspdf-autotable library and update export
 functionality

---
 package-lock.json                         |  9 +++++++++
 package.json                              |  1 +
 src/components/Pages/Gangguan/Table_1.vue | 10 +++++++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b4d632..d0f08cc 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "graphql": "^16.8.1",
         "graphql-tag": "^2.12.6",
         "jspdf": "^2.5.1",
+        "jspdf-autotable": "^3.8.2",
         "nvm": "^0.0.4",
         "pinia": "^2.1.3",
         "qs": "^6.11.2",
@@ -6221,6 +6222,14 @@
         "html2canvas": "^1.0.0-rc.5"
       }
     },
+    "node_modules/jspdf-autotable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-3.8.2.tgz",
+      "integrity": "sha512-zW1ix99/mtR4MbIni7IqvrpfHmuTaICl6iv6wqjRN86Nxtwaw/QtOeDbpXqYSzHIJK9JvgtLM283sc5x+ipkJg==",
+      "peerDependencies": {
+        "jspdf": "^2.5.1"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
diff --git a/package.json b/package.json
index d547729..9365670 100755
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.2",
     "nvm": "^0.0.4",
     "pinia": "^2.1.3",
     "qs": "^6.11.2",
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 2e4a960..14889e7 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -215,6 +215,7 @@ import {
 import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
+import autoTable from 'jspdf-autotable'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
@@ -242,9 +243,12 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 100
+      indent:100
     }).then(() => {
-      doc.save(`.pdf`)
+
+     
+
+      doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
     })
   } else {
     const workbook = new Workbook()
@@ -274,6 +278,7 @@ const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
       idUp3: $idUp3
     ) {
       alamat_pelapor
+      pembuat_laporan
       durasi_recovery_time
       durasi_response_time
       waktu_lapor
@@ -311,7 +316,6 @@ const filterData = (params: any) => {
           ...data.value,
           {
             ...item,
-            pembuat_laporan: '-',
             posko: item.nama_posko_baru
           }
         ]

From c58904aa329117827fa1cb66e40280c2e5517139 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Fri, 23 Feb 2024 10:46:21 +0700
Subject: [PATCH 17/17] Update posko parameter to accept integer instead of
 string

---
 src/components/DatePicker.vue                |  2 +-
 src/components/Form/FiltersType/Type16.vue   |  2 +-
 src/components/Form/FiltersType/reference.ts | 43 ++++++---------
 src/components/Pages/Gangguan/Table_1.vue    | 56 ++++++++++++--------
 src/components/Pages/Gangguan/Table_10.vue   |  2 +-
 src/components/Pages/Gangguan/Table_11.vue   |  4 +-
 src/components/Pages/Gangguan/Table_12.vue   |  4 +-
 src/components/Pages/Gangguan/Table_13.vue   |  4 +-
 src/components/Pages/Gangguan/Table_14.vue   |  2 +-
 src/components/Pages/Gangguan/Table_15.vue   |  4 +-
 src/components/Pages/Gangguan/Table_16.vue   |  4 +-
 src/components/Pages/Gangguan/Table_17.vue   |  4 +-
 src/components/Pages/Gangguan/Table_18.vue   |  2 +-
 src/components/Pages/Gangguan/Table_19.vue   |  4 +-
 src/components/Pages/Gangguan/Table_2.vue    | 12 +++--
 src/components/Pages/Gangguan/Table_20.vue   |  2 +-
 src/components/Pages/Gangguan/Table_3.vue    | 23 +++-----
 src/components/Pages/Gangguan/Table_4.vue    | 17 +++---
 src/components/Pages/Gangguan/Table_5.vue    | 10 ++--
 src/components/Pages/Gangguan/Table_6.vue    | 13 +++--
 src/components/Pages/Gangguan/Table_7.vue    | 10 ++--
 src/components/Pages/Gangguan/Table_8.vue    | 32 ++++-------
 src/components/Pages/Gangguan/Table_9.vue    |  7 +--
 src/components/Pages/Keluhan/Table_21.vue    |  2 +-
 src/components/Pages/Keluhan/Table_22.vue    |  2 +-
 src/components/Pages/Keluhan/Table_23.vue    |  2 +-
 src/components/Pages/Keluhan/Table_24.vue    |  2 +-
 src/components/Pages/Keluhan/Table_25.vue    |  2 +-
 src/components/Pages/Keluhan/Table_26.vue    |  2 +-
 src/components/Pages/Keluhan/Table_27.vue    |  2 +-
 src/components/Pages/Keluhan/Table_28.vue    |  2 +-
 src/components/Pages/Keluhan/Table_29.vue    |  2 +-
 src/components/Pages/Keluhan/Table_30.vue    |  4 +-
 src/components/Pages/Keluhan/Table_31.vue    |  4 +-
 src/components/Pages/Keluhan/Table_32.vue    |  2 +-
 src/components/Pages/Keluhan/Table_33.vue    |  2 +-
 src/components/Pages/Keluhan/Table_34.vue    |  2 +-
 src/components/Pages/Keluhan/Table_35.vue    |  4 +-
 src/components/Pages/Monalisa/Table_38.vue   |  2 +-
 src/components/Pages/Monalisa/Table_47.vue   |  2 +-
 src/utils/graphql.ts                         |  2 +-
 src/utils/network.ts                         |  2 +-
 42 files changed, 144 insertions(+), 163 deletions(-)

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index e3b775b..df4e8cd 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -42,7 +42,7 @@ watch(dateValue, (newValue) => {
       :formatter="formatter"
       separator=" s/d "
       :shortcuts="customShortcuts"
-      :auto-apply="false"
+      :auto-apply="true"
       as-single
       use-range
       v-slot="{ value, placeholder }"
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index ad275f9..f2141b3 100755
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -20,7 +20,7 @@ const mediaPlaceholder = 'Semua Media'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
-const media = ref({ id: 0, name: mediaPlaceholder })
+const media = ref({ id: "", name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index 0392da9..b73e00f 100755
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -2,7 +2,7 @@ import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
 import { useUp3Store } from '@/stores/up3'
-import { getUid, getUp3, getPosko, getUlp,getRegional } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp, getRegional } from '@/utils/network'
 import { ref } from 'vue'
 interface Item {
   id: any
@@ -55,8 +55,8 @@ const fetchMedia = () => {
 // Fetch data from the API using Axios
 const fetchUid = async () => {
   try {
-  const res = await getRegional()
-    itemsRegional.value = res.data.map((item: any) => (
+    const res = await getUid()
+    itemsUid.value = res.data.map((item: any) => (
       {
         id: item.id,
         name: item.nama.toUpperCase(),
@@ -100,31 +100,20 @@ const fetchDataPosko = async (up3: number) => {
     console.error('Error fetching data:', error)
   }
 }
-const fetchRegional = () => {
-  itemsRegional.value = [
-    { id: '1', name: 'Wilayah Sumatera' },
-    { id: '2', name: 'Wilayah Jawa Bali' },
-    { id: '3', name: 'Wilayah Kalimantan' },
-    { id: '4', name: 'Wilayah Sulawesi' },
-    { id: '5', name: 'Wilayah Nusa Tenggara' },
-    { id: '6', name: 'Wilayah Maluku Papua' }
-  ]
-}
-const fetchStatus = (data: any) => {
-  const status = [
-    { id: '8', name: 'Selesai' },
-    { id: '7', name: 'Nyala' },
-    { id: '6', name: 'Pengalihan' },
-    { id: '5', name: 'Dialihkan' },
-    { id: '4', name: 'Dalam Pengerjaan' },
-    { id: '3', name: 'Dalam Perjalanan' },
-    { id: '2', name: 'Penugasan Regu' },
-    { id: '1', name: 'lapor' }
-  ]
-  const filteredStatus = status.find((item) => item.id == data)
-  const name = filteredStatus ? filteredStatus.name : null
-  return name
+const fetchRegional = async () => {
+  try {
+    const res = await getRegional()
+    itemsRegional.value = res.data.map((item: any) => (
+      {
+        id: item.id,
+        name: item.nama.toUpperCase(),
+      }
+    ));
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
 }
+
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id)
   fetchDataUp3(value.id)
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 5d2cf54..e874a5c 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,20 +1,13 @@
 <template>
-  <Filters
-    @run-search="
-      () => {
-        console.log(filters)
-        filterData(filters)
-      }
-    "
-    class="mb-4"
-  >
-    <Type1
-      @update:filters="
-        (value) => {
-          filters = value
-        }
-      "
-    />
+  <Filters @run-search="() => {
+    console.log(filters)
+    filterData(filters)
+  }
+    " class="mb-4">
+    <Type1 @update:filters="(value) => {
+      filters = value
+    }
+      " />
   </Filters>
 
   <div id="dataTable">
@@ -225,8 +218,9 @@ import {
 } from 'devextreme-vue/data-grid'
 import { computed, onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import autoTable from 'jspdf-autotable'
+
+import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
@@ -235,7 +229,6 @@ 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 { fetchStatus } from '@/components/Form/FiltersType/reference'
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -250,15 +243,32 @@ const closeDetail = () => {
 }
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
+    const doc = new jsPDF({
+      orientation: 'landscape',
+      unit: 'mm',
+      format: 'a4',
+     
+    })
+
+    // autoTable(doc, {
+   
+    //   margin: { top: 20 }, // Adjust top margin as needed
+    //   styles: {
+    //     fontSize: 8,
+    //     overflow: 'linebreak', // Enable linebreaks to fit content
+    //   },
+    //   startY: 10, // Adjust startY position as needed
+    //   head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+    //   body: data.value.map((item) =>
+    //     [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko])
+
+    // })
+
+
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent:100
     }).then(() => {
-
-     
-
       doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
     })
   } else {
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 0e23194..9f59704 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -118,7 +118,7 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
   query rekapitulasiJenisGangguanSE004(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index a7c2b28..c1d3fcb 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -177,7 +177,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
 query rekapitulasiGangguanPerPosko(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -251,7 +251,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index ff01389..8e0c536 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -105,7 +105,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
 query rekapitulasiGangguanPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -178,7 +178,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index c5dd859..f21b23b 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -141,7 +141,7 @@ const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
 query rekapitulasiGangguanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -181,7 +181,7 @@ query rekapitulasiGangguanPerTanggal(
     const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
         dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
         dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
+        posko: 0,
         idUid: 0,
         idUp3: 0,
     })
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index 721ad0e..d12b89a 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -98,7 +98,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
   query rekapitulasiGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 55934b5..8914187 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -90,7 +90,7 @@ query rekapitulasiGangguanAlihPosko
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -113,7 +113,7 @@ query rekapitulasiGangguanAlihPosko
 const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_16.vue b/src/components/Pages/Gangguan/Table_16.vue
index 1f4ed8e..9c3074b 100755
--- a/src/components/Pages/Gangguan/Table_16.vue
+++ b/src/components/Pages/Gangguan/Table_16.vue
@@ -225,7 +225,7 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -265,7 +265,7 @@ query rekapitulasiGangguanDiselesaikanMobileAPKT
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_17.vue b/src/components/Pages/Gangguan/Table_17.vue
index cef99ea..dd53d37 100755
--- a/src/components/Pages/Gangguan/Table_17.vue
+++ b/src/components/Pages/Gangguan/Table_17.vue
@@ -159,7 +159,7 @@ query rekapitulasiGangguanRatingPerPosko
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -195,7 +195,7 @@ query rekapitulasiGangguanRatingPerPosko
 const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_18.vue b/src/components/Pages/Gangguan/Table_18.vue
index 1be4a49..7e69920 100755
--- a/src/components/Pages/Gangguan/Table_18.vue
+++ b/src/components/Pages/Gangguan/Table_18.vue
@@ -136,7 +136,7 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   query rekapitulasiGangguanRatingPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Gangguan/Table_19.vue b/src/components/Pages/Gangguan/Table_19.vue
index e3cfadb..6c3e4fa 100755
--- a/src/components/Pages/Gangguan/Table_19.vue
+++ b/src/components/Pages/Gangguan/Table_19.vue
@@ -111,7 +111,7 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -143,7 +143,7 @@ query rekapitulasiGangguanKoreksiTransaksiIndividual
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index 4f0af4c..d237ad4 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -48,7 +48,7 @@
                 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"
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
                 cell-template="data" />
 
             <template #data="{ data }">
@@ -196,7 +196,7 @@ const closeDetail = () => {
 }
 
 const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
-query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: String!, $idUid: Int!, $idUp3: Int!) {
+query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: Int!, $idUid: Int!, $idUp3: Int!) {
   daftarGangguanMelaporLebihDariSatuKali(
     minJmlLapor: $minJmlLapor
     maxJmlLapor: $maxJmlLapor
@@ -207,8 +207,9 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     idUp3: $idUp3
   ) {
     alamat_pelapor
+    pembuat_laporan
     durasi_response_time
-    id_gangguan
+    durasi_recovery_time
     idpel_nometer
     jumlah_lapor
     keterangan_pelapor
@@ -216,10 +217,11 @@ query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateT
     nama_pelapor
     no_laporan
     no_telp_pelapor
-    posko
     status_akhir
+    waktu_lapor
     waktu_recovery
     waktu_response
+    nama_posko
   }
 }`;
 const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
@@ -227,7 +229,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LE
     maxJmlLapor: 1,
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_20.vue b/src/components/Pages/Gangguan/Table_20.vue
index da26e38..cef7427 100755
--- a/src/components/Pages/Gangguan/Table_20.vue
+++ b/src/components/Pages/Gangguan/Table_20.vue
@@ -117,7 +117,7 @@ const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
   query rekapitulasiGangguanCleansingTransaksiTM(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 07b0f7f..9f4ba9a 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -46,7 +46,7 @@
                 caption="No Telp Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
                 caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -68,7 +68,6 @@ const showPane = ref(true);
 const data = ref<any[]>([])
 const filterData = (params: any) => {
     const { minTime, maxTime, posko, uid, up3 } = params;
-    console.log(params)
     const dateValue = params.periode.split(' s/d ') 
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
@@ -81,9 +80,8 @@ const filterData = (params: any) => {
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali;
+            data.value = queryResult.data.daftarGangguanResponseTime;
         }
-        console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
@@ -97,7 +95,7 @@ query daftarGangguanResponseTime(
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -113,15 +111,16 @@ query daftarGangguanResponseTime(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
+        is_marking
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
     }
@@ -131,18 +130,10 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RES
     dateTo: new Date().toISOString().slice(0, 10),
     minDurasiResponseTime: 1, //menit
     maxDurasiResponseTime: 1,// menit
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
-onResult(queryResult => {
-    if (queryResult.data != undefined) {
-        data.value = queryResult.data.daftarGangguanResponseTime;
-    }
-    console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
-})
 
 const filters = ref()
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index df5559c..a50d7f2 100755
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -6,7 +6,7 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="" :column-width="100"
             @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
@@ -34,7 +34,7 @@
                 caption="Durasi Recovery Time" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
                 caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
+            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="is_marking"
                 caption="Referensi Marking" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
                 caption="IDPEL/NO METER" />
@@ -48,7 +48,7 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -67,6 +67,7 @@ const showIndicator = ref(true);
 const shading = ref(true);
 const showPane = ref(true);
 const data = ref<any[]>([])
+
 const filterData = (params: any) => {
     const { minDurasiRecoveryTime, maxDurasiRecoveryTime, posko, uid, up3 } = params;
     const dateValue = params.periode.split(' s/d ')
@@ -83,7 +84,6 @@ const filterData = (params: any) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanRecoveryTime;
         }
-        console.log(queryResult.data)
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
@@ -97,7 +97,7 @@ query daftarGangguanRecoveryTime(
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
     $maxDurasiRecoveryTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -113,15 +113,16 @@ query daftarGangguanRecoveryTime(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
+        is_marking
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -132,7 +133,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_REC
     dateTo: new Date().toISOString().slice(0, 10),
     minDurasiRecoveryTime: 1, //menit
     maxDurasiRecoveryTime: 1,// menit
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index f4201e9..49ff140 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -46,7 +46,7 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -68,7 +68,7 @@ const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
 query daftarGangguanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -82,15 +82,15 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -98,7 +98,7 @@ query daftarGangguanSelesaiTanpaIdPelanggan(
 const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 18d9961..e919518 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -60,7 +60,7 @@ const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
 query daftarGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
     $media : String!
@@ -76,23 +76,25 @@ query daftarGangguanBerdasarkanMedia(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_media
+        waktu_lapor
         waktu_recovery
         waktu_response
+        keterangan_media
         }
 }`;
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
         dateFrom: new Date().toISOString().slice(0, 10),
         dateTo: new Date().toISOString().slice(0, 10),
-        posko: "",
+        posko: 0,
         idUid: 0,
         idUp3: 0,
         media : "Twitter"
@@ -106,11 +108,12 @@ const filterData = (params: any) => {
         posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
-        media : media ? media.id : "Twitter"
+        media : media ? media.id : ""
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
+            
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 510e35f..0bbf204 100755
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -46,7 +46,7 @@
                 caption="Keterangan Pelapor" />
             <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
                 caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
 
         </DxDataGrid>
     </div>
@@ -69,7 +69,7 @@ const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
 query daftarGangguanDiselesaikanMobileAPKT(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -83,15 +83,15 @@ query daftarGangguanDiselesaikanMobileAPKT(
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_gangguan
         idpel_nometer
         keterangan_pelapor
         media
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        nama_posko
         status_akhir
+        waktu_lapor
         waktu_recovery
         waktu_response
         }
@@ -99,7 +99,7 @@ query daftarGangguanDiselesaikanMobileAPKT(
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index 07a33f0..ee3e565 100755
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -12,8 +12,8 @@
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
             <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" />
@@ -21,7 +21,7 @@
             <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 :width="150" alignment="center" data-field="nama_unit" caption="Nama Unit"
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                 :allow-resizing="false" css-class="custom-table-column" />
@@ -52,7 +52,7 @@
                     :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                     :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_repsonse" data-type="number"
+                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
                     caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
                 <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
                     caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
@@ -88,11 +88,6 @@ import { Workbook } from 'exceljs'
 
 import gql from 'graphql-tag';
 import { useQuery } from '@vue/apollo-composable'
-import { useSearchStore } from '@/stores/filtersAction'
-import { useDateStore } from '@/stores/date'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
 const position = { of: '#data' };
 const showIndicator = ref(true);
 const shading = ref(true);
@@ -102,7 +97,7 @@ const GET_REKAPITULASI_GANGGUAN_ALL = gql`
 query rekapitulasiAllGangguan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -116,8 +111,6 @@ query rekapitulasiAllGangguan(
         avg_durasi_dispatch
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
         max_durasi_dispatch
         max_durasi_recovery
         max_durasi_response
@@ -126,7 +119,7 @@ query rekapitulasiAllGangguan(
         min_durasi_response
         persen_inproses
         persen_selesai
-        posko
+        nama_posko
         total
         total_diatas_sla_dispatch
         total_diatas_sla_recovery
@@ -141,20 +134,18 @@ query rekapitulasiAllGangguan(
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
 
-const filterData = (param: any) => {
-    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
+const filterData = (params: any) => {
+    const { posko, uid, up3 } = params
+    const dateValue = params.periode.split(' s/d ')
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko,
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
     })
@@ -163,7 +154,6 @@ const filterData = (param: any) => {
             queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
                 data.value = [...data.value, {
                     ...item,
-                    nama_unit: 'UNIT'
                 }];
 
             })
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index f429c1c..f49eb13 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -146,11 +146,6 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
-import { useDateStore } from '@/stores/date'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
 import { useQuery } from '@vue/apollo-composable'
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -162,7 +157,7 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
   query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index b12c5be..28e867b 100755
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -123,7 +123,7 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
   query daftarKeluhanDipindahkanKePoskoLain(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 84bbf01..0aaf7d5 100755
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -129,7 +129,7 @@ const GET_DATA = gql`
     $maxJmlLapor: Int!
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 6f3f64f..8b59eea 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -125,7 +125,7 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 564ecc6..8b8ad9c 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -127,7 +127,7 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
     $maxDurasiRecoveryTime: Int!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 96447b1..34d5f57 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -127,7 +127,7 @@ const GET_DATA = gql`
   query daftarKeluhanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 5be30e0..5720b80 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -123,7 +123,7 @@ const GET_DATA = gql`
   query daftarKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
     $media: String!
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 8fed593..5400f45 100755
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -121,7 +121,7 @@ const GET_DATA = gql`
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index f7f4c5d..edfd39a 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -126,7 +126,7 @@ query rekapitulasiKeluhanAll
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index bf4f5f1..09931a5 100755
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -147,7 +147,7 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 721cf48..7fc828f 100755
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -138,7 +138,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -176,7 +176,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 const { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index 070748d..57cc70f 100755
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -138,7 +138,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -176,7 +176,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index cf80430..728ddae 100755
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -145,7 +145,7 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index ff4d8fa..3e6708c 100755
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -144,7 +144,7 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPerUnit(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 5ba92df..3e7b0a4 100755
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -96,7 +96,7 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 9022484..1b5667f 100755
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -131,7 +131,7 @@ query rekapitulasiKeluhanRatingPerUnit
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: String!
+    $posko: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -165,7 +165,7 @@ query rekapitulasiKeluhanRatingPerUnit
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
 })
diff --git a/src/components/Pages/Monalisa/Table_38.vue b/src/components/Pages/Monalisa/Table_38.vue
index 4897ef5..6179096 100755
--- a/src/components/Pages/Monalisa/Table_38.vue
+++ b/src/components/Pages/Monalisa/Table_38.vue
@@ -91,7 +91,7 @@ const monalisaRecoveryTimeGangguan = gql`
 `;
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
     regional: "",
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
     bulan: 10,
diff --git a/src/components/Pages/Monalisa/Table_47.vue b/src/components/Pages/Monalisa/Table_47.vue
index 68a4d82..d3df540 100755
--- a/src/components/Pages/Monalisa/Table_47.vue
+++ b/src/components/Pages/Monalisa/Table_47.vue
@@ -116,7 +116,7 @@ const monalisaRecoveryTimeKeluhan = gql`
 `;
 const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeKeluhan, {
     regional: "",
-    posko: "",
+    posko: 0,
     idUid: 0,
     idUp3: 0,
     bulan: 10,
diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
index c0ec287..1ce6ff5 100755
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -3,7 +3,7 @@ import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core
 export const apolloClient = () => {
 
   const httpLink =  createHttpLink({
-    uri: 'http://10.8.0.13:32169/graphql',
+    uri: 'http://10.8.0.31:32169/graphql',
     credentials: 'include', // Include credentials for cross-origin requests
   });
 
diff --git a/src/utils/network.ts b/src/utils/network.ts
index b0ae1e7..8ef57fa 100755
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -13,4 +13,4 @@ const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional,getRegional}
+export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional, getRegional }