diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 8c0adbd..f1a85c4 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -58,13 +58,17 @@ 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 :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+      >Unit Pelaksanaan Pelayanan Pelanggan:</label
+    >
 
     <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
   </div>
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index 962353a..1fd61ef 100644
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -29,7 +29,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 0dc2729..614b70a 100644
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -29,7 +29,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
index 91533ab..40658f5 100644
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -30,7 +30,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 2fe614a..98b1e49 100644
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -30,7 +30,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
index f705d7d..e405774 100644
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -29,6 +29,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type15.vue b/src/components/Form/FiltersType/Type15.vue
index 1760098..5492379 100644
--- a/src/components/Form/FiltersType/Type15.vue
+++ b/src/components/Form/FiltersType/Type15.vue
@@ -20,6 +20,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index f8e518c..05e4601 100644
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -35,6 +35,9 @@ fetchMedia();
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
index 90b56cb..5f752f9 100644
--- a/src/components/Form/FiltersType/Type17.vue
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -8,7 +8,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index dbb0f11..fd8c3ab 100644
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -3,7 +3,7 @@ import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 fetchData();
 
 const departments = [
@@ -20,7 +20,7 @@ const departments = [
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="selectedUid($event)" :data="items" placeholder="Semua Unit Induk Distribusi/Wilayah" />
+    <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 0f1db07..1e89bf4 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,8 +1,7 @@
 <!-- <script setup lang="ts">
 import Select from '@/components/Select.vue'
-import { selectedUid,  selectedUp3Ulp, fetchData, items, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
+import { selectedUid,  selectedUp3Ulp, fetchUid, itemsUid, itemsUp3, itemsUlp,itemsRegional ,months, years} from './reference';
 import { ref } from 'vue';
-fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@@ -19,7 +18,7 @@ const setRegional = (value: any) => {
 };
 const setUid = (value: any) => {
   uid.value = value;
-  selectedUid(value);
+  selectedUid(value); 
   uppp.value = { id: 0, name: up3Placholder };
 };
 
@@ -33,6 +32,7 @@ const setUlp = (value: any) => {
   ulp.value = value;
   selectedUp3Ulp(value);
 };
+
 </script>
 
 <template>
@@ -45,7 +45,7 @@ const setUlp = (value: any) => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder"  />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder"  />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index e6a1adf..356b9fa 100644
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -1,7 +1,7 @@
 <!-- <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp,selectedUlp, fetchData, items, itemsUp3, itemsUlp } from './reference';
+import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
 import { ref } from 'vue';
 fetchData();
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -33,7 +33,7 @@ const setUlp = (value: any) => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="setUid($event)" :data="items" :placeholder="uidPlaceholder" />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -51,7 +51,10 @@ const setUlp = (value: any) => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template> -->
 <template></template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index 8bbb211..524e921 100644
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -37,6 +37,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index 1e4286f..877e7fa 100644
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -27,6 +27,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 00bf8bf..1aaa92b 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -2,7 +2,7 @@
   import InputNumber from '@/components/Form/InputNumber.vue'
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
-  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchData, items,itemsUp3, itemsPosko} from './reference';
+  import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
 import { useTotalReport } from '@/stores/totalReport';
   fetchData();
   const changeMinReport = (value: any) => {
@@ -17,7 +17,7 @@ import { useTotalReport } from '@/stores/totalReport';
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select @update:selected="selectedUid($event)" :data="items"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+    <Select @update:selected="selectedUid($event)" :data="itemsUid"  placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -37,7 +37,10 @@ import { useTotalReport } from '@/stores/totalReport';
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index fb5e817..ae54627 100644
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -61,7 +61,10 @@ import { ref } from 'vue';
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index 467c9cd..db03adb 100644
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -21,6 +21,9 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index ebbe9f1..5e9fd0c 100644
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -28,7 +28,10 @@
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-    <DatePicker />
+     <DatePicker @update:date-value="(value) => {
+        data.periode = value
+      }
+      " />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 91a120b..1e0c0df 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -53,276 +53,184 @@
         :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="tanggal_laporan"
-        caption="Tgl Lapor"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_dialihkan"
-        caption="Tgl Dialihkan"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_respon"
-        caption="Tgl Response"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="150"
-        alignment="center"
-        data-field="tanggal_recovery"
-        caption="Tgl Recovery"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="durasi_respon_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="posko_asal"
-        caption="Posko Awal"
-        cell-template="data"
-      />
-      <DxColumn
-        css-class="custom-table-column"
-        :width="170"
-        alignment="center"
-        data-field="posko_tujuan"
-        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 }}
-        </span>
-      </template>
-    </DxDataGrid>
-  </div>
-
-  <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>
-        <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>
-        <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>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_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 Dialihkan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_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>
-        <InputText :readonly="true" :value="dataDetail?.tanggal_respon" 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?.tanggal_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>
-        <InputText :readonly="true" :value="dataDetail?.durasi_respon" 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>
-        <InputText :readonly="true" :value="dataDetail?.durasi_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">Posko Awal:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko_awal" 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>
-        <InputText :readonly="true" :value="dataDetail?.posko_tujuan" 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?.id_pelanggan" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataDetail?.alamat_pelapor"
-          class-name="flex-1 h-[56px]"
-        />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">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>
-        <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>
-        <InputText :readonly="true" :value="dataDetail?.sumber_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">Posko:</h3>
-        <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
-      </div>
+            <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_respon_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="posko_asal"
+                caption="Posko Awal" cell-template="data" />
+            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="posko_tujuan"
+                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 }}
+                </span>
+            </template>
+        </DxDataGrid>
     </div>
