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

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

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