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] 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"