diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index 81a5bde..f3dca2b 100755
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
- 
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -10,17 +9,16 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 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 up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
+const up3 = 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,
@@ -30,29 +28,26 @@ const data = ref({
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value;
-};
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
-  selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
-  data.value.up3 = value;
-};
+  up3.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.ulp = value;
-};
-onMounted(() => {
-  emit('update:filters', data.value)
-  fetchUid()
-})
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -61,13 +56,11 @@ onMounted(() => {
 
 <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>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -75,18 +68,16 @@ onMounted(() => {
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
-    <Select 
-      @update:selected="setUp3($event)" 
-      :data="itemsUp3" 
+    <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
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
     <Select
       @update:selected="setUlp($event)"
@@ -99,23 +90,16 @@ 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>
 
   <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">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-      <InputNumber @update:time-value="(value) => {
-        data.minJmlLapor = value
-      }" />
+      <InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
       <small class="flex items-center">s/d</small>
-      <InputNumber  @update:time-value="(value) => {
-        data.maxJmlLapor = value
-      }" />
+      <InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" />
     </div>
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 9aa19b6..b6f8837 100755
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-
-import { onMounted, ref, watch } from 'vue'
-import { useTotalDuration } from '@/stores/totalDuration';
-
+import { onMounted, ref } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -12,16 +10,16 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 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 up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
+const up3 = 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 sla = [
@@ -33,7 +31,8 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-];
+]
+
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -42,54 +41,58 @@ const data = ref({
   minTime: 1,
   maxTime: 1
 })
+
 const setUid = (value: any) => {
-  uid.value = value;
-  selectedUid(value);
-  up3.value = { id: 0, name: up3Placeholder };
-  data.value.uid = value;
-};
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
-  selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
-  data.value.up3 = value;
-};
+  up3.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.ulp = value;
-};
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
+
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
   useTotalDuration().setDataMin(value)
-
 }
+
 const setMax = (value: any) => {
   data.value.maxTime = value
   useTotalDuration().setDataMax(value)
 }
