Refactor component imports and add getUidRegional function

2024-02-11 14:25:18 +07:00
parent b9732be2c9
commit a1212ffa01
57 changed files with 1219 additions and 908 deletions
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
+
+}
+</script>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>