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

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

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