+
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
-    setMin("1")
-    setMax("5")
+    setMin('1')
+    setMax('5')
     console.log('Durasi Menit')
     triggerInput.value = false
   } else if (value.id === 1) {
-    setMin("1")
-    setMax("45")
+    setMin('1')
+    setMax('45')
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    setMin("45")
+    setMin('45')
     setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
 }
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -98,30 +101,41 @@ onMounted(() => {
 
 <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>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </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="setUp3($event)" :data="itemsUp3" :selected="up3" :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"
+      :placeholder="ulpPlaceholder"
+      :selected="ulp"
+    />
   </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>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -136,5 +150,4 @@ onMounted(() => {
       </div>
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index 4a11f08..be78e54 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -11,6 +11,7 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -25,6 +26,7 @@ const data = ref({
   ulp: ulp.value,
   periode: ''
 })
+
 watch(data.value, (value) => {
   emit('update:filters', value)
 })
@@ -41,6 +43,7 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+  console.log(itemsUlp)
 }
 
 const setUlp = (value: any) => {
@@ -48,6 +51,7 @@ const setUlp = (value: any) => {
   selectedUlp(value)
   data.value.ulp = value
 }
+
 onMounted(() => {
   fetchUid()
   emit('update:filters', data.value)
@@ -90,12 +94,6 @@ 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/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index d80c165..8a215ed 100755
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -3,13 +3,7 @@ import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 
 import { onMounted, ref, watch } from 'vue'
-import {
-  selectedUid,
-  selectedUp3Posko,
-  fetchUid,
-  itemsUid,
-  itemsUp3,
-} from './reference'
+import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -38,8 +32,6 @@ const setUid = (value: any) => {
 
 const setUp3 = (value: any) => {
   uppp.value = value
-  selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
 
@@ -47,26 +39,26 @@ 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>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </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="setUp3($event)"
       :data="itemsUp3"
+      :selected="uppp"
       :placeholder="uppPlaceholder"
     />
   </div>
@@ -74,9 +66,6 @@ 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/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index d09e46b..76f4414 100755
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
-  import DatePicker from '@/components/DatePicker.vue'
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
 
 import { onMounted, ref, watch } from 'vue'
 import {
@@ -19,13 +19,14 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0 ,name: poskoPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
   up3: uppp.value,
   posko: posko.value,
-  periode: ''
+  periode: '',
+  groupBy: false
 })
 
 watch(data.value, (value) => {
@@ -53,20 +54,18 @@ const setPosko = (value: any) => {
 }
 
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </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>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Induk Distribusi/Wilayah:</label
+    >
 
-    <Select
-      @update:selected="setUid($event)"
-      :data="itemsUid"
-      :placeholder="uidPlaceholder"
-    />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -78,31 +77,38 @@ onMounted(() => {
       @update:selected="setUp3($event)"
       :data="itemsUp3"
       :placeholder="uppPlaceholder"
+      :selected="uppp"
     />
   </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" 
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
       :placeholder="poskoPlaceholder"
+      :selected="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>
 
   <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">Group By Kode Unit Distribusi:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Group By Kode Unit Distribusi:</label
+    >
 
-    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+    <InlineRadioGroup
+      @update:group-value="(value) => (data.groupBy = value.id === 2)"
+      :radio-items="[
+        { id: 1, title: 'Tidak', checked: true },
+        { id: 2, title: 'Ya, Grupkan' }
+      ]"
+    />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index 0906247..b8d3c6b 100755
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -105,7 +105,7 @@ const fetchDataUlp = async (up3: number) => {
       const res = await getUlp(up3)
       itemsUlp.value = res.data.map((item: any) => ({
         id: item.id,
-        name: item.name
+        name: item.nama
       }))
     } catch (error) {
       console.error('Error fetching data:', error)
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
index b7aef2e..8199418 100755
--- a/src/components/Form/InlineRadioGroup.vue
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -3,13 +3,19 @@
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
         <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          <input v-model="groupValue" 
-            type="radio" name="radio"
+          <input
+            v-model="groupValue"
+            type="radio"
+            name="radio"
             :checked="itemSelected.id === item.id ? true : false"
             @change="onChange(item)"
-            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
-          <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
-            item.title }}</label>
+            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
+          />
+          <label
+            :for="`${item.id}`"
+            class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500"
+            >{{ item.title }}</label
+          >
         </div>
       </div>
     </fieldset>
@@ -17,16 +23,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, type PropType, onMounted } from 'vue'
+import { ref, type PropType, onMounted } from 'vue'
 
 interface Item {
-  id: number;
-  title: string;
-  checked?: boolean;
+  id: number
+  title: string
+  checked?: boolean
 }
 
-const onChange= (e:Item) => {
+const onChange = (e: Item) => {
   itemSelected.value = e
+  console.log(e)
   emit('update:groupValue', e)
 }
 
@@ -44,5 +51,4 @@ const groupValue = ref(1)
 onMounted(() => {
   itemSelected.value = props.radioItems[0]
 })
-
 </script>
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 5008e7e..4b087d9 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -1,101 +1,245 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" 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="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" 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="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :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"
+      />
+      <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="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="sub_kelompok"
+        caption="Sub Kelompok (Equipment)"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="in_process"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="persen_in_process"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_waktu_response_time"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120"
+            alignment="center"
+            data-field="di_atas_sla_durasi_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="dibawah_sla_durasi_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_waktu_recovery_time"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120"
+            alignment="center"
+            data-field="diatas_sla_durasi_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="dibawah_sla_durasi_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </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 { ref } from 'vue'
 
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -146,69 +290,74 @@ const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
     }
   }
 `
+
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-})
-const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
 
-            data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
-            console.log(queryResult.loading)
-            console.log(queryResult.networkStatus)
-        }
-    })
-    onError((queryError) => {
-        console.log(queryError)
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
+})
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiJenisGangguanSE004
+      console.log(queryResult.loading)
+      console.log(queryResult.networkStatus)
+    }
+  })
+  onError((queryError) => {
+    console.log(queryError)
+  })
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-const filters = ref();
-
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index 407b58b..4dc017c 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -1,324 +1,626 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type8 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
-            
-            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
-                css-class="custom-table-column" :group-index="0" />
-            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
-                        caption="Jml" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-                        caption="%" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
-                        caption="Jml" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-                        caption="%" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+  <Filters
+    :report-button="true"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type8 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxSummary>
-                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-                    display-format="{0}" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-                <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
-                <DxTotalItem summary-type="sum" display-format="{0}" show-in-column="laporan.total" column="laporan.total"
-                    css-class="text-white" />
-                <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="laporan.belumSelesai.persen" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="responseTime.menit.total" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="responseTime.menit.rataRata" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="responseTime.menit.max" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="responseTime.menit.min" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="recoveryTime.menit.max" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="recoveryTime.menit.min" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-                <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" display-format="{0}"
-                    css-class="text-white" />
-            </DxSummary>
+      <DxColumn
+        :width="60"
+        alignment="center"
+        data-field="no"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        name="poskoGroup"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        css-class="custom-table-column"
+        :group-index="0"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
 
-        </DxDataGrid>
-    </div>
+      <DxSummary>
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="laporan.total"
+          column="laporan.total"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+      </DxSummary>
+    </DxDataGrid>
+  </div>
 </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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary, DxTotalItem } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxGroupItem,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection,
+  DxSummary,
+  DxTotalItem
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 gql from 'graphql-tag';
+import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
-query rekapitulasiGangguanPerPosko(
+  query rekapitulasiGangguanPerPosko(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanPerPosko(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        avg_durasi_recovery
-        avg_durasi_response
-        id_posko
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_recovery
-        min_durasi_response
-        nama_posko
-        persen_inproses
-        persen_selesai
-        total
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
-        total_selesai
-        }
-}`;
+      avg_durasi_recovery
+      avg_durasi_response
+      id_posko
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_recovery
+      min_durasi_response
+      nama_posko
+      persen_inproses
+      persen_selesai
+      total
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_inproses
+      total_selesai
+    }
+  }
+`
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-
-            var i = 1;
-            queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
-                const entry = {
-                    no: Number(i++),
-                    nama_posko: item.nama_posko,
-                    laporan: {
-                        total: item.total,
-                        sudahSelesai: {
-                            jml: item.total_selesai,
-                            persen: item.persen_selesai,
-                        },
-                        belumSelesai: {
-                            jml: item.total_inproses,
-                            persen: item.persen_inproses,
-                        },
-                    },
-                    responseTime: {
-                        menit: {
-                            total: 0,
-                            rataRata: item.avg_durasi_response,
-                            max: item.max_durasi_response,
-                            min: item.min_durasi_response,
-                        },
-                        laporan: {
-                            lebihSla: item.total_diatas_sla_response,
-                            kurangSla: item.total_dibawah_sla_response,
-                        },
-                    },
-                    recoveryTime: {
-                        menit: {
-                            total: 0,
-                            rataRata: item.avg_durasi_recovery,
-                            max: item.max_durasi_recovery,
-                            min: item.min_durasi_recovery,
-                        },
-                        laporan: {
-                            lebihSla: item.total_diatas_sla_recovery,
-                            kurangSla: item.total_dibawah_sla_recovery,
-                        },
-
-                    }
-                };
-                data.value = [...data.value, entry];
-
-
-            })
-
-            data.value = [...data.value];
-
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      var i = 1
+      queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
+        const entry = {
+          no: Number(i++),
+          nama_posko: item.nama_posko,
+          laporan: {
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
+          },
+          responseTime: {
+            menit: {
+              total: 0,
+              rataRata: item.avg_durasi_response,
+              max: item.max_durasi_response,
+              min: item.min_durasi_response
+            },
+            laporan: {
+              lebihSla: item.total_diatas_sla_response,
+              kurangSla: item.total_dibawah_sla_response
+            }
+          },
+          recoveryTime: {
+            menit: {
+              total: 0,
+              rataRata: item.avg_durasi_recovery,
+              max: item.max_durasi_recovery,
+              min: item.min_durasi_recovery
+            },
+            laporan: {
+              lebihSla: item.total_diatas_sla_recovery,
+              kurangSla: item.total_dibawah_sla_recovery
+            }
+          }
         }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+        data.value = [...data.value, entry]
+      })
 
+      data.value = [...data.value]
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
-</script>
\ No newline at end of file
+
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 112c86c..2511d54 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -1,203 +1,531 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type9 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :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"
+      />
 
-            <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="120" alignment="center" data-field="id_regu" caption="Kode"
-                css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_reponse" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" 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="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" 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="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <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="60"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-field="no"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="id_regu"
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="id_regu"
+        caption="Kode"
+        css-class="custom-table-column"
+        group-index="0"
+        v-if="filters.groupBy"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_regu"
+        caption="Nama Regu"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="laporan.total"
+          column="laporan.total"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white"
+        />
+      </DxSummary>
+    </DxDataGrid>
+  </div>
 </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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxGroupItem,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection,
+  DxSummary,
+  DxTotalItem
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { 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);
+import gql from 'graphql-tag'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
-query rekapitulasiGangguanPerRegu(
+  query rekapitulasiGangguanPerRegu(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanPerRegu(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        id_regu
-        nama_regu
-        avg_durasi_recovery
-        avg_durasi_response
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_recovery
-        min_durasi_response
-        persen_inproses
-        persen_selesai
-        nama_posko
-        total
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
-        total_selesai
-        }
-}`;
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
+      id_regu
+      nama_regu
+      avg_durasi_recovery
+      avg_durasi_response
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      nama_posko
+      total
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_inproses
+      total_selesai
     }
+  }
+`
+
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
-})
-const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanPerRegu;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
 
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
+})
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      var i = 1
+
+      queryResult.data.rekapitulasiGangguanPerRegu.forEach((item: any) => {
+        const entry = {
+          no: Number(i++),
+          id_regu: item.id_regu,
+          nama_regu: item.nama_regu,
+          laporan: {
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
+          },
+          responseTime: {
+            menit: {
+              total: 0,
+              rataRata: item.avg_durasi_response,
+              max: item.max_durasi_response,
+              min: item.min_durasi_response
+            },
+            laporan: {
+              lebihSla: item.total_diatas_sla_response,
+              kurangSla: item.total_dibawah_sla_response
+            }
+          },
+          recoveryTime: {
+            menit: {
+              total: 0,
+              rataRata: item.avg_durasi_recovery,
+              max: item.max_durasi_recovery,
+              min: item.min_durasi_recovery
+            },
+            laporan: {
+              lebihSla: item.total_diatas_sla_recovery,
+              kurangSla: item.total_dibawah_sla_recovery
+            }
+          }
+        }
+        data.value = [...data.value, entry]
+      })
+
+      data.value = [...data.value]
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref()
-</script>
\ No newline at end of file
+
+const filters = ref({
+  groupBy: false
+})
+</script>
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index e8bd5e1..b8d7cf8 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -1,203 +1,349 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type9 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type9 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :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"
+      />
 
-            <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="tanggal" caption="Tanggal Lapor"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-                        css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" 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="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" 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="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+      <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="tanggal"
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            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="120"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 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 { 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);
+import gql from 'graphql-tag'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
-query rekapitulasiGangguanPerTanggal(
+  query rekapitulasiGangguanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanPerTanggal(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        nama_posko
-        avg_durasi_recovery
-        avg_durasi_response
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_recovery
-        min_durasi_response
-        persen_inproses
-        persen_selesai
-        tanggal
-        total
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
-        total_selesai
-        }
-}`;
+      nama_posko
+      avg_durasi_recovery
+      avg_durasi_response
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      tanggal
+      total
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_inproses
+      total_selesai
+    }
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanPerTanggal;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanPerTanggal
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
-</script>
\ No newline at end of file
+
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index 91ee2d4..be08cd3 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -1,53 +1,100 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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" />
+  <Filters
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :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"
+      />
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :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="media" caption="Nama Media"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-                <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
-                    :caption="i" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn :width="170" alignment="center" data-field="total" caption="Total"
-                css-class="custom-table-column" />
-        </DxDataGrid>
-    </div>
+      <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="media"
+        caption="Nama Media"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
+        <DxColumn
+          v-for="i in 31"
+          :width="150"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Total"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import {  ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -56,42 +103,43 @@ 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 onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -148,36 +196,40 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
 `
 
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
-    })
-
-
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index ee68ac8..583504b 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -1,36 +1,85 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-            column-resizing-mode="widget" :word-wrap-enabled="true">
-            <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" />
+  <Filters
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <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"
+      />
 
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Posko" css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
-                css-class="custom-table-column" />
-            <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
-                css-class="custom-table-column" />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Posko"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="100"
+        alignment="center"
+        data-field="posko_in"
+        caption="Posko IN"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="100"
+        alignment="center"
+        data-field="posko_out"
+        caption="Posko OUT"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -38,7 +87,16 @@ import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -46,104 +104,107 @@ 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 position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-query rekapitulasiGangguanAlihPosko
-(
+  query rekapitulasiGangguanAlihPosko(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiGangguanAlihPosko
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiGangguanAlihPosko(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        id_posko
-id_uid
-id_up3
-nama_posko
-nama_uid
-nama_up3
-posko_in
-posko_out
-        }
-}`;
+      id_posko
+      id_uid
+      id_up3
+      nama_posko
+      nama_uid
+      nama_up3
+      posko_in
+      posko_out
+    }
+  }
+`
 
-const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
-    })
-
-
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanAlihPosko;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.rekapitulasiGangguanAlihPosko
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
-</script>
\ No newline at end of file
+
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 4256230..6327e4e 100755
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -1,128 +1,247 @@
 <template>
-      <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-                filters = value
-            }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <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" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-                caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+  <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=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <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"
+      />
 
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.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';
-import { useQuery } from '@vue/apollo-composable';
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
-query daftarGangguanSelesaiTanpaIdPelanggan(
+  query daftarGangguanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanSelesaiTanpaIdPelanggan(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        nama_posko
-        status_akhir
-        waktu_lapor
-        waktu_recovery
-        waktu_response
-        }
-}`;
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      nama_posko
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
+
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params;
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
+
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index c938d4e..1737195 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -1,7 +1,8 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" class="mb-4">
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type16 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       class="max-h-[calc(100vh-140px)]"
@@ -128,6 +129,13 @@
         data-field="durasi_recovery_time"
         caption="Durasi Recovery Time"
       />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Sumber Lapor"
