From d8980147268011774c7c282d22edce23105618df Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Tue, 27 Feb 2024 16:21:54 +0700
Subject: [PATCH] Refactor code for improved performance and readability

---
 .env.development                           |   4 +-
 src/assets/css/style.css                   |   5 +
 src/components/DatePicker.vue              |  27 +-
 src/components/Form/Filters.vue            |  16 +-
 src/components/Form/FiltersType/Type1.vue  |  29 +-
 src/components/Form/FiltersType/Type16.vue |  13 +-
 src/components/Form/FiltersType/Type6.vue  |  68 ++-
 src/components/Form/FiltersType/Type7.vue  |  78 +--
 src/components/Form/InputNumber.vue        |  11 +-
 src/components/Form/InputWithSuffix.vue    |  30 +-
 src/components/InputText.vue               | 100 ++--
 src/components/Pages/Gangguan/Table_1.vue  | 421 ++++++++++-----
 src/components/Pages/Gangguan/Table_2.vue  | 587 +++++++++++++--------
 src/components/Pages/Gangguan/Table_3.vue  | 474 +++++++++++++----
 src/components/Pages/Gangguan/Table_4.vue  | 351 ++++++++----
 src/components/Pages/Gangguan/Table_6.vue  | 327 ++++++++----
 src/router/index.ts                        |   2 +-
 src/utils/graphql.ts                       |  20 +-
 src/utils/network.ts                       |  14 +-
 19 files changed, 1711 insertions(+), 866 deletions(-)

diff --git a/.env.development b/.env.development
index 53f7347..37809dd 100755
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,6 @@
 VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
-VITE_APP_NAME='Executive Information System'
\ No newline at end of file
+VITE_APP_NAME='Executive Information System'
+VITE_APP_GRAPHQL_ENDPOINT=http://192.168.5.213:32169/graphql
+VITE_APP_REST_ENDPOINT=http://192.168.5.213:32180
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 4a83dfe..4086efc 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -4280,6 +4280,11 @@ body {
   border-color: rgb(104 157 170 / var(--tw-border-opacity));
 }
 
+.focus\:border-indigo-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
 .focus\:bg-gray-300\/10:focus {
   background-color: rgb(209 213 219 / 0.1);
 }
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index df4e8cd..e31c68e 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
-
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
 const dateValue = ref('')
@@ -9,27 +8,27 @@ const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
 })
-
 const emit = defineEmits(['update:dateValue'])
+
 const customShortcuts = () => {
   return [
     {
-      label: "Last 15 Days",
+      label: 'Last 15 Days',
       atClick: () => {
-        const date = new Date();
-        return [new Date(date.setDate(date.getDate() + 1)), date];
-      },
+        const date = new Date()
+        return [new Date(date.setDate(date.getDate() + 1)), date]
+      }
     },
     {
-      label: "Last Years",
+      label: 'Last Years',
       atClick: () => {
-        const date = new Date();
-        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
-      },
-    },
-   
-  ];
-};
+        const date = new Date()
+        return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()]
+      }
+    }
+  ]
+}
+
 watch(dateValue, (newValue) => {
   emit('update:dateValue', newValue)
 })
diff --git a/src/components/Form/Filters.vue b/src/components/Form/Filters.vue
index 09a8b95..d2a389b 100755
--- a/src/components/Form/Filters.vue
+++ b/src/components/Form/Filters.vue
@@ -1,11 +1,15 @@
-<!-- ss -->
 <script setup lang="ts">
-// components
 import Button from '@/components/Button.vue'
-// icons
 import { PhArrowsCounterClockwise, PhFileText, PhMagnifyingGlass } from '@phosphor-icons/vue'
 