-  </DetailDialog>
+
+    <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>
+                <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>
+                <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>
+                <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>
+                <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>
+                <InputText :readonly="true" :value="dataDetail?.waktu_respon" 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">
+                    Durasi Response Time:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.durasi_respon" 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>
+                <InputText :readonly="true" :value="dataDetail?.durasi_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">
+                    Posko Awal:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko_awal" 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>
+                <InputText :readonly="true" :value="dataDetail?.posko_tujuan" 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?.id_pelanggan" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Nama Pelapor:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    Alamat Pelapor:
+                </h3>
+                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor"
+                    class-name="flex-1 h-[56px]" />
+            </div>
+
+            <div class="flex flex-row items-center justify-between w-full">
+                <h3 class="text-sm font-medium w-[170px] text-gray-800">
+                    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>
+                <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>
+                <InputText :readonly="true" :value="dataDetail?.sumber_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">
+                    Posko:
+                </h3>
+                <InputText :readonly="true" :value="dataDetail?.posko" class-name="flex-1" />
+            </div>
+        </div>
+
+    </DetailDialog>
 </template>
 
 <script setup lang="ts">
-// filters components
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -471,7 +379,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
   console.log(data)
 }
-
 const showData = () => {
   showDetail.value = true
 }
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index d031035..52dd7f9 100644
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -1,10 +1,10 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -15,63 +15,61 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="120" alignment="center" data-field="in_process" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="120" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_response_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="di_atas_sla_durasi_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Total"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
+                        caption="Total" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_waktu_recovery_time" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="diatas_sla_durasi_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="dibawah_sla_durasi_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -82,56 +80,69 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
 import { useUp3Store } from '@/stores/up3'
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const data = ref<any[]>([])
 const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
-query daftarGangguanRecoveryTime(
+  query rekapitulasiJenisGangguanSE004(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanRecoveryTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiJenisGangguanSE004(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_gangguan
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        posko
-        status_akhir
-        waktu_recovery
-        waktu_response
-        }
-}`;
-const loadingVisible = ref<boolean>(true)
+      sub_kelompok
+      total
+      selesai
+      persen_selesai
+      in_process
+      persen_in_process
+      total_durasi_response
+      avg_waktu_response_time
+      max_durasi_response
+      min_durasi_response
+      diatas_sla_durasi_response
+      dibawah_sla_durasi_response
+      total_durasi_recovery
+      avg_waktu_recovery_time
+      max_durasi_recovery
+      min_durasi_recovery
+      diatas_sla_durasi_recovery
+      dibawah_sla_durasi_recovery
+    }
+  }
+`
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -139,7 +150,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -150,7 +161,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -163,15 +174,15 @@ const onExporting = (e: any) => {
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: '',
     idUid: 0,
-    idUp3: 0,
+    idUp3: 0
 })
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const dateValue = useDateStore().getDateValue().split(' s/d ')
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
     const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
     const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
@@ -179,22 +190,17 @@ watch(detected, () => {
         dateTo: dateValue[1].split('-').reverse().join('-'),
         posko,
         idUid: uid,
-        idUp3: up3,
+        idUp3: up3
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                data.value = [...data.value, {
-                    ...item,
-                    kode: 'Kode'
-                }];
 
-            })
+            data.value = queryResult.data.rekapitulasiJenisGangguanSE004;
+            console.log(queryResult.loading)
+            console.log(queryResult.networkStatus)
         }
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
     })
-    onError(queryError => {
+    onError((queryError) => {
         console.log(queryError)
     })
 })