+      />
       <DxColumn
         css-class="custom-table-column"
         :width="150"
@@ -157,12 +165,12 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-  DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
 import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -204,6 +212,7 @@ const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
     }
   }
 `
+
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
@@ -212,6 +221,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BER
   idUp3: 0,
   media: 'Twitter'
 })
+
 const filterData = (params: any) => {
   const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
@@ -239,5 +249,6 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
+
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 0bbf204..b1e6d0b 100755
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -1,133 +1,252 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed=""
-            :column-width="100" @exporting="" :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <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" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No Laporan" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-                caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko" />
+  <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=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <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"
+      />
 
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+      />
+    </DxDataGrid>
+  </div>
 </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 { 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';
-import { useQuery } from '@vue/apollo-composable';
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
-query daftarGangguanDiselesaikanMobileAPKT(
+  query daftarGangguanDiselesaikanMobileAPKT(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanDiselesaikanMobileAPKT(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        nama_posko
-        status_akhir
-        waktu_lapor
-        waktu_recovery
-        waktu_response
-        }
-}`;
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT, {
-    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      nama_posko
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
+
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     posko: 0,
     idUid: 0,
-    idUp3: 0,
-})
+    idUp3: 0
+  }
+)
+
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
-
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3?.id ? up3.id : 0,
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
 
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3?.id ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
-const filters = ref();
-
-</script>
\ No newline at end of file
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_8.vue b/src/components/Pages/Gangguan/Table_8.vue
index ee3e565..7c7e43d 100755
--- a/src/components/Pages/Gangguan/Table_8.vue
+++ b/src/components/Pages/Gangguan/Table_8.vue
@@ -1,204 +1,399 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <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" />
+  <Filters
+    :report-button="true"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama Unit"
-                css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-                :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
-                css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-                :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
-                :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-                :allow-resizing="false" css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_dispatch" data-type="number" caption="Max"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_dispatch" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_dispatch" data-type="number"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_dispatch" data-type="number"
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
-            </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-                    caption="Rata-Rata" :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                    :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-                    caption=">SLA" :allow-resizing="false" css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-                    caption="≤SLA" :allow-resizing="false" css-class="custom-table-column" />
-            </DxColumn>
-        </DxDataGrid>
-    </div>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <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"
+      />
+
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="total"
+        data-type="number"
+        caption="Total"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="total_selesai"
+        caption="Selesai"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="persen_selesai"
+        data-type="number"
+        caption="%"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="total_inproses"
+        data-type="number"
+        caption="In Progress"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="persen_inproses"
+        data-type="number"
+        caption="%"
+        :allow-resizing="false"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_dispatch"
+          data-type="number"
+          caption="Rata-Rata"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_dispatch"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_dispatch"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_dispatch"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_dispatch"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_response"
+          data-type="number"
+          caption="Rata-Rata"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_response"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_response"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_response"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_response"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+      <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="avg_durasi_recovery"
+          data-type="number"
+          caption="Rata-Rata"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="max_durasi_recovery"
+          data-type="number"
+          caption="Max"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="min_durasi_recovery"
+          data-type="number"
+          caption="Min"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_diatas_sla_recovery"
+          data-type="number"
+          caption=">SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_dibawah_sla_recovery"
+          data-type="number"
+          caption="≤SLA"
+          :allow-resizing="false"
+          css-class="custom-table-column"
+        />
+      </DxColumn>
+    </DxDataGrid>
+  </div>
 </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'