-const emit = defineEmits(['runSearch','resetForm'])
+defineProps({
+  reportButton: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['runSearch', 'resetForm', 'runReport'])
 </script>
 
 <template>
@@ -26,10 +30,12 @@ const emit = defineEmits(['runSearch','resetForm'])
         </Button>
 
         <Button
+          v-if="reportButton"
           label="Lihat Laporan"
           style-type="outline"
           class-name="bg-white"
-        > 
+          @on:click="() => emit('runReport')"
+        >
           <PhFileText size="18" class="ml-1" weight="regular" />
         </Button>
 
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index f17686d..2cc5c12 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -11,6 +11,7 @@ import {
   fetchUid
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -39,6 +40,7 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   up3.value = value
   selectedUp3Posko(value)
+  console.log(itemsPosko)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
 }
@@ -57,28 +59,39 @@ 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">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <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/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index f2141b3..1c5469f 100755
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -13,6 +13,7 @@ import {
   itemsMedia
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -20,7 +21,7 @@ const mediaPlaceholder = 'Semua Media'
 const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
-const media = ref({ id: "", name: mediaPlaceholder })
+const media = ref({ id: '', name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
@@ -53,10 +54,12 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
+
 const setMedia = (value: any) => {
   media.value = value
   data.value.media = value
 }
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -116,12 +119,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/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index e058acd..800fc87 100755
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -2,15 +2,24 @@
 import InputNumber from '@/components/Form/InputNumber.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { onMounted, ref } from 'vue';
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref } from 'vue'
+
 const emit = defineEmits(['update:filters'])
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
-const up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -41,50 +50,63 @@ 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" />
   </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">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <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 :value="data.minJmlLapor" @update:time-value="(value) => {
-        data.minJmlLapor = value
-      }" />
+      <InputNumber
+        :value="data.minJmlLapor"
+        @update:time-value="(value) => (data.minJmlLapor = value)"
+      />
       <small class="flex items-center">s/d</small>
-      <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => {
-        data.maxJmlLapor = value
-      }" />
+      <InputNumber
+        :value="data.maxJmlLapor"
+        @update:time-value="(value) => (data.maxJmlLapor = value)"
+      />
     </div>
   </div>
 </template>
-
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index 66a8bd1..07f03f9 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -1,18 +1,26 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import InputWithSuffix from '../InputWithSuffix.vue';
-import { useTotalDuration } from '@/stores/totalDuration';
+import InputWithSuffix from '../InputWithSuffix.vue'
+import { useTotalDuration } from '@/stores/totalDuration'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { onMounted, ref, watch } from 'vue';
 const emit = defineEmits(['update:filters'])
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
-const up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -21,6 +29,7 @@ const data = ref({
   minTime: useTotalDuration().getDataMin().split(' ')[0],
   maxTime: useTotalDuration().getDataMax().split(' ')[0]
 })
+
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
@@ -49,14 +58,12 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-
 ]
 
 const setMin = (value: any) => {
   console.log(value)
   data.value.minTime = value
   useTotalDuration().setDataMin(value)
-
 }
 const setMax = (value: any) => {
   data.value.maxTime = value
@@ -65,17 +72,17 @@ const setMax = (value: any) => {
 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)')
@@ -84,38 +91,50 @@ const changeDuration = (value: any) => {
 watch(data, (newValue) => {
   emit('update:filters', newValue)
 })
+
 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" />
   </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">Posko:</label>
 
-    <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
+    <Select
+      @update:selected="setPosko($event)"
+      :data="itemsPosko"
+      :selected="posko"
+      :placeholder="poskoPlaceholder"
+    />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <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">
@@ -125,12 +144,9 @@ onMounted(() => {
       <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix 
-        :value="`${data.minTime} Menit`"
-         />
+        <InputWithSuffix :value="`${data.minTime} Menit`" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
-        :value="`${data.maxTime} Menit`"/>
+        <InputWithSuffix :value="`${data.maxTime} Menit`" />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/InputNumber.vue b/src/components/Form/InputNumber.vue
index 9d1a44c..79d16a1 100755
--- a/src/components/Form/InputNumber.vue
+++ b/src/components/Form/InputNumber.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = defineProps({
+defineProps({
   placeholder: {
     type: String,
     default: ''
@@ -16,15 +16,16 @@ const props = defineProps({
   },
   value: {
     type: Number,
-    default: ''
+    default: 1
   }
 })
+
 const emit = defineEmits(['update:timeValue'])
 const timeValue = ref(1)
+
 watch(timeValue, (newValue) => {
   emit('update:timeValue', newValue)
 })
-
 </script>
 
 <template>
@@ -38,8 +39,8 @@ watch(timeValue, (newValue) => {
       :readonly="readonly"
       inputmode="numeric"
       pattern="[0-9.]*"
-      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
-      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
+      onblur="this.value = parseInt(this.value) ? this.value : 1"
+      oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
       class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
     />
   </div>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index d2e85a3..6c85be8 100755
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
 const props = defineProps({
   placeholder: {
     type: String,
@@ -18,25 +16,25 @@ const props = defineProps({
     type: String,
     default: '1 Menit'
   }
- 
 })
-const handleInput = (e :any) => {
-  e.value = e.value.replace(/[^0-9.]/g, '')
+
+const handleInput = (e: any) => {
+  e.target.value = e.target.value.replace(/[^0-9.]/g, '')
 }
-const handleBlur = (e :any) => {
-  e.value = e.value ? e.value + ' Menit' : ''
+
+const handleBlur = (e: any) => {
+  e.target.value = e.target.value ? e.target.value + ' Menit' : ''
 }
-const handleFocus = (e:any) => {
-  e.value = e.value.replace(/[^0-9.]/g, '')
+
+const handleFocus = (e: any) => {
+  e.target.value = e.target.value.replace(/[^0-9.]/g, '')
 }
 </script>
 
 <template>
-  <div 
- 
-  class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
     <input
-     :value="props.value"
+      :value="props.value"
       autocomplete="off"
       type="text"
       :placeholder="placeholder"
@@ -44,9 +42,9 @@ const handleFocus = (e:any) => {
       inputmode="numeric"
       pattern="[0-9.]*"
       :disabled="disabled"
-      @oninput="handleInput($event)"
-      @onblur="handleBlur($event)"
-      @onfocus="handleFocus($event)"
+      @input="handleInput($event)"
+      @blur="handleBlur($event)"
+      @focus="handleFocus($event)"
       class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
     />
   </div>
diff --git a/src/components/InputText.vue b/src/components/InputText.vue
index e51eb58..6ccd13f 100755
--- a/src/components/InputText.vue
+++ b/src/components/InputText.vue
@@ -2,58 +2,74 @@
 import { ref } from 'vue'
 
 const props = defineProps({
-    type: {
-        type: String,
-        default: "text",
-    },
-    placeholder: {
-        type: String,
-        default: "",
-    },
-    value: {
-        type: String,
-        default: "",
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    readonly: {
-        type: Boolean,
-        default: false,
-    },
-    className: {
-        type: String,
-        default: "",
-    }
+  type: {
+    type: String,
+    default: 'text'
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  className: {
+    type: String,
+    default: ''
+  }
 })
 
 const emit = defineEmits(['update:value'])
 
 const updateValue = (event: Event) => {
-    const value = (event.target as HTMLInputElement).value;
-    emit('update:value', value)
+  const value = (event.target as HTMLInputElement).value
+  emit('update:value', value)
 }
 
 const inputType = ref(props.type)
 const switchInputType = () => {
-    inputType.value = inputType.value == 'password' ? 'text' : 'password'
+  inputType.value = inputType.value == 'password' ? 'text' : 'password'
 }
-
 </script>
 
 <template>
-    <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
-        <input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
-            :disabled="disabled" :readonly="readonly"
-            :class="['w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0']" />
-        <span @click="switchInputType" v-if="type == 'password'"
-            class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
-            <svg width="20" height="20" viewBox="0 0 20 20"
-                :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']">
-                <path
-                    d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z" />
-            </svg>
-        </span>
-    </div>
-</template>
\ No newline at end of file
+  <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
+    <input
+      autocomplete="off"
+      :type="inputType"
+      :placeholder="placeholder"
+      :value="value"
+      @input="updateValue($event)"
+      :disabled="disabled"
+      :readonly="readonly"
+      :class="[
+        'w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0'
+      ]"
+    />
+    <span
+      @click="switchInputType"
+      v-if="type == 'password'"
+      class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit"
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        :class="[inputType == 'password' ? 'fill-gray-500' : 'fill-primary-500']"
+      >
+        <path
+          d="M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 15C7.5953 15 5.49452 14.1258 3.75546 12.4023C3.0419 11.6927 2.43483 10.8836 1.95312 10C2.4347 9.11636 3.04179 8.30717 3.75546 7.59766C5.49452 5.87422 7.5953 5 9.99999 5C12.4047 5 14.5055 5.87422 16.2445 7.59766C16.9595 8.307 17.5679 9.11619 18.0508 10C17.4875 11.0516 15.0336 15 9.99999 15ZM9.99999 6.25C9.25831 6.25 8.53329 6.46993 7.9166 6.88199C7.29992 7.29404 6.81927 7.87971 6.53544 8.56494C6.25162 9.25016 6.17735 10.0042 6.32205 10.7316C6.46674 11.459 6.82389 12.1272 7.34834 12.6517C7.87279 13.1761 8.54097 13.5333 9.2684 13.6779C9.99583 13.8226 10.7498 13.7484 11.4351 13.4645C12.1203 13.1807 12.7059 12.7001 13.118 12.0834C13.5301 11.4667 13.75 10.7417 13.75 10C13.749 9.00576 13.3535 8.05253 12.6505 7.34949C11.9475 6.64645 10.9942 6.25103 9.99999 6.25ZM9.99999 12.5C9.50554 12.5 9.02219 12.3534 8.61107 12.0787C8.19994 11.804 7.87951 11.4135 7.69029 10.9567C7.50107 10.4999 7.45157 9.99723 7.54803 9.51227C7.64449 9.02732 7.88259 8.58186 8.23222 8.23223C8.58186 7.8826 9.02731 7.6445 9.51227 7.54804C9.99722 7.45157 10.4999 7.50108 10.9567 7.6903C11.4135 7.87952 11.804 8.19995 12.0787 8.61107C12.3534 9.0222 12.5 9.50555 12.5 10C12.5 10.663 12.2366 11.2989 11.7678 11.7678C11.2989 12.2366 10.663 12.5 9.99999 12.5Z"
+        />
+      </svg>
+    </span>
+  </div>
+</template>
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 3783e22..21a6e1e 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,65 +1,203 @@
 <template>
-  <Filters @run-search="() => {
-    filterData(filters)
-  }" class="mb-4">
-    <Type1 @update:filters="(value) => {
-      filters = value
-    }
-      " />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="dataTable">
-    <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data" key-expr="no_laporan"
-      :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">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)]"
+      :remote-operations="true"
+      :data-source="data"
+      key-expr="no_laporan"
+      :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"
+    >
       <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" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
       <DxSelection mode="single" />
       <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
-        caption="Pembuat Laporan" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
-        caption="Tgl Dialihkan" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-        caption="Posko Awal" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
-        caption="Posko Tujuan" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir" caption="Status"
-        cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        cell-template="data" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko" caption="Posko"
-        cell-template="data" />
+      <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
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="pembuat_laporan"
+        caption="Pembuat Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_lama"
+        caption="Posko Awal"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_baru"
+        caption="Posko Tujuan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="posko"
+        caption="Posko"
+        cell-template="data"
+      />
       <template #data="{ data }">
         <span class="cursor-pointer" @click="showData()">
           {{ data.text }}
@@ -68,135 +206,107 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Dialihkan ke Posko Lain"
+    @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>
+        <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">
-          Pembuat Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
         <InputText :readonly="true" :value="dataDetail?.pembuat_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">
-          Tanggal Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</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 Dialihkan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
         <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" 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 Respon:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</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>
+        <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">
-          Durasi Response Time:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi 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">
-          Durasi Recovery Time:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi 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">
-          Posko Awal:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" 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">
-          Posko Tujuan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" 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>
+        <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>
+        <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>
+        <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]" />
+        <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">
-          Pembuat Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</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>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
         <InputText :readonly="true" :value="dataDetail?.keterangan_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">
-          Sumber Laporan:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</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">
-          Posko:
-        </h3>
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
         <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
-
   </DetailDialog>
 </template>
 
@@ -210,66 +320,96 @@ import {
   DxLoadPanel,
   DxPager,
   DxPaging,
-  DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
-
-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 { useDialogStore } from '@/stores/dialog'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dialog = useDialogStore()
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const runReset = ref(false)
 const closeDetail = () => {
   showDetail.value = false
 }
-const onExporting = (e: any) => {
 
+const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape',
       unit: 'mm',
-      format: 'F4',
+      format: 'F4'
     })
-    // Add title on each page
-    const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
 
     // Initialize page number
-    const pageNumber = ref(1);
+    const pageNumber = ref(1)
     autoTable(doc, {
-      head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+      head: [
+        [
+          'No Laporan',
+          'Pembuat Laporan',
+          'Tgl Lapor',
+          'Tgl Dialihkan',
+          'Tgl Response',
+          'Tgl Recovery',
+          'Durasi Response Time',
+          'Durasi Recovery Time',
+          'Posko Awal',
+          'Posko Tujuan',
+          'Status',
+          'IDPEL/NO METER',
+          'Nama Pelapor',
+          'Alamat Pelapor',
+          'No Telp Pelapor',
+          'Keterangan Pelapor',
+          'Sumber Lapor',
+          'Posko'
+        ]
+      ],
       startY: 10,
-      body: data.value.map((item) =>
-        [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
+      body: data.value.map((item) => [
+        item.no_laporan,
+        item.pembuat_laporan,
+        item.waktu_lapor,
+        item.waktu_dialihkan,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time,
+        item.durasi_recovery_time,
+        item.nama_posko_lama,
+        item.nama_posko_baru,
+        item.status_akhir,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.posko
+      ]),
       styles: {
         fontSize: 6,
         cellWidth: 'wrap'
-      },
-
-
+      }
     })
     doc.setProperties({
       title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-    });
-    
-    pageNumber.value++; // Increment the pageNumber
+      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
+    })
+
+    pageNumber.value++ // Increment the pageNumber
     doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
 
     // exportToPdf({
@@ -289,7 +429,10 @@ const onExporting = (e: any) => {
       autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DaftarGangguanDialihkanKePoskoLain.xlsx')
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'DaftarGangguanDialihkanKePoskoLain.xlsx'
+        )
       })
     })
 
@@ -332,15 +475,19 @@ 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),
+    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.daftarGangguanDialihkanKePoskoLain
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index d237ad4..e29179b 100755
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -1,166 +1,271 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type6 @update:filters="(value) => {
-            filters = value
-        }
-            " />
-    </Filters>
-    <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :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.sync="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 css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No Laporan" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-                caption="Tgl Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" cell-template="data" />
-            <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-                cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" cell-template="data" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-                cell-template="data" />
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type6 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-            <template #data="{ data }">
-                <span class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </span>
-            </template>
-        </DxDataGrid>
+  <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=""
+      :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.sync="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
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="data"
+      />
+
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
+    @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">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">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/NOMETER:</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" :value="dataDetail?.alamat_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">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_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">Sumper 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">Unit Layanan Pelanggan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @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">
-                    Tanggal 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">
-                    Jumlah 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">
-                    Durasi 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">
-                    Durasi Response 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" 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">
-                    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" :value="dataDetail?.keterangan_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">
-                    Sumper Lapor:
-                </h3>
-                <InputText :readonly="true" :value="dataDetail?.sumber_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">
-                    Posko:
-                </h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.posko" class-name="flex-1 h-[56px]" />
-            </div>
-        </div>
-
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -168,96 +273,116 @@ import Filters from '@/components/Form/Filters.vue'
 import Type6 from '@/components/Form/FiltersType/Type6.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 DetailDialog from '@/components/Dialogs/DetailDialog.vue';
-import InputText from '@/components/InputText.vue';
-import { useQuery } from '@vue/apollo-composable';
-import gql from 'graphql-tag';
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+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 data = ref<any[]>([])
 const dataDetail = ref<any>({})
 const showDetail = ref(false)
+const filters = ref()
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    dataDetail.value = data
+  const data = selectedRowsData[0]
+  dataDetail.value = data
 }
 
 const showData = () => {
-    showDetail.value = true
+  showDetail.value = true
 }
 
 const closeDetail = () => {
-    showDetail.value = false
+  showDetail.value = false
 }
 
 const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
-query gangguan ($minJmlLapor: Int!, $maxJmlLapor: Int!, $dateFrom: Date!, $dateTo: Date!, $posko: Int!, $idUid: Int!, $idUp3: Int!) {
-  daftarGangguanMelaporLebihDariSatuKali(
-    minJmlLapor: $minJmlLapor
-    maxJmlLapor: $maxJmlLapor
-    dateFrom: $dateFrom
-    dateTo: $dateTo
-    posko: $posko
-    idUid: $idUid
-    idUp3: $idUp3
+  query gangguan(
+    $minJmlLapor: Int!
+    $maxJmlLapor: Int!
+    $dateFrom: Date!
+    $dateTo: Date!
+    $posko: Int!
+    $idUid: Int!
+    $idUp3: Int!
   ) {
-    alamat_pelapor
-    pembuat_laporan
-    durasi_response_time
-    durasi_recovery_time
-    idpel_nometer
-    jumlah_lapor
-    keterangan_pelapor
-    media
-    nama_pelapor
-    no_laporan
-    no_telp_pelapor
-    status_akhir
-    waktu_lapor
-    waktu_recovery
-    waktu_response
-    nama_posko
+    daftarGangguanMelaporLebihDariSatuKali(
+      minJmlLapor: $minJmlLapor
+      maxJmlLapor: $maxJmlLapor
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+    ) {
+      alamat_pelapor
+      pembuat_laporan
+      durasi_response_time
+      durasi_recovery_time
+      idpel_nometer
+      jumlah_lapor
+      keterangan_pelapor
+      media
+      nama_pelapor
+      no_laporan
+      no_telp_pelapor
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
+      nama_posko
+    }
   }
-}`;
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
-    minJmlLapor: 1,
-    maxJmlLapor: 1,
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  minJmlLapor: 1,
+  maxJmlLapor: 1,
+  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 { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params;
-    const dateValue = params.periode.split(' s/d ');
-    refetch({
-        minJmlLapor: minJmlLapor ? minJmlLapor : 1,
-        maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
-        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.daftarGangguanMelaporLebihDariSatuKali;
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
+  const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+    maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+    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.daftarGangguanMelaporLebihDariSatuKali
+    }
+    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_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 9f4ba9a..c71967e 100755
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -1,55 +1,277 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type7 @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">
+    <Type7 @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="referensi_marking"
-                caption="Referensi Marking" />
-            <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="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="onSelectionChanged"
+      :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"
+        cell-template="data"
+      />
 
-        </DxDataGrid>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="referensi_marking"
+        caption="Referensi Marking"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="data"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="data"
+      />
+
+      <template #data="{ data }">
+        <span class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </span>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @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">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">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/NOMETER:</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" :value="dataDetail?.alamat_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">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_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">Sumper 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">Unit Layanan Pelanggan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          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">Penyebab:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.penyebab"
+          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">Tindakan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.tindakan"
+          class-name="flex-1 h-[56px]"
+        />
+      </div>
     </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -57,40 +279,71 @@ import Filters from '@/components/Form/Filters.vue'
 import Type7 from '@/components/Form/FiltersType/Type7.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 { useQuery } from '@vue/apollo-composable';
-import gql from 'graphql-tag';
+import {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+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 data = ref<any[]>([])
-const filterData = (params: any) => {
-    const { minTime, maxTime, 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),
-        minDurasiResponseTime : minTime ? minTime : 0,
-        maxDurasiResponseTime : maxTime ? maxTime : 1,
-        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.daftarGangguanResponseTime;
-        }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
+const dataDetail = ref<any>({})
+const showDetail = ref(false)
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
 }
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
+const filterData = (params: any) => {
+  const { minTime, maxTime, 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),
+    minDurasiResponseTime: minTime ? minTime : 0,
+    maxDurasiResponseTime: maxTime ? maxTime : 1,
+    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.daftarGangguanResponseTime
+    }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
+}
+
 const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
-query daftarGangguanResponseTime(
+  query daftarGangguanResponseTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiResponseTime: Int!
@@ -98,42 +351,43 @@ query daftarGangguanResponseTime(
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanResponseTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        minDurasiResponseTime: $minDurasiResponseTime
-        maxDurasiResponseTime: $maxDurasiResponseTime
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      minDurasiResponseTime: $minDurasiResponseTime
+      maxDurasiResponseTime: $maxDurasiResponseTime
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        is_marking
-        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
+      is_marking
+      no_laporan
+      no_telp_pelapor
+      nama_posko
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
     }
-}`;
+  }
+`
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    minDurasiResponseTime: 1, //menit
-    maxDurasiResponseTime: 1,// menit
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  minDurasiResponseTime: 1, //menit
+  maxDurasiResponseTime: 1, // menit
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index a50d7f2..d650ec5 100755
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -1,98 +1,219 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type7 @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">
+    <Type7 @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="is_marking"
-                caption="Referensi Marking" />
-            <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="is_marking"
+        caption="Referensi Marking"
+      />
+      <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 Type7 from '@/components/Form/FiltersType/Type7.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 { 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 {
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
+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 data = ref<any[]>([])
 
 const filterData = (params: any) => {
-    const { minDurasiRecoveryTime, maxDurasiRecoveryTime, 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),
-        minDurasiRecoveryTime: minDurasiRecoveryTime ? minDurasiRecoveryTime : 1,
-        maxDurasiRecoveryTime: maxDurasiRecoveryTime ? maxDurasiRecoveryTime : 1,
-        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.daftarGangguanRecoveryTime;
-        }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError(error => {
-        console.log(error)
-    })
+  const { minTime, maxTime, 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),
+    minDurasiRecoveryTime: minTime ? minTime : 0,
+    maxDurasiRecoveryTime: maxTime ? maxTime : 1,
+    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.daftarGangguanRecoveryTime
+    }
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
+
 const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
-query daftarGangguanRecoveryTime(
+  query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
@@ -100,44 +221,44 @@ query daftarGangguanRecoveryTime(
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     daftarGangguanRecoveryTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        minDurasiRecoveryTime: $minDurasiRecoveryTime
-        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      minDurasiRecoveryTime: $minDurasiRecoveryTime
+      maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        is_marking
-        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
+      is_marking
+      no_telp_pelapor
+      nama_posko
+      status_akhir
+      waktu_lapor
+      waktu_recovery
+      waktu_response
+    }
+  }
+`
 
 const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    minDurasiRecoveryTime: 1, //menit
-    maxDurasiRecoveryTime: 1,// menit
-    posko: 0,
-    idUid: 0,
-    idUp3: 0,
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  minDurasiRecoveryTime: 1, //menit
+  maxDurasiRecoveryTime: 1, // menit
+  posko: 0,
+  idUid: 0,
+  idUp3: 0
 })
 
 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 e919518..c938d4e 100755
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -1,46 +1,149 @@
 <template>
-      <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type16 @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 @run-search="() => filterData(filters)" class="mb-4">
+    <Type16 @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"
+      />
 
-            <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="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="status_akhir" caption="Status" />
-            <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="waktu_media" caption="Tgl Media" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media" />
-
-        </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="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="status_akhir"
+        caption="Status"
+      />
+      <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="waktu_media"
+        caption="Tgl Media"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Keterangan Media"
+      />
+    </DxDataGrid>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -48,81 +151,93 @@ import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.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,
+  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)
 const data = ref<any[]>([])
 const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
-query daftarGangguanBerdasarkanMedia(
+  query daftarGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
-    $media : String!
-) {
+    $media: String!
+  ) {
     daftarGangguanBerdasarkanMedia(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
-        media: $media
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
+      media: $media
     ) {
-        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_media
-        waktu_lapor
-        waktu_recovery
-        waktu_response
-        keterangan_media
-        }
-}`;
+      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_media
+      waktu_lapor
+      waktu_recovery
+      waktu_response
+      keterangan_media
+    }
+  }
+`
 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),
-        posko: 0,
-        idUid: 0,
-        idUp3: 0,
-        media : "Twitter"
-    })
+  dateFrom: new Date().toISOString().slice(0, 10),
+  dateTo: new Date().toISOString().slice(0, 10),
+  posko: 0,
+  idUid: 0,
+  idUp3: 0,
+  media: 'Twitter'
+})
 const filterData = (params: any) => {
-    const { posko, uid, up3, media } = 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,
-        media : media ? media.id : ""
-    })
-    onResult(queryResult => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanBerdasarkanMedia;
-            
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { posko, uid, up3, media } = 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,
+    media: media ? media.id : ''
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanBerdasarkanMedia
+    }
+    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/router/index.ts b/src/router/index.ts
index 6bac188..ea54da9 100755
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -531,7 +531,7 @@ export const routes: RouteRecordRaw[] = [
       },
       {
         path: 'check-in-out',
-        name: 'Check In OutCheck In Dan Check Out',
+        name: 'Check In Dan Check Out',
         children: [
           {
             path: 'laporan',
diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
index 42650f3..2dab2c2 100755
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -1,12 +1,10 @@
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
 
 export const apolloClient = () => {
-
-  const httpLink =  createHttpLink({
-    uri: 'http://10.1.50.173:32180/graphql',
-    credentials: 'include', // Include credentials for cross-origin requests
-  });
-
+  const httpLink = createHttpLink({
+    uri: import.meta.env.VITE_APP_GRAPHQL_ENDPOINT,
+    credentials: 'include' // Include credentials for cross-origin requests
+  })
 
   const apolloClient = new ApolloClient({
     cache: new InMemoryCache(),
@@ -16,9 +14,9 @@ export const apolloClient = () => {
       'Accept-Encoding': 'gzip, deflate',
       'Cache-Control': 'no-cache',
       Connection: 'keep-alive',
-      'Content-Type': 'application/json',
+      'Content-Type': 'application/json'
       // Add other headers as needed
-    },
-  });
-  return apolloClient;
-}
\ No newline at end of file
+    }
+  })
+  return apolloClient
+}
diff --git a/src/utils/network.ts b/src/utils/network.ts
index 18e1822..e350a1b 100755
--- a/src/utils/network.ts
+++ b/src/utils/network.ts
@@ -1,5 +1,6 @@
 import axios from 'axios'
-const url = 'http://10.1.50.173:32181'
+
+const url = import.meta.env.VITE_APP_REST_ENDPOINT
 const instance = axios.create({
   // baseURL: 'http://192.168.1.84:32180'
   baseURL: url
@@ -13,4 +14,13 @@ const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
-export { getUid, getUp3, getPosko, getUlp, getMedia, getJenisTransaksi, getUidRegional, getRegional }
+export {
+  getUid,
+  getUp3,
+  getPosko,
+  getUlp,
+  getMedia,
+  getJenisTransaksi,
+  getUidRegional,
+  getRegional
+}