@@ -212,4 +218,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index e2db059..af2873c 100644
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -12,17 +12,14 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
                 <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
                     :caption="i" css-class="custom-table-column" />
             </DxColumn>
-
         </DxDataGrid>
     </div>
 </template>
@@ -31,18 +28,27 @@
 import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag';
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+import gql from 'graphql-tag'
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
         const doc = new jsPDF()
@@ -50,7 +56,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -61,7 +67,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -77,71 +83,71 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
     console.log(data)
 }
 
-
 const data = ref<any[]>([])
 const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
-query rekapitulasiGangguanBerdasarkanMedia(
+  query rekapitulasiGangguanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
+  ) {
     rekapitulasiGangguanBerdasarkanMedia(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-                media
-            tgl1
-            tgl10
-            tgl11
-            tgl12
-            tgl13
-            tgl14
-            tgl15
-            tgl16
-            tgl17
-            tgl18
-            tgl19
-            tgl2
-            tgl20
-            tgl21
-            tgl22
-            tgl23
-            tgl24
-            tgl25
-            tgl26
-            tgl27
-            tgl28
-            tgl29
-            tgl3
-            tgl30
-            tgl31
-            tgl4
-            tgl5
-            tgl6
-            tgl7
-            tgl8
-            tgl9
-        }
-}`;
+      media
+      tgl1
+      tgl10
+      tgl11
+      tgl12
+      tgl13
+      tgl14
+      tgl15
+      tgl16
+      tgl17
+      tgl18
+      tgl19
+      tgl2
+      tgl20
+      tgl21
+      tgl22
+      tgl23
+      tgl24
+      tgl25
+      tgl26
+      tgl27
+      tgl28
+      tgl29
+      tgl3
+      tgl30
+      tgl31
+      tgl4
+      tgl5
+      tgl6
+      tgl7
+      tgl8
+      tgl9
+    }
+  }
+`
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
     const { onResult, onError } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: "",
+        dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+        dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+        posko: '',
         idUid: 0,
-        idUp3: 0,
+        idUp3: 0
     })
 
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia;
+            data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
             loadingVisible.value = false
         }
         console.log(queryResult.data)
@@ -156,4 +162,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Table_2.vue b/src/components/Pages/Gangguan/Table_2.vue
index d27ea20..5583ee0 100644
--- a/src/components/Pages/Gangguan/Table_2.vue
+++ b/src/components/Pages/Gangguan/Table_2.vue
@@ -23,11 +23,11 @@
                 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="tgl_lapor"
+            <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="tgl_response"
+            <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="tgl_recovery"
+            <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" />
@@ -73,21 +73,21 @@
                 <h3 class="text-sm font-medium w-[170px] text-gray-800">
                     Tanggal Lapor:
                 </h3>
-                <InputText :readonly="true" :value="dataDetail?.tgl_lapor" class-name="flex-1" />
+                <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?.tgl_response" class-name="flex-1" />
+                <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?.tgl_recovery" class-name="flex-1" />
+                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
             </div>
 
             <div class="flex flex-row items-center justify-between w-full">