-import { computed, onMounted, ref, watch } from 'vue'
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import { ref } from 'vue'
 import { jsPDF } from 'jspdf'
 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 gql from 'graphql-tag';
+import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAPITULASI_GANGGUAN_ALL = gql`
-query rekapitulasiAllGangguan(
+  query rekapitulasiAllGangguan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiAllGangguan(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
-        avg_durasi_recovery
-        avg_durasi_response
-        max_durasi_dispatch
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_dispatch
-        min_durasi_recovery
-        min_durasi_response
-        persen_inproses
-        persen_selesai
-        nama_posko
-        total
-        total_diatas_sla_dispatch
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_dispatch
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
-        total_selesai
-        }
-}`;
+      avg_durasi_dispatch
+      avg_durasi_recovery
+      avg_durasi_response
+      max_durasi_dispatch
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_dispatch
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      nama_posko
+      total
+      total_diatas_sla_dispatch
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_dispatch
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_inproses
+      total_selesai
+    }
+  }
+`
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value, {
-                    ...item,
-                }];
-
-            })
-        }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-}
-const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
-
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5,
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
-
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true,
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
-
-        e.cancel = true
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
+        data.value = [
+          ...data.value,
+          {
+            ...item
+          }
+        ]
+      })
     }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
+const onExporting = (e: any) => {
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
+
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
+
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
+
+    e.cancel = true
+  }
+}
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
-const filters = ref();
-</script>
\ No newline at end of file
+const filters = ref()
+</script>
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index 5ea5241..860979d 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,144 +1,363 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
-            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget">
-            <DxSelection mode="single" />
-            <DxPaging :enabled="false" />
-            <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :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" />
-            <DxGroupPanel :visible="true" />
-            <DxGrouping :auto-expand-all="true" />
+  <Filters
+    :report-button="true"
+    @reset-form="dataReal = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" name="jenisGangguanGroup" data-field="jenisGangguan"
-                caption="Jenis Gangguan" css-class="custom-table-column" :group-index="0" />
-            <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
-                css-class="custom-table-column" />
-            <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-                    css-class="custom-table-column" />
-                <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
-                        caption="Jml" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-                        caption="%" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
-                        caption="Jml" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-                        caption="%" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
-            <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
-                <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-                        caption="Total" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-                        caption="Rata-Rata" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number"
-                        caption="Max" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number"
-                        caption="Min" css-class="custom-table-column" />
-                </DxColumn>
-                <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-                        caption=">SLA" css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-                        caption="≤SLA" css-class="custom-table-column" />
-                </DxColumn>
-            </DxColumn>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="dataReal"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :enabled="false" />
+      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
+      <DxLoadPanel
+        :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" />
+      <DxGroupPanel :visible="true" />
+      <DxGrouping :auto-expand-all="true" />
 
-            <DxSummary>
-                <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-                    display-format="{0}" />
-                <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-                    display-format="{0}" />
-            </DxSummary>
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="60"
+        alignment="center"
+        data-field="no"
+        caption="NO"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        name="jenisGangguanGroup"
+        data-field="jenisGangguan"
+        caption="Jenis Gangguan"
+        css-class="custom-table-column"
+        :group-index="0"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="jenisGangguan"
+        caption="Jenis Gangguan"
+        css-class="custom-table-column"
+      />
+      <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+        />
+        <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+      <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
+        <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+        <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+          />
+        </DxColumn>
+      </DxColumn>
+
+      <DxSummary>
+        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+        />
+      </DxSummary>
+    </DxDataGrid>
+  </div>
 </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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxGroupItem,
-    DxGroupPanel,
-    DxGrouping,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection,
-    DxSummary
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxGroupItem,
+  DxGroupPanel,
+  DxGrouping,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection,
+  DxSummary
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -147,6 +366,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -168,138 +388,139 @@ const GET_REKAP_JENIS_GANGGUAN = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      avg_durasi_dispatch
       avg_durasi_recovery
       avg_durasi_response
-      max_durasi_dispatch
       max_durasi_recovery
       max_durasi_response
-      min_durasi_dispatch
       min_durasi_recovery
       min_durasi_response
       persen_inproses
       persen_selesai
       tipe_permasalahan
       total
-      total_diatas_sla_dispatch
       total_diatas_sla_recovery
       total_diatas_sla_response
       total_dibawah_sla_recovery
       total_dibawah_sla_response
-      total_dibawah_sla_dispatch
       total_inproses
       total_selesai
     }
   }
 `
