diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 6c8def1..f17686d 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -76,12 +76,9 @@ onMounted(() => {
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker
-      @update:date-value="
-        (value) => {
-          data.periode = value
-        }
-      "
-    />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index e9ae3b0..11c0178 100755
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -18,13 +18,13 @@ import InputNumber from '@/components/Form/InputNumber.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: ulp.value,
   periode: '',
   minJmlLapor: 1,
@@ -33,12 +33,12 @@ const data = ref({
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
@@ -78,6 +78,7 @@ onMounted(() => {
     <Select 
       @update:selected="setUp3($event)" 
       :data="itemsUp3" 
+      :selected="up3"
       :placeholder="up3Placeholder"
     />
   </div>
@@ -90,6 +91,7 @@ onMounted(() => {
     <Select
       @update:selected="setUlp($event)"
       :data="itemsUlp"
+      :selected="ulp"
       :placeholder="ulpPlaceholder"
     />
   </div>
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 3ae83d4..b855f82 100755
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -19,7 +19,7 @@ import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
-const uppp = ref({ id: 0, name: up3Placeholder });
+const up3 = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
@@ -36,7 +36,7 @@ const sla = [
 ];
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
+  up3: up3.value,
   posko: ulp.value,
   periode: '',
   minTime: 1,
@@ -45,12 +45,12 @@ const data = ref({
 const setUid = (value: any) => {
   uid.value = value;
   selectedUid(value);
-  uppp.value = { id: 0, name: up3Placeholder };
+  up3.value = { id: 0, name: up3Placeholder };
   data.value.uid = value;
 };
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  up3.value = value;
   selectedUp3Ulp(value);
   ulp.value = { id: "", name: ulpPlaceholder };
   data.value.up3 = value;
@@ -106,7 +106,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">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 78ccdcb..bcfe0c9 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -53,7 +53,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">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index 1a418fa..0492d9f 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -4,15 +4,33 @@ import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
 import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
-fetchUid();
+import { onMounted, ref } from 'vue';
 
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+const poskoPlaceholder = 'Semua Posko';
+const up3 = ref({ id: 0, name: up3Placeholder });
+const uid = ref({ id: 0, name: uidPlaceholder });
+const posko = ref({ id: "", name: poskoPlaceholder });
+const emit = defineEmits(['update:filters'])
 const jenisTransakasi = [
     { id: 1, value: 'Koreksi Transaksi Individual',label: 'Koreksi Transaksi Individual' },
     { id: 2, value: 'Cleansing Traksaksi TM',label: 'Cleansing Traksaksi TM',  }, 
     { id: 3, value: 'Koreksi Transaksi TM',label: 'Koreksi Transaksi TM',  },  
     { id: 4, value: 'Koreksi Kode Gangguan dan Anev',label: 'Koreksi Kode Gangguan dan Anev'  },
   ]
-
+  const data = ref({
+  uid: uid.value,
+  up3: up3.value,
+  posko: posko.value,
+  periode: '',
+  jenisTransaksi: [],
+  group: 1
+})
+onMounted(() => {
+  emit('update:filters', data.value)
+  fetchUid()
+})
 </script>
 
 <template>
@@ -25,14 +43,13 @@ const jenisTransakasi = [
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3"
-      placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+    <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" placeholder="Semua Posko" />
+    <Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" 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">Jenis Transaksi:</label>
@@ -46,6 +63,9 @@ const jenisTransakasi = [
   </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  />
+    <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index aba3642..4daaf7d 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -56,13 +56,13 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 45a3b76..e058acd 100755
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -56,13 +56,13 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index afb7573..66a8bd1 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -100,13 +100,13 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :placeholder="poskoPlaceholder" />
+    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 49ff140..4256230 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -54,7 +54,7 @@
 <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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxExport, DxLoadPanel, DxPager, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag';
@@ -103,7 +103,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PE
     idUp3: 0,
 })
 const filterData = (params: any) => {
-    const {  posko, uid, up3 } = params;
+    const { posko, uid, up3 } = params;
     const dateValue = params.periode.split(' s/d ')
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index d81a93a..b065658 100755
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -59,7 +59,7 @@
 <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 {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,