@@ -272,7 +272,6 @@ watch(detected, () => {
 })
 onMounted(() => {
     const filters = useFiltersStore()
-   
     filters.setConfig({
         type: 'type-6',
     })
diff --git a/src/components/Pages/Gangguan/Table_3.vue b/src/components/Pages/Gangguan/Table_3.vue
index 82701f7..e15ff4e 100644
--- a/src/components/Pages/Gangguan/Table_3.vue
+++ b/src/components/Pages/Gangguan/Table_3.vue
@@ -16,11 +16,11 @@
 
             <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="tgl_lapor"
+            <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="tgl_response"
+            <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="tgl_recovery"
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_4.vue b/src/components/Pages/Gangguan/Table_4.vue
index 2bcb884..0db1f34 100644
--- a/src/components/Pages/Gangguan/Table_4.vue
+++ b/src/components/Pages/Gangguan/Table_4.vue
@@ -16,11 +16,11 @@
 
             <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="tgl_lapor"
+            <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="tgl_response"
+            <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="tgl_recovery"
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_5.vue b/src/components/Pages/Gangguan/Table_5.vue
index 7146857..fae4d7e 100644
--- a/src/components/Pages/Gangguan/Table_5.vue
+++ b/src/components/Pages/Gangguan/Table_5.vue
@@ -16,11 +16,11 @@
 
             <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="tgl_lapor"
+            <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="tgl_response"
+            <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="tgl_recovery"
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_6.vue b/src/components/Pages/Gangguan/Table_6.vue
index 44ffa4e..43392f7 100644
--- a/src/components/Pages/Gangguan/Table_6.vue
+++ b/src/components/Pages/Gangguan/Table_6.vue
@@ -21,16 +21,16 @@
             <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="tgl_lapor" caption="Tgl Lapor" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="tgl_response"
+            <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="tgl_recovery"
+            <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="tgl_media" caption="Tgl Media" />
+            <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>
diff --git a/src/components/Pages/Gangguan/Table_7.vue b/src/components/Pages/Gangguan/Table_7.vue
index 0be8d99..cf148b1 100644
--- a/src/components/Pages/Gangguan/Table_7.vue
+++ b/src/components/Pages/Gangguan/Table_7.vue
@@ -16,11 +16,11 @@
 
             <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="tgl_lapor"
+            <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="tgl_response"
+            <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="tgl_recovery"
+            <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" />
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index a9208a5..711defc 100644
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -1,14 +1,14 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 <template>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
-            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataReal" :show-column-lines="true"
+            :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
             @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel  :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
                 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" />
@@ -119,64 +119,83 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxGroupItem, DxGroupPanel, DxGrouping, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection, DxSummary } from 'devextreme-vue/data-grid'
+import {
+    DxColumn,
+    DxColumnFixing,
+    DxExport,
+    DxGroupItem,
+    DxGroupPanel,
+    DxGrouping,
+    DxLoadPanel,
+    DxPaging,
+    DxScrolling,
+    DxSearchPanel,
+    DxSelection,
+    DxSummary
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag';
+import gql from 'graphql-tag'
 import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
 import { useUp3Store } from '@/stores/up3'
 import { useQuery } from '@vue/apollo-composable'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const dataReal = ref<any[]>([])
 
-const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
-query daftarGangguanRecoveryTime(
+const GET_REKAP_JENIS_GANGGUAN = gql`
+  query daftarGangguanRecoveryTime(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    daftarKeluhanRecoveryTime(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        minDurasiRecoveryTime: $minDurasiRecoveryTime
-        maxDurasiRecoveryTime: $maxDurasiRecoveryTime
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiJenisGangguan(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        alamat_pelapor
-        durasi_recovery_time
-        durasi_response_time
-        id_gangguan
-        idpel_nometer
-        keterangan_pelapor
-        media
-        nama_pelapor
-        no_laporan
-        no_telp_pelapor
-        posko
-        status_akhir
-        waktu_recovery
-        waktu_response
-        }
-}`;
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+      avg_durasi_dispatch
+      avg_durasi_recovery
+      avg_durasi_response
+      max_durasi_dispatch
+      max_durasi_recovery
+      max_durasi_response
+      min_durasi_dispatch
+      min_durasi_recovery
+      min_durasi_response
+      persen_inproses
+      persen_selesai
+      tipe_permasalahan
+      total
+      total_diatas_sla_dispatch
+      total_diatas_sla_recovery
+      total_diatas_sla_response
+      total_dibawah_sla_recovery
+      total_dibawah_sla_response
+      total_dibawah_sla_dispatch
+      total_inproses
+      total_selesai
+    }
+  }
+`
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: "",
+    posko: '',
     idUid: 0,
-    idUp3: 0,
+    idUp3: 0
 })
 const onExporting = (e: any) => {
     if (e.format === 'pdf') {
@@ -185,7 +204,7 @@ const onExporting = (e: any) => {
         exportToPdf({
             jsPDFDocument: doc,
             component: e.component,
-            indent: 5,
+            indent: 5
         }).then(() => {
             doc.save(`.pdf`)
         })
@@ -196,7 +215,7 @@ const onExporting = (e: any) => {
         exportToExcel({
             component: e.component,
             worksheet,
-            autoFilterEnabled: true,
+            autoFilterEnabled: true
         }).then(() => {
             workbook.xlsx.writeBuffer().then((buffer: any) => {
                 saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -221,36 +240,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 5,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 5,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -261,36 +280,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 5,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 5,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -301,36 +320,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 5,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 5,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 10,
                 rataRata: 10,
                 max: 10,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -341,36 +360,36 @@ const data = [
             total: 12,
             sudahSelesai: {
                 jml: 6,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 6,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 15,
                 rataRata: 12.5,
                 max: 18,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         },
         recoveryTime: {
             menit: {
                 total: 18,
                 rataRata: 15,
                 max: 20,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         }
     },
     {
@@ -381,36 +400,36 @@ const data = [
             total: 8,
             sudahSelesai: {
                 jml: 4,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 4,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 14,
                 rataRata: 14,
                 max: 16,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         },
         recoveryTime: {
             menit: {
                 total: 22,
                 rataRata: 16,
                 max: 26,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         }
     },
     {
@@ -421,36 +440,36 @@ const data = [
             total: 8,
             sudahSelesai: {
                 jml: 4,
-                persen: 50,
+                persen: 50
             },
             belumSelesai: {
                 jml: 4,
-                persen: 50,
-            },
+                persen: 50
+            }
         },
         responseTime: {
             menit: {
                 total: 12,
                 rataRata: 15,
                 max: 18,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         },
         recoveryTime: {
             menit: {
                 total: 16,
                 rataRata: 18,
                 max: 22,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 0,
-            },
+                kurangSla: 0
+            }
         }
     },
     {
@@ -461,36 +480,36 @@ const data = [
             total: 15,
             sudahSelesai: {
                 jml: 10,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 5,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 20,
                 rataRata: 13.33,
                 max: 24,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         },
         recoveryTime: {
             menit: {
                 total: 25,
                 rataRata: 16.67,
                 max: 30,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 12,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         }
     },
     {
@@ -501,36 +520,36 @@ const data = [
             total: 7,
             sudahSelesai: {
                 jml: 2,
-                persen: 28.57,
+                persen: 28.57
             },
             belumSelesai: {
                 jml: 5,
-                persen: 71.43,
-            },
+                persen: 71.43
+            }
         },
         responseTime: {
             menit: {
                 total: 18,
                 rataRata: 9,
                 max: 20,
-                min: 6,
+                min: 6
             },
             laporan: {
                 lebihSla: 1,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         },
         recoveryTime: {
             menit: {
                 total: 28,
                 rataRata: 14,
                 max: 30,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 4,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         }
     },
     {
@@ -541,36 +560,36 @@ const data = [
             total: 12,
             sudahSelesai: {
                 jml: 8,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 4,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 24,
                 rataRata: 20,
                 max: 28,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 26,
                 max: 36,
-                min: 22,
+                min: 22
             },
             laporan: {
                 lebihSla: 11,
-                kurangSla: 1,
-            },
+                kurangSla: 1
+            }
         }
     },
     {
@@ -581,36 +600,36 @@ const data = [
             total: 15,
             sudahSelesai: {
                 jml: 12,
-                persen: 80,
+                persen: 80
             },
             belumSelesai: {
                 jml: 3,
-                persen: 20,
-            },
+                persen: 20
+            }
         },
         responseTime: {
             menit: {
                 total: 22,
                 rataRata: 14.67,
                 max: 26,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 11,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         },
         recoveryTime: {
             menit: {
                 total: 30,
                 rataRata: 20,
                 max: 36,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 13,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         }
     },
     {
@@ -621,36 +640,36 @@ const data = [
             total: 9,
             sudahSelesai: {
                 jml: 6,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 3,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 18,
                 rataRata: 12,
                 max: 22,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 1,
-            },
+                kurangSla: 1
+            }
         },
         recoveryTime: {
             menit: {
                 total: 28,
                 rataRata: 18.67,
                 max: 34,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 10,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         }
     },
     {
@@ -661,36 +680,36 @@ const data = [
             total: 11,
             sudahSelesai: {
                 jml: 7,
-                persen: 63.64,
+                persen: 63.64
             },
             belumSelesai: {
                 jml: 4,
-                persen: 36.36,
-            },
+                persen: 36.36
+            }
         },
         responseTime: {
             menit: {
                 total: 20,
                 rataRata: 14.29,
                 max: 24,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 22.86,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 11,
-                kurangSla: 1,
-            },
+                kurangSla: 1
+            }
         }
     },
     {
@@ -701,36 +720,36 @@ const data = [
             total: 7,
             sudahSelesai: {
                 jml: 5,
-                persen: 71.43,
+                persen: 71.43
             },
             belumSelesai: {
                 jml: 2,
-                persen: 28.57,
-            },
+                persen: 28.57
+            }
         },
         responseTime: {
             menit: {
                 total: 16,
                 rataRata: 12.8,
                 max: 20,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 4,
-                kurangSla: 3,
-            },
+                kurangSla: 3
+            }
         },
         recoveryTime: {
             menit: {
                 total: 26,
                 rataRata: 20.8,
                 max: 30,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 0,
-            },
+                kurangSla: 0
+            }
         }
     },
     {
@@ -741,36 +760,36 @@ const data = [
             total: 14,
             sudahSelesai: {
                 jml: 10,
-                persen: 71.43,
+                persen: 71.43
             },
             belumSelesai: {
                 jml: 4,
-                persen: 28.57,
-            },
+                persen: 28.57
+            }
         },
         responseTime: {
             menit: {
                 total: 22,
                 rataRata: 15.71,
                 max: 28,
-                min: 10,
+                min: 10
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 22.86,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 7,
-            },
+                kurangSla: 7
+            }
         }
     },
     {
@@ -781,36 +800,36 @@ const data = [
             total: 10,
             sudahSelesai: {
                 jml: 8,
-                persen: 80,
+                persen: 80
             },
             belumSelesai: {
                 jml: 2,
-                persen: 20,
-            },
+                persen: 20
+            }
         },
         responseTime: {
             menit: {
                 total: 20,
                 rataRata: 16,
                 max: 26,
-                min: 12,
+                min: 12
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         },
         recoveryTime: {
             menit: {
                 total: 30,
                 rataRata: 23,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 2,
-            },
+                kurangSla: 2
+            }
         }
     },
     {
@@ -821,36 +840,36 @@ const data = [
             total: 13,
             sudahSelesai: {
                 jml: 9,
-                persen: 69.23,
+                persen: 69.23
             },
             belumSelesai: {
                 jml: 4,
-                persen: 30.77,
-            },
+                persen: 30.77
+            }
         },
         responseTime: {
             menit: {
                 total: 24,
                 rataRata: 18.46,
                 max: 28,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 7,
-            },
+                kurangSla: 7
+            }
         },
         recoveryTime: {
             menit: {
                 total: 34,
                 rataRata: 25.38,
                 max: 40,
-                min: 20,
+                min: 20
             },
             laporan: {
                 lebihSla: 9,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         }
     },
     {
@@ -861,36 +880,36 @@ const data = [
             total: 16,
             sudahSelesai: {
                 jml: 11,
-                persen: 68.75,
+                persen: 68.75
             },
             belumSelesai: {
                 jml: 5,
-                persen: 31.25,
-            },
+                persen: 31.25
+            }
         },
         responseTime: {
             menit: {
                 total: 26,
                 rataRata: 19.38,
                 max: 32,
-                min: 16,
+                min: 16
             },
             laporan: {
                 lebihSla: 7,
-                kurangSla: 4,
-            },
+                kurangSla: 4
+            }
         },
         recoveryTime: {
             menit: {
                 total: 36,
                 rataRata: 24,
                 max: 42,
-                min: 20,
+                min: 20
             },
             laporan: {
                 lebihSla: 8,
-                kurangSla: 5,
-            },
+                kurangSla: 5
+            }
         }
     },
     {
@@ -901,44 +920,44 @@ const data = [
             total: 12,
             sudahSelesai: {
                 jml: 8,
-                persen: 66.67,
+                persen: 66.67
             },
             belumSelesai: {
                 jml: 4,
-                persen: 33.33,
-            },
+                persen: 33.33
+            }
         },
         responseTime: {
             menit: {
                 total: 22,
                 rataRata: 18.33,
                 max: 28,
-                min: 14,
+                min: 14
             },
             laporan: {
                 lebihSla: 5,
-                kurangSla: 7,
-            },
+                kurangSla: 7
+            }
         },
         recoveryTime: {
             menit: {
                 total: 32,
                 rataRata: 24,
                 max: 36,
-                min: 18,
+                min: 18
             },
             laporan: {
                 lebihSla: 6,
-                kurangSla: 6,
-            },
+                kurangSla: 6
+            }
         }
-    },
+    }
 ]
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
-    const dateValue = useDateStore().getDateValue().split(' s/d ');
-    const posko = usePostsStore().getData() ? usePostsStore().getData() : ""
+    const dateValue = useDateStore().getDateValue().split(' s/d ')
+    const posko = usePostsStore().getData() ? usePostsStore().getData() : ''
     const up3 = useUp3Store().getData() ? useUp3Store().getData() : 0
     const uid = useRegionStore().getData() ? useRegionStore().getData() : 0
     refetch({
@@ -946,22 +965,61 @@ watch(detected, () => {
         dateTo: dateValue[1].split('-').reverse().join('-'),
         posko,
         idUid: uid,
-        idUp3: up3,
+        idUp3: up3
     })
-    onResult(queryResult => {
+    onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            queryResult.data.rekapitulasiAllGangguan.forEach((item: any) => {
-                dataReal.value = [...dataReal.value, {
-                    ...item,
-                    nama_unit: 'UNIT'
-                }];
-
+            let no = 0
+            queryResult.data.rekapitulasiJenisGangguan.forEach((item: any) => {
+                dataReal.value = [
+                    ...dataReal.value,
+                    {
+                        no: ++no,
+                        kode: item.tipe_permasalahan,
+                        jenisGangguan: item.tipe_permasalahan,
+                        laporan: {
+                            total: item.total,
+                            sudahSelesai: {
+                                jml: item.total_selesai,
+                                persen: item.persen_selesai
+                            },
+                            belumSelesai: {
+                                jml: item.total_inproses,
+                                persen: item.persen_inproses
+                            }
+                        },
+                        responseTime: {
+                            menit: {
+                                total: item.avg_durasi_response,
+                                rataRata: item.avg_durasi_response,
+                                max: item.max_durasi_response,
+                                min: item.min_durasi_response
+                            },
+                            laporan: {
+                                lebihSla: item.total_diatas_sla_response,
+                                kurangSla: item.total_dibawah_sla_response
+                            }
+                        },
+                        recoveryTime: {
+                            menit: {
+                                total: item.avg_durasi_recovery,
+                                rataRata: item.avg_durasi_recovery,
+                                max: item.max_durasi_recovery,
+                                min: item.min_durasi_recovery
+                            },
+                            laporan: {
+                                lebihSla: item.total_diatas_sla_recovery,
+                                kurangSla: item.total_dibawah_sla_recovery
+                            }
+                        }
+                    }
+                ]
             })
         }
         console.log(queryResult.loading)
         console.log(queryResult.networkStatus)
     })
-    onError(queryError => {
+    onError((queryError) => {
         console.log(queryError)
     })
 })
@@ -973,4 +1031,4 @@ onMounted(() => {
         reportButton: true
     })
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index c8095f1..9dfbd77 100644
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -20,7 +20,7 @@
             <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="tgl_laporan" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 2148b14..a4347dd 100644
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -18,7 +18,7 @@
             <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="tgl_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor" css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 2df9da5..555348b 100644
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -126,7 +126,7 @@ const GET_DATA = gql`
         alamat_pelapor
         durasi_recovery_time
         durasi_response_time
-        id_keluhan!
+        id_keluhan
         idpel_nometer
         keterangan_pelapor
         media
@@ -134,7 +134,7 @@ const GET_DATA = gql`
         no_laporan
         no_telp_pelapor
         posko
-        status_akhir!
+        status_akhir
         waktu_recovery
         waktu_response
         }
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index b316033..3c1fa72 100644
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -14,15 +14,15 @@
 
       <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Selesai"
+        <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="InProgress"
+        <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
           css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
           css-class="custom-table-column" />
@@ -36,15 +36,15 @@
           css-class="custom-table-column" />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+        <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+        <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+        <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="> SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_diatas_recovery" data-type="number" caption="> SLA"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤ SLA"
+        <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤ SLA"
           css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index 7147ac0..d3c8763 100644
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -1,9 +1,9 @@
 <template>
     <div>
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -12,61 +12,59 @@
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Fungsi Bidang"
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            <DxColumn :width="170" alignment="center" data-field="fungsiBidang" caption="Fungsi Bidang"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="totalSelesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persenSelesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="totalInProcess" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persenInProcess" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiResponse" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiResponse" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiResponse" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaResponse" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaResponse" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avgDurasiPenyelesaian" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="maxDurasiPenyelesaian" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="minDurasiPenyelesaian" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDiatasSlaPenyelesaian" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="totalDibawahSlaPenyelesaian" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
@@ -132,47 +130,41 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 const GET_DATA = gql`
-query rekapitulasiKeluhanPerFungsiBidang
-(
+  query rekapitulasiKeluhanPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: String!
     $idUid: Int!
     $idUp3: Int!
-) {
-    rekapitulasiKeluhanPerFungsiBidang
-(
-        dateFrom: $dateFrom
-        dateTo: $dateTo
-        posko: $posko
-        idUid: $idUid
-        idUp3: $idUp3
+  ) {
+    rekapitulasiKeluhanPerFungsiBidang(
+      dateFrom: $dateFrom
+      dateTo: $dateTo
+      posko: $posko
+      idUid: $idUid
+      idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
-        avg_durasi_recovery
-        avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
-        max_durasi_recovery
-        max_durasi_response
-        min_durasi_dispatch
-        min_durasi_recovery
-        min_durasi_response
-        persen_inproses
-        persen_selesai
-        posko
-        total
-        total_diatas_sla_dispatch
-        total_diatas_sla_recovery
-        total_diatas_sla_response
-        total_dibawah_sla_dispatch
-        total_dibawah_sla_recovery
-        total_dibawah_sla_response
-        total_inproses
-        total_selesai
-        }
-}`
+      avgDurasiPenyelesaian
+      avgDurasiResponse
+      fungsiBidang
+      maxDurasiPenyelesaian
+      maxDurasiResponse
+      minDurasiPenyelesaian
+      minDurasiResponse
+      persenInProcess
+      persenSelesai
+      total
+      totalDiatasSlaPenyelesaian
+      totalDiatasSlaResponse
+      totalDibawahSlaPenyelesaian
+      totalDibawahSlaResponse
+      totalDurasiPenyelesaian
+      totalDurasiResponse
+      totalInProcess
+      totalSelesai
+    }
+  }
+`
 const loadingVisible = ref<boolean>(true)
 onMounted(() => {
     const filters = useFiltersStore()
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 5b467a2..2dc3f37 100644
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -19,54 +19,54 @@
             <DxColumn :width="170" alignment="center" data-field="tipe_permasalahan" caption="Jenis Keluhan"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                    <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+                    <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+                    <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+                    <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+                    <DxColumn :width="150" alignment="center" data-field="total_dibawah_recovery" data-type="number" caption="≤SLA"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index aee8372..fc6425c 100644
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <DxDataGrid class="max-h-[calc(100vh-140px)]"  :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-      :word-wrap-enabled="true">
+    <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -14,56 +14,56 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="" caption="Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="posko" caption="Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+          <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Rata-Rata"
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Max"
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Min"
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption=">SLA"
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="≤SLA"
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index fc2a226..8a230c3 100644
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -14,18 +14,10 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="" caption="Nama Media" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="media" caption="Nama Media" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="1"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="2"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="3"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="4"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="date" caption="5"
-          css-class="custom-table-column" />
+        <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
+                    :caption="i" css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 6e95ae6..bc93bec 100644
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -14,48 +14,48 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit" css-class="custom-table-column" />
+            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
+                <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
                 <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                    <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                    <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="1"
+                    <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="2"
+                    <DxColumn :width="150" alignment="center" data-field="rating_2" data-type="number" caption="2"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="3"
+                    <DxColumn :width="150" alignment="center" data-field="rating_3" data-type="number" caption="3"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="4"
+                    <DxColumn :width="150" alignment="center" data-field="rating_4" data-type="number" caption="4"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="5"
+                    <DxColumn :width="150" alignment="center" data-field="rating_5" data-type="number" caption="5"
                         css-class="custom-table-column" />
-                    <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Indeks"
+                    <DxColumn :width="150" alignment="center" data-field="indeks_rating" data-type="number" caption="Indeks"
                         css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
+                <DxColumn :width="150" alignment="center" data-field="jumlah_non_rating" data-type="number" caption="Jml"
                     css-class="custom-table-column" />
-                <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+                <DxColumn :width="150" alignment="center" data-field="persen_non_rating" data-type="number" caption="%"
                     css-class="custom-table-column" />
             </DxColumn>
 
diff --git a/src/components/Pages/Monalisa/Table_36.vue b/src/components/Pages/Monalisa/Table_36.vue
index e4b7006..31fd66b 100644
--- a/src/components/Pages/Monalisa/Table_36.vue
+++ b/src/components/Pages/Monalisa/Table_36.vue
@@ -2,16 +2,13 @@
     <div id="data">
         <DxDataGrid class="max-h-[calc(100vh-140px)]" :remote-operations="true" :data-source="data"
             :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
-            :hover-state-enabled="true"
-            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel  :position="position"  
-            :show-indicator="showIndicator"
-            :show-pane="showPane" :shading="shading" 
-            v-if="loading" v-model:visible="loading" :enabled="true"  />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible.sync="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -60,7 +57,7 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import { fetchStatus } from '@/components/Form/FiltersType/reference'
+import { fetchData, fetchStatus } from '@/components/Form/FiltersType/reference'
 import { useDateStore } from '@/stores/date'
 import { useSearchStore } from '@/stores/filtersAction'
 import { usePostsStore } from '@/stores/posts'
@@ -73,6 +70,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
@@ -139,6 +137,7 @@ const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGG
     bulan: 10,
     tahun: 2023
 })
+
 const reportButton = useSearchStore()
 const detected = computed(() => reportButton.isTriggerChange)
 watch(detected, () => {
@@ -155,7 +154,7 @@ watch(detected, () => {
     })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-           data.value = queryResult.data.monalisaJumlahKaliGangguan
+            data.value = queryResult.data.monalisaJumlahKaliGangguan;
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
diff --git a/src/components/Select.vue b/src/components/Select.vue
index cba6e5b..00845ce 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface DataItem {
-  id: any;
-  name: string;
+  id: any
+  name: any
 }
 
 import { ref, computed, watch } from 'vue'