+
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: '',
+  idUid: 0,
+  idUp3: 0
 })
+
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
 
-    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 ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            let no = 0
-            queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
-                dataReal.value = [
-                    ...dataReal.value,
-                    {
-                        no: ++no,
-                        kode: item.tipe_permasalahan,
-                        jenisGangguan: item.tipe_permasalahan,
-                        laporan: {
-                            total: item.total,
-                            sudahSelesai: {
-                                jml: item.total_selesai,
-                                persen: item.persen_selesai
-                            },
-                            belumSelesai: {
-                                jml: item.total_inproses,
-                                persen: item.persen_inproses
-                            }
-                        },
-                        responseTime: {
-                            menit: {
-                                total: item.avg_durasi_response,
-                                rataRata: item.avg_durasi_response,
-                                max: item.max_durasi_response,
-                                min: item.min_durasi_response
-                            },
-                            laporan: {
-                                lebihSla: item.total_diatas_sla_response,
-                                kurangSla: item.total_dibawah_sla_response
-                            }
-                        },
-                        recoveryTime: {
-                            menit: {
-                                total: item.avg_durasi_recovery,
-                                rataRata: item.avg_durasi_recovery,
-                                max: item.max_durasi_recovery,
-                                min: item.min_durasi_recovery
-                            },
-                            laporan: {
-                                lebihSla: item.total_diatas_sla_recovery,
-                                kurangSla: item.total_dibawah_sla_recovery
-                            }
-                        }
-                    }
-                ]
-            })
-        }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((queryError) => {
-        console.log(queryError)
-    })
+  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 ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      let no = 0
+      queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
+        dataReal.value = [
+          ...dataReal.value,
+          {
+            no: ++no,
+            kode: item.tipe_permasalahan,
+            jenisGangguan: item.tipe_permasalahan,
+            laporan: {
+              total: item.total,
+              sudahSelesai: {
+                jml: item.total_selesai,
+                persen: item.persen_selesai
+              },
+              belumSelesai: {
+                jml: item.total_inproses,
+                persen: item.persen_inproses
+              }
+            },
+            responseTime: {
+              menit: {
+                total: item.avg_durasi_response,
+                rataRata: item.avg_durasi_response,
+                max: item.max_durasi_response,
+                min: item.min_durasi_response
+              },
+              laporan: {
+                lebihSla: item.total_diatas_sla_response,
+                kurangSla: item.total_dibawah_sla_response
+              }
+            },
+            recoveryTime: {
+              menit: {
+                total: item.avg_durasi_recovery,
+                rataRata: item.avg_durasi_recovery,
+                max: item.max_durasi_recovery,
+                min: item.min_durasi_recovery
+              },
+              laporan: {
+                lebihSla: item.total_diatas_sla_recovery,
+                kurangSla: item.total_dibawah_sla_recovery
+              }
+            }
+          }
+        ]
+      })
+    }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((queryError) => {
+    console.log(queryError)
+  })
 }
 
-const filters = ref();
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 8744152..7d24755 100755
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -1,56 +1,166 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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_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="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="170" alignment="center" data-field="nama_unit_lama" 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"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-                css-class="custom-table-column" />
-        </DxDataGrid>
-    </div>
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <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="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_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="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="170"
+        alignment="center"
+        data-field="nama_unit_lama"
+        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"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -59,15 +169,14 @@ import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -76,42 +185,44 @@ 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 position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
+
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
@@ -130,58 +241,68 @@ const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_unit_baru
-        id_unit_lama
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        nama_unit_baru
-        nama_unit_lama
-        no_laporan
-        no_telp_pelapor
-        pembuat_laporan
-        status_akhir
-        waktu_dialihkan
-        waktu_lapor
-        waktu_recovery
-        waktu_response
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_unit_baru
+      id_unit_lama
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      nama_unit_baru
+      nama_unit_lama
+      no_laporan
+      no_telp_pelapor
+      pembuat_laporan
+      status_akhir
+      waktu_dialihkan
+      waktu_lapor
+      waktu_recovery
+      waktu_response
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
+const { onResult, onError, loading, refetch } = useQuery(
+  GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN,
+  {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     idUlp: 0,
     idUid: 0,
     idUp3: 0
-})
-
+  }
+)
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3 } = params
-    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),
-        idUlp: ulp ? ulp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3 } = params
+
+  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),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index b71d1cb..aca60a2 100755
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -1,177 +1,276 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type10 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type10 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="jml_lapor" caption="Jml Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP" css-class="custom-table-column"
-                cell-template="data" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+      <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"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jml Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Response:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    IDPEL/NO METER:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Telp Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama ULP:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -179,18 +278,17 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -199,6 +297,7 @@ 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)
@@ -207,45 +306,45 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    dataDetail.value = selectedRowsData[0]
-    console.log(selectedRowsData[0])
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
 }
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -268,64 +367,66 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
-durasi_recovery_time
-durasi_response_time
-idpel_nometer
-jumlah_lapor
-keterangan_pelapor
-media
-nama_pelapor
-nama_unit
-no_laporan
-no_telp_pelapor
-status_akhir
-waktu_lapor
-
-waktu_recovery
-
-waktu_response
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      idpel_nometer
+      jumlah_lapor
+      keterangan_pelapor
+      media
+      nama_pelapor
+      nama_ulp
+      no_laporan
+      no_telp_pelapor
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
     }
   }
 `
 
 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),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
+  minJmlLapor: 1,
+  maxJmlLapor: 100,
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
-
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3 } = params
-    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),
-        idUlp: ulp ? ulp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3 } = params
+  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),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
+      console.log(data.value[0])
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 
-const filters = ref();
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index ea024ba..9cd1c78 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -1,168 +1,254 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type11 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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" cell-template="data" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
-                css-class="custom-table-column" cell-template="data" />
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+      <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"
+        cell-template="data"
+      />
+
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </div>
     </div>
-    <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Response:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    IDPEL/NO METER:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Telp Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama ULP:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -171,18 +257,16 @@ import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type11 from '@/components/Form/FiltersType/Type11.vue'
 import { ref } from 'vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -191,53 +275,54 @@ 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 position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    dataDetail.value = selectedRowsData[0]
-    console.log(selectedRowsData[0])
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
 }
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -260,56 +345,63 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        nama_unit
-        no_laporan
-        no_telp_pelapor
-        status_akhir
-        waktu_lapor
-        waktu_recovery
-        waktu_response
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      nama_ulp
+      no_laporan
+      no_telp_pelapor
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
     }
   }
 `
-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,
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-})
-const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3, maxTime, minTime } = params
-    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: minTime,
-        maxDurasiResponseTime: maxTime,
-        idUlp: ulp ? ulp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
 
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanResponseTime
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+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,
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
+})
+
+const filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3, maxTime, minTime } = params
+  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: minTime,
+    maxDurasiResponseTime: maxTime,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanResponseTime
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 9201591..ad9a789 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -1,169 +1,255 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type11 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type11 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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" cell-template="data" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
-                css-class="custom-table-column" cell-template="data" />
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+      <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"
+        cell-template="data"
+      />
+
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Response:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    IDPEL/NO METER:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Telp Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama ULP:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -171,19 +257,17 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 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,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -192,6 +276,7 @@ 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)
@@ -200,45 +285,45 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    dataDetail.value = selectedRowsData[0]
-    console.log(selectedRowsData[0])
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
 }
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -261,59 +346,62 @@ const GET_DATA = gql`
       idUid: $idUid
       idUp3: $idUp3
     ) {
-        alamat_pelapor
-durasi_recovery_time
-durasi_response_time
-idpel_nometer
-keterangan_pelapor
-media
-nama_pelapor
-nama_unit
-no_laporan
-no_telp_pelapor
-status_akhir
-waktu_lapor
-waktu_recovery
-waktu_response
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      nama_ulp
+      no_laporan
+      no_telp_pelapor
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
     }
   }
 `
 
 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,
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  minDurasiRecoveryTime: 0,
+  maxDurasiRecoveryTime: 0,
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { ulp, uid, up3, minTime, maxTime } = params
-    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: minTime,
-        maxDurasiRecoveryTime: maxTime,
-        idUlp: ulp ? ulp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanRecoveryTime
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
-
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3, minTime, maxTime } = params
+  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: minTime,
+    maxDurasiRecoveryTime: maxTime,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanRecoveryTime
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index fe713b3..f1c7b8d 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -1,177 +1,262 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
-                css-class="custom-table-column" cell-template="data" />
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </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="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]"
+        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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-        </DxDataGrid>
+      <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"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Response:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tanggal Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Jml Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.jml_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    IDPEL/NO METER:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Telp Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama ULP:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.idUlp" class-name="flex-1" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -179,19 +264,17 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 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,
-    DxPager,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -200,6 +283,7 @@ 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)
@@ -208,45 +292,45 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    dataDetail.value = selectedRowsData[0]
-    console.log(selectedRowsData[0])
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
 }
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -268,15 +352,15 @@ const GET_DATA = gql`
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
-      id_keluhan
       idpel_nometer
       keterangan_pelapor
       media
+      nama_ulp
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      idUlp
       status_akhir
+      waktu_lapor
       waktu_recovery
       waktu_response
     }
@@ -284,36 +368,40 @@ const GET_DATA = gql`
 `
 
 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),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    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),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  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),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index e61a1b7..b884aa2 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -1,166 +1,269 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-                css-class="custom-table-column" cell-template="data" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-                css-class="custom-table-column" cell-template="data" />
+      <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"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
 
-            <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Response Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
-                css-class="custom-table-column" cell-template="data" />
-            <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
-                css-class="custom-table-column" cell-template="data" />
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Response Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Recovery Time"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_media"
+        caption="Keterangan Media"
+        css-class="custom-table-column"
+        cell-template="data"
+      />
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Media:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_media"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Laporan:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Nama Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    No Telp Pelapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Alamat Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Pelapor:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Status:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Response:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Recovery:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Response Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_response_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Recovery Time:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.durasi_recovery_time" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Sumber Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Tgl Media:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">
-                    Keterangan Media:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media"
-                    class-name="flex-1 h-[56px]" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -168,19 +271,17 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 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,
-    DxPager,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -189,6 +290,7 @@ 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)
@@ -197,45 +299,45 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    dataDetail.value = selectedRowsData[0]
-    console.log(selectedRowsData[0])
+  dataDetail.value = selectedRowsData[0]
+  console.log(selectedRowsData[0])
 }
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const data = ref<any[]>([])
@@ -246,7 +348,6 @@ const GET_DATA = gql`
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-    $media: String!
   ) {
     daftarKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
@@ -254,19 +355,19 @@ const GET_DATA = gql`
       idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
-      media: $media
     ) {
       alamat_pelapor
       durasi_recovery_time
       durasi_response_time
-      id_keluhan
-      idpel_nometer
       keterangan_pelapor
       media
+      waktu_media
+      keterangan_media
+      waktu_lapor
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      idUlp
+      nama_ulp
       status_akhir
       waktu_recovery
       waktu_response
@@ -275,36 +376,40 @@ const GET_DATA = gql`
 `
 
 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),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    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),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  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),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
 
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
-const filters = ref();
+
+const filters = ref()
 </script>
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index a577960..802c810 100755
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -1,71 +1,191 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type3 @update:filters="(value) => filters = value" />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
-            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-            <DxSelection mode="single" />
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" 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" />
-            <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-            <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-            <DxColumnFixing :enabled="true" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type3 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <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" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="ULP" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="IDPEL/NO METER"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-                css-class="custom-table-column" />
+  <div id="data">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="true"
+    >
+      <DxSelection mode="single" />
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        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"
+      />
+      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumnFixing :enabled="true" />
 
-            <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-                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"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="ULP"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="IDPEL/NO METER"
+        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="no_telp_pelapor" caption="No Tlp Pelapor"
-                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="" caption="APKT Status" css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Tgl Penyelesaian"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Lapor Ulang" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
-                css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Issue Type" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Sub Issue Type"
-                css-class="custom-table-column" />
-        </DxDataGrid>
-    </div>
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+      />
+
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Tlp Pelapor"
+        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=""
+        caption="APKT Status"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Created By"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Tgl Penyelesaian"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Lapor Ulang"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Issue Type"
+        css-class="custom-table-column"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Sub Issue Type"
+        css-class="custom-table-column"
+      />
+    </DxDataGrid>
+  </div>
 </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 { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -74,113 +194,116 @@ 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 position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF()
+  if (e.format === 'pdf') {
+    const doc = new jsPDF()
 
-        exportToPdf({
-            jsPDFDocument: doc,
-            component: e.component,
-            indent: 5
-        }).then(() => {
-            doc.save(`.pdf`)
-        })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Employees')
+    exportToPdf({
+      jsPDFDocument: doc,
+      component: e.component,
+      indent: 5
+    }).then(() => {
+      doc.save(`.pdf`)
+    })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Employees')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    console.log(data)
+  const data = selectedRowsData[0]
+  console.log(data)
 }
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
- query daftarKeluhanDiselesaikanCC123
-(
+  query daftarKeluhanDiselesaikanCC123(
     $dateFrom: Date!
     $dateTo: Date!
     $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanDiselesaikanCC123
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        idUlp: $idUlp
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    daftarKeluhanDiselesaikanCC123(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      idUlp: $idUlp
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_keluhan
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        idUlp
-        status_akhir
-        waktu_recovery
-        waktu_response
-        }
-        }
+      alamat_pelapor
+      durasi_recovery_time
+      durasi_response_time
+      id_keluhan
+      idpel_nometer
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      idUlp
+      status_akhir
+      waktu_recovery
+      waktu_response
+    }
+  }
 `
 
 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),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
-    media: 'Twitter'
+  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+  idUlp: 0,
+  idUid: 0,
+  idUp3: 0,
+  media: 'Twitter'
 })
-const filters = ref();
+const filters = ref()
 
 const filterData = (params: any) => {
-    const dateValue = params.periode.split(' s/d ')
-    const { idUlp, uid, up3 } = params
-    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),
-        idUlp: idUlp ? idUlp.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0,
-        media: media
-    })
+  const dateValue = params.periode.split(' s/d ')
+  const { idUlp, uid, up3 } = params
+  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),
+    idUlp: idUlp ? idUlp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    media: media
+  })
 
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 </script>