diff --git a/.env.development b/.env.development
index ba0871a..76d9508 100755
--- a/.env.development
+++ b/.env.development
@@ -2,9 +2,9 @@ VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
-VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
+# VITE_APP_GRAPHQL_ENDPOINT=http://10.8.0.13:32169/graphql
 # VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
-# VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
+VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
 
 # VITE_APP_GRAPHQL_ENDPOINT=http://192.168.137.46:32169/graphql
 VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181
\ No newline at end of file
diff --git a/build-push.js b/build-push.js
new file mode 100644
index 0000000..9b2fa43
--- /dev/null
+++ b/build-push.js
@@ -0,0 +1,29 @@
+// build-and-push.js
+const { exec } = require('child_process')
+
+function buildAndPush(version) {
+  const dockerImageTag = `defuj/apkt-eis:${version}`
+  const command = `npm run build && docker build . -t ${dockerImageTag} && docker push ${dockerImageTag}`
+
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`Error: ${error.message}`)
+      return
+    }
+    if (stderr) {
+      console.error(`stderr: ${stderr}`)
+      return
+    }
+    console.log(`stdout: ${stdout}`)
+  })
+}
+
+// Ambil argumen versi dari command line
+const version = process.argv[2]
+
+if (!version) {
+  console.error('Usage: node build-push.js <version>')
+  process.exit(1)
+}
+
+buildAndPush(version)
diff --git a/package.json b/package.json
index 06ad148..9d833a8 100755
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "build-push": "node build-push.js"
   },
   "dependencies": {
     "@apollo/client": "^3.8.10",
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index d1a0a8e..a7ba6e3 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -1,23 +1,31 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import SelectMulti from '@/components/SelectMulti.vue';
+import Select from '@/components/Select.vue'
+import SelectMulti from '@/components/SelectMulti.vue'
 
-import DatePicker from '@/components/DatePicker.vue';
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { onMounted, ref } from 'vue';
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
-const poskoPlaceholder = 'Semua Posko';
-const up3 = ref({ id: 0, name: up3Placeholder });
-const uid = ref({ id: 0, name: uidPlaceholder });
-const posko = ref({ id: 0, name: poskoPlaceholder });
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const poskoPlaceholder = 'Semua Posko'
+const up3 = ref({ id: 0, name: up3Placeholder })
+const uid = ref({ id: 0, name: uidPlaceholder })
+const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const jenisTransakasi = [
   { id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
-  { id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi TM', },
-  { id: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM', },
-  { id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' },
+  { id: 2, value: 'Cleansing Traksaksi TM', label: 'Cleansing Traksaksi TM' },
+  { id: 3, value: 'Koreksi Transaksi TM', label: 'Koreksi Transaksi TM' },
+  { id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
 ]
 const data = ref({
   uid: uid.value,
@@ -27,6 +35,35 @@ const data = ref({
   jenisTransaksi: [],
   group: 1
 })
+
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+}
+
+const setUp3 = (value: any) => {
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+}
+
+const setPosko = (value: any) => {
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
+
+const setTags = (value: any) => {
+  data.value.jenisTransaksi = value
+}
+
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
@@ -38,31 +75,48 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="selectedUid($event)" :data="itemsUid"
-        placeholder="Semua Unit Induk Distribusi/Wilayah" />
+      <Select
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        placeholder="Semua Unit Induk Distribusi/Wilayah"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3"
-        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+      <Select
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" placeholder="Semua Posko" />
+      <Select
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        placeholder="Semua Posko"
+      />
     </div>
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Transaksi:</label>
 
-      <SelectMulti :tags="jenisTransakasi" placeholder="Semua Jenis Transaksi" useLabel label="Jenis Transaksi" />
+      <SelectMulti
+        @update:tags="setTags($event)"
+        :tags="jenisTransakasi"
+        placeholder="Semua Jenis Transaksi"
+        useLabel
+        label="Jenis Transaksi"
+      />
     </div>
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index db91e07..086a1a3 100755
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  itemsUid,
+  itemsUp3,
+  itemsUlp,
+  fetchUid
+} from './reference'
 import { computed, onMounted, ref } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -27,7 +35,7 @@ const data = ref({
   up3: uppp.value,
   ulp: ulp.value,
   periode: '',
-  jenisLaporan: ''
+  jenisLaporan: jenisLaporan.value[0]
 })
 const setUid = (value: any) => {
   uid.value = value
@@ -51,7 +59,7 @@ const setUlp = (value: any) => {
 
 onMounted(() => {
   emit('update:filters', data.value)
-  // fetchUid()
+  fetchUid()
 })
 </script>
 
@@ -78,11 +86,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Laporan:</label>
 
-      <Select
-        @update:selected="(value) => (data.jenisLaporan = value)"
-        :data="jenisLaporan"
-        :placeholder="'Semua Jenis Laporan'"
-      />
+      <Select @update:selected="(value) => (data.jenisLaporan = value)" :data="jenisLaporan" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index 847939d..630b0ff 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -20,7 +20,7 @@ import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.'
 import { useQuery } from '@vue/apollo-composable'
 import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -44,50 +44,58 @@ const filters = ref({
   up3: 0
 })
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPGP', jenisLaporan)
 
   const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
+  }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
-      ? queries.anomali.gangguan.petugasBerulang
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
-        ? queries.anomali.gangguan.petugasRatingNegatif
-        : queries.anomali.gangguan.petugasSkipStep,
-    {
-      namaRegional: '',
-      // dateFrom: dateValue[0]
-      //   ? dateValue[0].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      // dateTo: dateValue[1]
-      //   ? dateValue[1].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
+  loadingData.value = true
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.unitBerulang
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.unitRatingNegatif
+        : queries.anomali.gangguan.unitSkipStep,
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      if (jenisLaporan.name == 'Laporan Berulang Unit') {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasBerulang
-      } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasRatingNegatif
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        }
       } else {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanPetugasSkipStep
+        data.value = []
       }
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 05fb23f..bffcc18 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -18,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -36,6 +37,37 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+    <!-- <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      css-class="custom-table-column"
+      :group-index="0"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    /> -->
     <DxColumn
       :width="170"
       alignment="center"
@@ -178,6 +210,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 64e842f..7085bec 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -19,7 +19,7 @@
     :word-wrap-enabled="true"
     :data-source="data"
   >
-    <DxGrouping expand-mode="rowClick" />
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -50,15 +50,36 @@
       cell-template="formatText"
     />
     <DxColumn
-      :width="170"
       alignment="center"
-      data-field="nama_ulp"
-      caption="Nama Unit"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
       css-class="custom-table-column"
-      cell-template="formatText"
-      name="namaUnit"
       :group-index="0"
     />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    />
     <DxColumn alignment="center" caption="Total Petugas" css-class="custom-table-column">
       <DxColumn
         :width="170"
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index 152bd3f..e0e9184 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -20,7 +20,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.'
 import { useQuery } from '@vue/apollo-composable'
 import { onMounted, ref, watch } from 'vue'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -44,50 +44,58 @@ const filters = ref({
   up3: 0
 })
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPGU', jenisLaporan)
 
   const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
+  }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+  loadingData.value = true
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulang
-      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+      : jenisLaporan.name == 'Laporan Rating Negatif'
         ? queries.anomali.gangguan.unitRatingNegatif
         : queries.anomali.gangguan.unitSkipStep,
-    {
-      namaRegional: '',
-      // dateFrom: dateValue[0]
-      //   ? dateValue[0].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      // dateTo: dateValue[1]
-      //   ? dateValue[1].split('-').reverse().join('-')
-      //   : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      if (jenisLaporan.name == 'Laporan Berulang Unit') {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitBerulang
-      } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        }
       } else {
-        data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitSkipStep
+        data.value = []
       }
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
index 6120d44..441cc5f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -18,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -36,6 +37,37 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+    <!-- <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      css-class="custom-table-column"
+      :group-index="0"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    /> -->
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
@@ -116,6 +148,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 8adfadf..7dae95a 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -19,7 +19,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
-    <DxGrouping expand-mode="rowClick" />
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -29,7 +29,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -49,16 +48,38 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+
     <DxColumn
-      :width="170"
       alignment="center"
-      data-field="nama_ulp"
-      caption="Nama Unit"
-      name="namaUnit"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
       css-class="custom-table-column"
-      cell-template="formatText"
       :group-index="0"
     />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+    />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
index cd86335..84f8d4c 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -1,10 +1,17 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type4
+      @update:filters="(value) => (filters = value)"
+      :jenis-laporan="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Rating Negatif' },
+        { id: 3, name: 'Laporan Skip Step' }
+      ]"
+    />
+  </Filters>
 
-    <Anomali_LAPPKU_LPT :data="data" />
-    <Anomali_LAPPKU_LPP :data="data" />
+  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" />
+  <Anomali_LAPPKU_LPP :data="data" />
 </template>
 
 <script setup lang="ts">
@@ -14,66 +21,76 @@ import { Anomali_LAPPKU_LPT, Anomali_LAPPKU_LPP } from '../.'
 import { Type4 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
 
-const GET_laporanCheckInCheckOut = gql`
-  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
-    laporanCheckInCheckOut(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-    avg_durasi_wo_gangguan_individual
-    avg_durasi_wo_penugasan_khusus
-    avg_rct_wo_gangguan_individual
-    avg_rpt_wo_gangguan_individual
-    jumlah_wo_gangguan_individual
-    jumlah_wo_penugasan_khusus
-    personil_yantek
-    user_regu
-    }
+const filters = ref({
+  jenisLaporan: {
+    id: 1,
+    name: 'Laporan Berulang Unit'
+  },
+  ulp: 0,
+  uid: 0,
+  up3: 0
+})
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPKU', jenisLaporan)
+  const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
   }
-`
-const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                    }
-                ]
-            })
+
+  loadingData.value = true
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.keluhan.unitBerulang
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.keluhan.unitRatingNegatif
+        : queries.anomali.keluhan.unitSkipStep,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
         }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
+      } else {
+        data.value = []
+      }
     })
-    onError((error) => {
-        console.log(error)
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
     })
 }
-const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanCheckInCheckOut,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    }
-)
-const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
index 5d03e36..9dbff21 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -17,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -26,7 +28,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -40,18 +41,20 @@
 
     <DxColumn
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="wo_total"
         data-type="number"
         caption="a"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -62,10 +65,11 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="total_anomali"
         data-type="number"
         caption="b"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -76,12 +80,45 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="persen_anomali_pln_mobile_marking"
         data-type="number"
         caption="c=b/a"
         css-class="custom-table-column"
+        :calculate-display-value="
+          (rowData: any) => (rowData.total_anomali / rowData.wo_total) * 100
+        "
+        cell-template="formatPercentage"
       />
     </DxColumn>
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
   </DxDataGrid>
 </template>
 
@@ -91,6 +128,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
@@ -103,12 +141,18 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { computed, ref } from 'vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const data = computed(() => props.data)
 const loading = ref(false)
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 0036aa0..1bd83ff 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -18,6 +19,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -27,7 +29,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -42,59 +43,96 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      css-class="custom-table-column"
+      :group-index="0"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_uid"
+      caption="UID"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_uid"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field="id_up3"
+      caption="UP3"
+      css-class="custom-table-column"
+      :group-index="1"
+      name="namaUID"
+      :calculate-group-value="(rowData: any) => rowData.nama_up3"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_cc123"
           data-type="number"
           caption="a"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_pln_mobile"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_loket"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_lainnya"
           data-type="number"
           caption="d"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_total"
           data-type="number"
           caption="e=a+b+c+d"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -107,30 +145,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="total_anomali"
           data-type="number"
           caption="f"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="anomali_cc123"
           data-type="number"
           caption="g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="total_anomali"
           data-type="number"
           caption="h=f+g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -144,33 +185,180 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_pln_mobile"
           data-type="number"
           caption="i=f/e"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_cc123"
           data-type="number"
           caption="j=g/e"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_total"
           data-type="number"
           caption="k=i+j"
           css-class="custom-table-column"
+          :calculate-display-value="
+            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+          "
+          cell-template="formatPercentage"
         />
       </DxColumn>
     </DxColumn>
+
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
+
+    <DxSummary>
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_cc123"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_pln_mobile"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_loket"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_lainnya"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_total"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_pln_mobile_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_cc123_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="total_anomali_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_cc123_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_pln_mobile"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_total"
+        summary-type="avg"
+        css-class="!text-right"
+        :calculate-custom-summary="
+          (options: any) => {
+            if (options.summaryProcess === 'start') {
+              options.totalValue = 0
+              options.count = 0
+            }
+            if (options.summaryProcess === 'calculate') {
+              if (options.value) {
+                options.totalValue += options.value
+                options.count++
+              }
+            }
+            if (options.summaryProcess === 'finalize') {
+              return options.totalValue / options.count
+            }
+          }
+        "
+        :calculate-display-value="
+          (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+        "
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+    </DxSummary>
   </DxDataGrid>
 </template>
 
@@ -181,25 +369,34 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  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 { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
+const loading = computed(() => props.loading)
 const data = computed(() => props.data)
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index fd154d6..1a78abc 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -184,7 +184,7 @@
 
   <DetailDialog
     :open="dialogDetail"
-    title="Daftar Detail Jumlah WO Gangguan Individu"
+    title="Daftar Detail Penugasan Khusus"
     @on-close="closedialogDetail"
     :full-width="true"
   >
@@ -235,7 +235,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatText"
@@ -243,7 +243,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_uid"
             caption="UID/UIW"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -251,7 +251,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_up3"
             caption="UP3"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -259,7 +259,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko"
             caption="Posko"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -267,7 +267,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="media"
             caption="Sumber Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -275,7 +275,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="pembuat_laporan"
             caption="Created By"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -283,7 +283,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dispatch_by"
             caption="Dispatch By"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -291,15 +291,15 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_dispatch"
             caption="Dispatch Time"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="user_regu"
             caption="User Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -307,7 +307,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_regu"
             caption="Nama Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -315,7 +315,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="personil_yantek"
             caption="Nama Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -323,7 +323,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="shift"
             caption="Shif"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -331,7 +331,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="check_in_petugas"
             caption="Check In Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -339,7 +339,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -347,7 +347,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -355,7 +355,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_dispatch"
             caption="Tgl Penugasan Baru"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -363,7 +363,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_perjalanan"
             caption="Tgl Dalam Perjalanan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -371,7 +371,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Tgl Pengerjaan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -379,7 +379,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_nyala_sementara"
             caption="Tgl Nyala Sementara"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -387,7 +387,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_nyala"
             caption="Tgl Nyala"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -395,7 +395,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_selesai"
             caption="Tgl Selesai"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -403,7 +403,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_waktu_response"
             caption="Durasi Perjalanan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -411,7 +411,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_wo"
             caption="Durasi WO"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -419,7 +419,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="check_out_petugas"
             caption="Check Out Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -427,39 +427,39 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_menit_response"
             caption="RPT"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_menit_recovery"
             caption="RCT"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="rating"
             caption="Rating"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="jml_pelanggan_padam"
             caption="Jml Pelanggan Padam"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="fasilitas"
             caption="Fasilitas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -467,7 +467,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_fasilitas"
             caption="Sub Fasilitas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -475,7 +475,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="peralatan"
             caption="Peralatan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -483,7 +483,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dampak_kerusakan"
             caption="Dampak Kerusakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -491,7 +491,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab"
             caption="Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -499,7 +499,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="kelompok_penyebab"
             caption="Kelompok Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -507,7 +507,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cuaca"
             caption="Cuaca"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -515,7 +515,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -523,7 +523,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan"
             caption="Keterangan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -531,15 +531,16 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab_padam"
             caption="Penyebab Padam"
             css-class="custom-table-column"
             cell-template="formatText"
+            :calculate-display-value="(item: any) => `${item.penyebab} - ${item.kelompok_penyebab}`"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tindakan"
             caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -547,7 +548,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="APKT Status"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -555,7 +556,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="referensi_marking"
             caption="Referensi Marking"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -563,10 +564,10 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="blth"
             caption="BLTH"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatNumber"
           />
 
           <template #formatText="{ data }">
@@ -587,202 +588,279 @@
       <div class="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-[135px] text-gray-800">UID/UIW:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Created By:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">Dispatch By:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Time:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_waktu_dispatch"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">User Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.user_regu" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_regu" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.personil_yantek"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Shif:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.shift" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Check In Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.check_in_petugas"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Penugasan Regu:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_dispatch"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Dalam Perjalanan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_perjalanan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_perjalanan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_nyala_sementara"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_nyala" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_selesai" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_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-[135px] text-gray-800">Durasi WO:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.durasi_wo" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Check Out Petugas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.check_out_petugas"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">RPT</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_menit_response"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">RCT</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.durasi_menit_recovery"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.rating" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Jml Pelanggan Padam:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.jml_pelanggan_padam"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.fasilitas" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.sub_fasilitas" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Peralatan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.peralatan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dampak Kerusakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.dampak_kerusakan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok Penyebab:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.kelompok_penyebab"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cuaca:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cuaca" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">Keterangan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab Padam:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="`${dataSubSelected?.penyebab} - ${dataSubSelected?.kelompok_penyebab}`"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">PKT Status:</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">APKT Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3>
-          <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.blth" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -813,7 +891,7 @@ import { Workbook } from 'exceljs'
 import Filters from '@/components/Form/Filters.vue'
 import { Type1 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -838,10 +916,9 @@ const loadingSubData = ref(false)
 
 const closedialogDetail = () => (dialogDetail.value = false)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
-  const ref = dataSelected.value
+  const selected = dataSelected.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -850,29 +927,27 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
-    idUid: ref.id_uid,
-    idUp3: ref.id_up3
+    idPosko: selected?.id_posko ? selected?.id_posko : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    personilYantek: selected?.personil_yantek ? selected?.personil_yantek : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.cico.laporanCheckInCheckOutDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailCheckInCheckOut
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -920,23 +995,27 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  dataSubSelected.value = data
-  console.log(data)
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.cico.laporanCheckInCheckOut, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -946,20 +1025,23 @@ const filterData = (params: any) => {
     idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.laporanCheckInCheckOut
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.cico.laporanCheckInCheckOut, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.laporanCheckInCheckOut
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 589f617..15a7393 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -5,6 +5,7 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      :data-source="data"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -18,6 +19,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -40,49 +42,54 @@
 
       <DxColumn
         alignment="center"
-        data-field="nama_posko"
+        data-field="nama_ulp"
         caption="Nama Unit"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
         <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo_cc123"
+            data-field="wo_cc123"
             data-type="number"
             caption="a"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo_pln_mobile"
+            data-field="wo_pln_mobile"
             data-type="number"
             caption="b"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo_comcen"
+            data-field="wo_comcen"
             data-type="number"
             caption="c"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo"
+            data-field="wo_total"
             data-type="number"
             caption="d=b+c"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -91,10 +98,11 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="rekomendasi_sistem_mendatangkan_petugas"
+            data-field="rekomendasi_mendatangkan_petugas"
             data-type="number"
             caption="e"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn
@@ -105,10 +113,11 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo_loket"
+            data-field="rekomendasi_diberikan_ke_pelanggan"
             data-type="number"
             caption="f"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -116,33 +125,54 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="dlpd"
+          data-field="dpld"
           data-type="number"
           caption="g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="history_p2ti"
+          data-field="history_p2lt"
           data-type="number"
           caption="h"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
@@ -158,8 +188,9 @@ import { Type3 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import Filters from '@/components/Form/Filters.vue'
 import gql from 'graphql-tag'
-import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -205,38 +236,45 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const { posko, uid, up3, ulp } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.cttKwhPeriksa.laporanCttKwhPeriksa,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : '',
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    namaRegional: ''
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.cttKwhPeriksa.laporanCttKwhPeriksa, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.laporanCttKwhPeriksa
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const getDetail = () => {
@@ -299,4 +337,79 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 const filters = ref()
+
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12102,
+        nama_ulp: 'ULP LIMA PULUH',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      },
+      {
+        id: 1,
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41230,
+        nama_ulp: 'ULP BACAN',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      },
+      {
+        id: 2,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      },
+      {
+        id: 3,
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31500,
+        nama_up3: 'UP3 TOLITOLI',
+        id_ulp: 31530,
+        nama_ulp: 'ULP BANGKIR',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      }
+    ]
+  }
+})
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index e649e74..c8a87f5 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -182,17 +182,38 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Daftar Gangguan Berdasarkan Media"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
     <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="dataSelected.no_laporan" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.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">Status :</h3>
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
@@ -234,36 +255,6 @@
         />
       </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="dataSelected?.status_akhir" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
-        <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.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="dataSelected?.keterangan_pelapor" class-name="flex-1" />
-      </div>
-
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
@@ -310,7 +301,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_BM'
 
 const position = { of: '#data' }
@@ -321,6 +312,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -337,20 +329,16 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0,
-  media: 'Twitter'
-})
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3, media } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -361,20 +349,25 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     media: media ? media.id : ''
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanBerdasarkanMedia
-    }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.berdasarkanMedia, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanBerdasarkanMedia
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 9657cea..171d77a 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -360,7 +360,7 @@ import { onMounted, ref } from 'vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
 
 const position = { of: '#dataTable' }
@@ -370,13 +370,19 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSelected = ref<any>()
 const dialogDetail = ref(false)
+const loading = ref(false)
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -386,29 +392,26 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-    }
-
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
-}
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.dataDialihkanKePoskoLain,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
   }
-)
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanDialihkanKePoskoLain
+      } else {
+        data.value = []
+      }
+
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index a22497f..f9d986f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -182,11 +182,7 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Daftar Gangguan Diselesaikan Mobile APKT"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
     <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>
@@ -278,26 +274,6 @@
           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">Penyebab:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.penyebab"
-          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">Tindakan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.tindakan"
-          class-name="flex-1"
-        />
-      </div>
     </div>
   </DetailDialog>
 </template>
@@ -320,7 +296,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DMAPKT'
 
 const position = { of: '#data' }
@@ -331,6 +307,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -347,22 +324,16 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.diselesaikanMobileAPKT,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -372,20 +343,25 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3?.id ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDiselesaikanMobileAPKT
-    }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.diselesaikanMobileAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanDiselesaikanMobileAPKT
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index d0f71a3..91329ac 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -49,7 +49,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -343,7 +343,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -359,7 +359,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="create_date"
             caption="Create Date"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -367,7 +367,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="create_by"
             caption="User"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -375,7 +375,7 @@
           />
           <DxColumn
             alignment="center"
-            data-field=""
+            data-field="keterangan"
             caption="Keterangan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -406,17 +406,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Create Date:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.create_date" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">User:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.create_by" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -441,7 +441,7 @@ import {
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_MLD1K'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -474,8 +474,6 @@ const reportMeta = ref({
 })
 
 const setDetailType = (columnCaption: string) => {
-  console.log('Column Caption', columnCaption)
-
   if (columnCaption == 'Jml Lapor') {
     detailType.value = 'table'
   } else {
@@ -483,40 +481,30 @@ const setDetailType = (columnCaption: string) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
   const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    noLaporan: selected?.no_laporan ? selected?.no_laporan : ''
   }
+  loadingSubData.value = false
+  await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKaliDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguanLaporLebihDariSatuKali
+      } else {
+        dataSub.value = []
+      }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -533,19 +521,8 @@ const showDetail = () => {
   }
 }
 
-const onDataSelectionChanged = ({
-  selectedRowsData,
-  selectedRowKeys,
-  currentSelectedRowKeys,
-  element,
-  component
-}: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
-    // console.log(selectedRowKeys)
-    // console.log(currentSelectedRowKeys)
-    // console.log(element)
-    // console.log(component)
-
     dataSelected.value = selectedRowsData[0]
     showDetail()
   }
@@ -558,42 +535,46 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.daftar.melaporLebihDariSatuKali,
-    {
-      minJmlLapor: minJmlLapor ? minJmlLapor : 1,
-      maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    minJmlLapor: minJmlLapor ? minJmlLapor : 1,
+    maxJmlLapor: maxJmlLapor ? maxJmlLapor : 1,
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKali, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanMelaporLebihDariSatuKali
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanMelaporLebihDariSatuKali
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 8efb6b7..b6628db 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -66,7 +66,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -265,6 +265,11 @@
         <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Referensi Marking :</h3>
+        <InputText :readonly="true" :value="dataSelected?.referensi_marking" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
         <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
@@ -346,7 +351,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
@@ -361,6 +366,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -377,11 +383,16 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -393,19 +404,24 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.recoveryTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanRecoveryTime
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanRecoveryTime
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -418,16 +434,6 @@ const onExporting = (e: any) => {
   }
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  minDurasiRecoveryTime: 1, //menit
-  maxDurasiRecoveryTime: 1, // menit
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
-
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 0624eb0..f137eb2 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="cellCenter"
@@ -242,6 +242,11 @@
         <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Referensi Marking :</h3>
+        <InputText :readonly="true" :value="dataSelected?.referensi_marking" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
         <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
@@ -323,7 +328,7 @@ import {
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import {
   exportToPDF,
   exportToXLSX,
@@ -338,6 +343,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -354,11 +360,16 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { minTime, maxTime, posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -370,31 +381,26 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.responseTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanResponseTime
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanResponseTime
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.responseTime, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  minDurasiResponseTime: 1, //menit
-  maxDurasiResponseTime: 1, // menit
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
-
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta, data)
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 2d533ec..b3cf42c 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -278,26 +278,6 @@
           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">Penyebab:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.penyebab"
-          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">Tindakan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.tindakan"
-          class-name="flex-1"
-        />
-      </div>
     </div>
   </DetailDialog>
 </template>
@@ -320,7 +300,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToDOCX, exportToXLSX } from '@/report/Gangguan/Daftar/DGangguan_STIDP'
 
 const position = { of: '#data' }
@@ -331,6 +311,7 @@ const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const dataGridRef = ref<DxDataGrid | null>(null)
+const loading = ref(false)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
@@ -347,22 +328,16 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.daftar.selesaiTanpaIDPelanggan,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -372,20 +347,24 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
+  loading.value = true
+  await requestGraphQl(queries.gangguan.daftar.selesaiTanpaIDPelanggan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanSelesaiTanpaIdPelanggan
+      } else {
+        data.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanSelesaiTanpaIdPelanggan
-    }
-
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 75f1082..7fa1aee 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -5,31 +5,40 @@
   </Filters>
 
   <div id="data">
-    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @cell-click="handleCellClick"
-      @row-click="handleRowClick" @selection-changed="onDataSelectionChanged" @exporting="onExporting"
-      :allow-column-resizing="true" column-resizing-mode="widget">
+    <DxDataGrid
+      @cell-click="onCellClicked"
+      ref="dataGridRef"
+      :allow-column-reordering="true"
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <!-- <DxPaging :page-size="40" :enabled="true" />
-      <DxPager
-        :visible="true"
-        :allowed-page-sizes="[20, 40, 60]"
-        display-mode="full"
-        :show-page-size-selector="true"
-        :show-info="true"
-        :show-navigation-buttons="true"
-      /> -->
-      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
+      <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-model:visible="loadingData"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <!-- <DxColumn
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -232,10 +241,21 @@
   <DetailDialog :open="dialogDetail" title="Detail Gangguan All" @on-close="closedialogDetail" :full-width="true">
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
-          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
-          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
-          @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
           <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
@@ -245,57 +265,228 @@
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
-          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i: any) => i == item) + 1" data-type="number"
-            caption="No" cell-template="formatNumber" />
-          <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Lapor"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl/Jam Lapor"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Tgl/Jam Datang"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Tgl/Jam Nyala"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Penugasan Regu"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan Regu"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="jarak_closing" caption="Jarak Closing (m)"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="dispatch_oleh" caption="Dispatch Oleh"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="200" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="pembuat_laporan" caption="Sumber Lapor"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="diselesaikan_oleh" caption="Diselesaikan Oleh"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="referensi_marking" caption="Referensi Marking"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="kode_gangguan" caption="Kode Gangguan"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="jenis_gangguan" caption="Jenis Gangguan"
-            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="penyebab" caption="Penyebab" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="tindakan" caption="Tindakan" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_posko"
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl/Jam Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl/Jam Datang"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl/Jam Nyala"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Penugasan Regu"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Perjalanan Regu"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jarak_closing"
+            caption="Jarak Closing (m)"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="dispatch_oleh"
+            caption="Dispatch Oleh"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="pembuat_laporan"
+            caption="Sumber Lapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="diselesaikan_oleh"
+            caption="Diselesaikan Oleh"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="referensi_marking"
+            caption="Referensi Marking"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kode_gangguan"
+            caption="Kode Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jenis_gangguan"
+            caption="Jenis Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tindakan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -483,7 +674,13 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_ALL'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_ALL'
+import { getDataRowGroup } from '@/utils/data'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -501,6 +698,9 @@ const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -508,9 +708,50 @@ const reportMeta = ref({
   periode: ''
 })
 
-const setAgreementDialog = (column: string) => {
-  console.log('column', column)
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
 
+    setAgreementDialog(e.column.caption)
+    const data = getDataRowGroup(e.data)
+    console.table(data)
+    groupData.value = data
+    showDetail()
+    // if (e.row.groupIndex == 0) {
+    //   //
+    // } else if (e.row.groupIndex == 1) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0].collapsedItems[0].items[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0].items[0].items[0]
+    //     groupData.value = data
+    //   }
+    // } else if (e.row.groupIndex == 2) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0].collapsedItems[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0].items[0]
+    //     groupData.value = data
+    //   }
+    // } else if (e.row.groupIndex == 3) {
+    //   if (e.row.isExpanded) {
+    //     const data = e.data.items[0]
+    //     groupData.value = data
+    //   } else {
+    //     const data = e.data.collapsedItems[0]
+    //     groupData.value = data
+    //   }
+    // }
+    // showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+const setAgreementDialog = (column: string) => {
   if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
     agreeToShowDialog.value = true
     if (column == 'Total') {
@@ -551,13 +792,12 @@ const resetData = () => {
   dataSubSelected.value = null
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   resetData()
-  loadingData.value = true
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -567,23 +807,25 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiAllGangguan
-    }
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
+    .then((result) => {
+      if (result.data.data != null) {
+        data.value = result.data.data.rekapitulasiAllGangguan
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const getDetail = async () => {
@@ -591,56 +833,99 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: selected?.id_posko ? selected?.id_posko : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    idRegu: selected?.id_regu ? selected?.id_regu : 0,
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
-    media: selected?.media ? selected?.media : '',
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+    idRegu: 0,
+    idUlp: 0,
+    namaRegional: '',
+    media: '',
     isSelesai: progressSelected.value,
     tanggal: ''
   }
+  if (groupDialog.value) {
+    // if (groupColumnCaption.value != 'Semua Unit') {
+    //   if (groupColumnCaption.value == 'Regional') {
+    //     query = {
+    //       ...query,
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+    //     }
+    //   } else if (groupColumnCaption.value == 'UID') {
+    //     query = {
+    //       ...query,
+    //       idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+    //     }
+    //   } else if (groupColumnCaption.value == 'UP3') {
+    //     query = {
+    //       ...query,
+    //       idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+    //       idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+    //       namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+    //     }
+    //   }
+    // }
+    if (groupIndex.value == 1) {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 2) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 3) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      posko: selected?.id_posko ? selected?.id_posko : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      idRegu: selected?.id_regu ? selected?.id_regu : 0,
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      media: selected?.media ? selected?.media : '',
+      isSelesai: progressSelected.value,
+      tanggal: ''
+    }
+  }
+  console.table(query)
 
-  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
     .then((result) => {
-      dataSub.value = result.data.data.detailGangguan
+      if (result.data.data != null) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
     })
     .catch((err) => {
-      console.log(err)
+      console.error(err)
     })
     .finally(() => {
       loadingSubData.value = false
     })
-
-  // const { onResult, onError, refetch, loading } = useQuery(
-  //   queries.gangguan.rekap.gangguanAllDetail,
-  //   query,
-  //   {
-  //     fetchPolicy: 'network-only'
-  //   }
-  // )
-
-  // onResult((queryResult) => {
-  //   if (queryResult.data != undefined) {
-  //     dataSub.value = queryResult.data.detailGangguan
-  //   }
-  // })
-
-  // onError((error) => {
-  //   console.log(error)
-  // })
-
-  // watch(loading, (value) => {
-  //   loadingSubData.value = value
-  // })
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
@@ -679,21 +964,18 @@ const handleCellClick = (e: any) => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 6cc51ff..3e6c49c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -160,7 +160,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -194,7 +194,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -502,20 +502,19 @@ import {
   DxPager,
   DxGrouping
 } 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 { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToXLSX,
+  exportDetailToPDF
+} from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -537,7 +536,7 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDetail = () => {
+const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
@@ -554,24 +553,20 @@ const getDetail = () => {
     idUp3: ref.id_up3
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAlihPoskoDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguanAlihPosko
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguanAlihPosko
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -594,21 +589,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -625,49 +617,53 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAlihPosko,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      const refs = [...queryResult.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
-        a.nama_uid.localeCompare(b.nama_uid)
-      )
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAlihPosko, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        const refs = [...result.data.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
+          a.nama_uid.localeCompare(b.nama_uid)
+        )
+        data.value = refs.map((ref: any, index: number) => {
+          return {
+            ...ref,
+            number: index + 1
+          }
+        })
+      } else {
+        data.value = []
+      }
 
-      data.value = refs.map((ref: any, index: number) => {
-        return {
-          ...ref,
-          number: index + 1
-        }
-      })
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index c9ac2e5..60c1419 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -51,7 +51,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         data-field="no"
@@ -155,7 +155,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -189,7 +189,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -487,20 +487,19 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
+import {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -535,8 +534,7 @@ const setDate = (value: any) => {
   }
 }
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const ref = dataSelected.value
 
   const query = {
@@ -548,24 +546,21 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.berdasarkanMediaDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailRekapitulasiGangguanBerdasarkanMedia
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.berdasarkanMediaDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanMedia
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -577,8 +572,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (date.value != '') {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -588,31 +585,25 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-
-    if (date.value != '') {
-      showDetail()
-    }
+    showDetail()
   }
 }
 
@@ -622,40 +613,45 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.berdasarkanMedia,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
-    }
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.berdasarkanMedia, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanBerdasarkanMedia
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 9fd4513..964ac3f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -1,7 +1,14 @@
 <template>
-  <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters
+    @run-report="() => exportToPDF(reportMeta, data, true)"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -148,7 +155,7 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setMonth('')">
           {{ data.text }}
         </p>
       </template>
@@ -186,7 +193,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -220,7 +227,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -426,18 +433,18 @@ import {
   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 { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { formatWaktu, years } from '@/components/Form/FiltersType/reference'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { getMonthNumber } from '@/utils/texts'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_CTTM'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -453,50 +460,33 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const monthSelected = ref(1)
+const monthSelected = ref<any>(null)
+const agreeToShowDialog = ref(false)
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  posko: { id: 0, name: 'Semua Posko' },
+  periode: ''
+})
 
 const setMonth = (month: any) => {
-  monthSelected.value = getMonthNumber(month)
+  if (month != '') {
+    monthSelected.value = getMonthNumber(month)
+  } else {
+    monthSelected.value = null
+  }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanCleansingTransaksiTM,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
-}
-
-const getDetail = () => {
-  const dateValue = filters.value.periode.split(' s/d ')
-  const selected = dataSelected.value
-
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -504,29 +494,57 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
+    idUlp: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanCleansingTransaksiTM, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanCleansingTransaksiTM
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
+}
+
+const getDetail = async () => {
+  const dateValue = filters.value.periode.split(' s/d ')
+  const selected = dataSelected.value
+  const compDate = dateValue[0].split('-').reverse().join('-').split('-')
+
+  const query = {
+    bulan: monthSelected.value,
+    tahun: parseInt(compDate[0]),
     posko: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.gangguan.rekap.gangguanCleansingTransaksiTMDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguanCleansingTransaksiTM
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanCleansingTransaksiTMDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguanCleansingTransaksiTM
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -537,19 +555,18 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (monthSelected.value != null) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  // wait for 2 seconds
-  setTimeout(() => {
-    if (selectedRowsData[0] != undefined) {
-      console.log('monthSelected', monthSelected.value)
-      dataSelected.value = selectedRowsData[0]
-      showDetail()
-    }
-  }, 2000)
+  if (selectedRowsData[0] != undefined) {
+    console.log('monthSelected', monthSelected.value)
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@@ -559,30 +576,19 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 69c16b1..97f6263 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -58,7 +58,7 @@
         <DxColumn
           :width="50"
           alignment="center"
-          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+          :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
           caption="a"
           css-class="custom-table-column"
           cell-template="formatNumber"
@@ -441,7 +441,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -475,7 +475,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -758,7 +758,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -773,20 +773,19 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -808,7 +807,7 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDetail = () => {
+const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const { posko, uid, up3 } = filters.value
@@ -827,26 +826,20 @@ const getDetail = () => {
     idRegu: ref.id_regu
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      console.log(queryResult.data.detailGangguanDiselesaikanMobileApkt)
-
-      dataSub.value = queryResult.data.detailGangguanDiselesaikanMobileApkt
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  await requestGraphQl(queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguanDiselesaikanMobileApkt
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -869,21 +862,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -900,41 +890,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
-    }
-    console.log(queryResult.data)
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanDiselesaikanMobileAPKT
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const filters = ref()
 onMounted(() => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 40d215f..daae909 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -46,7 +46,6 @@
         :allow-export-selected-data="false"
       />
       <DxColumnFixing :enabled="true" />
-      <DxGroupPanel :visible="true" />
       <DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
 
       <DxColumn
@@ -69,10 +68,13 @@
         :width="120"
         alignment="center"
         data-field="sub_kelompok"
-        caption="Kelompok"
         css-class="custom-table-column"
-        group-index="0"
+        :group-index="0"
+        caption=""
         cell-template="formatText"
+        :calculate-group-value="
+          (rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
+        "
       />
       <DxColumn
         :width="150"
@@ -446,13 +448,9 @@ import {
   DxSelection,
   DxSummary
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
+import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -480,21 +478,9 @@ const reportMeta = ref({
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 
@@ -553,11 +539,17 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -567,67 +559,69 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = [...queryResult.data.rekapitulasiPerJenisGangguan].map(
-        (item: any, index: number) => {
-          return {
-            no: ++index,
-            sub_kelompok: item.sub_kelompok,
-            kode: item.kode,
-            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.total_durasi_response,
-                rataRata: item.avg_durasi_response,
-                max: item.max_durasi_response,
-                min: item.min_durasi_response
-              },
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.jenisGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = [...result.data.data.rekapitulasiPerJenisGangguan].map(
+          (item: any, index: number) => {
+            return {
+              no: ++index,
+              sub_kelompok: item.sub_kelompok,
+              nama_sub_kelompok: item.nama_sub_kelompok,
+              kode: item.kode,
+              jenisGangguan: item.tipe_permasalahan,
               laporan: {
-                lebihSla: item.total_diatas_sla_response,
-                kurangSla: item.total_dibawah_sla_response
-              }
-            },
-            recoveryTime: {
-              menit: {
-                total: item.total_durasi_recovery,
-                rataRata: item.avg_durasi_recovery,
-                max: item.max_durasi_recovery,
-                min: item.min_durasi_recovery
+                total: item.total,
+                sudahSelesai: {
+                  jml: item.total_selesai,
+                  persen: item.persen_selesai
+                },
+                belumSelesai: {
+                  jml: item.total_inproses,
+                  persen: item.persen_inproses
+                }
               },
-              laporan: {
-                lebihSla: item.total_diatas_sla_recovery,
-                kurangSla: item.total_dibawah_sla_recovery
+              responseTime: {
+                menit: {
+                  total: item.total_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.total_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
+                }
               }
             }
           }
-        }
-      )
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((queryError) => {
-    console.log(queryError)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+        )
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
@@ -635,119 +629,125 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
       {
-        id: 0,
-        kode: '01a',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Pelebur pembatas putus/rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01a',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 1,
-        kode: '01b',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'MCB pembatas rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01b',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 2,
-        kode: '01c',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'RELAY dan / atau CB rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01c',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 3,
-        kode: '01d',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Pelebur putus dan LBS jatuh atau rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01d',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 4,
-        kode: '06a',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Kubikel APP/komponennya rusak atau gagal bekerja',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '06a',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       }
     ].map((item: any, index: number) => {
       return {
         no: ++index,
         sub_kelompok: item.sub_kelompok,
+        nama_sub_kelompok: item.nama_sub_kelompok,
         kode: item.kode,
         jenisGangguan: item.tipe_permasalahan,
         laporan: {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 70cf528..3c4da13 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -54,7 +54,7 @@
         css-class="custom-table-column"
         :width="60"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="No"
       /> -->
       <DxColumn
@@ -91,7 +91,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -101,7 +101,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -121,7 +121,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -256,13 +256,49 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -274,7 +310,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -445,7 +481,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -479,7 +515,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -783,19 +819,18 @@ import {
   DxPager,
   DxGrouping
 } 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 { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import InputText from '@/components/InputText.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -816,6 +851,13 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const closeDialog = () => {
   dialogDetail.value = false
@@ -824,61 +866,62 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
   }
 }
 
-const filterData = (params: any) => {
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
+  }
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.jenisGangguanSE004,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiJenisGangguanSE004
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((queryError) => {
-    console.log(queryError)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.jenisGangguanSE004, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiJenisGangguanSE004
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
@@ -894,27 +937,26 @@ const getDetail = () => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    idEquipment: ref?.kode ? parseInt(ref.kode) : 0
+    idEquipment: ref?.kode ? parseInt(ref.kode) : 0,
+    isSelesai: progressSelected.value
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.jenisGangguanSE004Detail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguanJenisGangguanSE004
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.jenisGangguanSE004Detail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguanJenisGangguanSE004
+      } else {
+        dataSub.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -926,8 +968,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 089de98..bb8bcd4 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -11,6 +11,7 @@
 
   <div id="data">
     <DxDataGrid
+      @cell-click="onCellClicked"
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
@@ -25,7 +26,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -280,19 +281,19 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setMonth('')">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setMonth('')">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setMonth(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -304,7 +305,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setMonth('')">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -330,7 +331,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -364,7 +365,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -1119,21 +1120,21 @@ import {
   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 { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_KTI'
-
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_KTI'
+import { getMonthNumber } from '@/utils/texts'
+import { getDataRowGroup } from '@/utils/data'
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -1147,17 +1148,47 @@ const dataSubSelected = ref()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const monthSelected = ref<any>(null)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 
-const getDetail = () => {
+const onCellClicked = (e: any) => {
+  // if (e.rowType == 'group') {
+  //   groupDialog.value = true
+  //   if (e.row.groupIndex != 0) {
+  //     const data = getDataRowGroup(e.data)
+  //     console.table(data)
+  //     groupData.value = data
+  //   }
+  //   showDetail()
+  // } else {
+  //   groupDialog.value = false
+  // }
+}
+
+const setMonth = (month: any) => {
+  if (month != '') {
+    if (getMonthNumber(month) == 0) {
+      monthSelected.value = null
+    } else {
+      monthSelected.value = getMonthNumber(month)
+    }
+  } else {
+    monthSelected.value = null
+  }
+}
+
+const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
+  const compDate = dateValue[0].split('-').reverse().join('-').split('-')
 
   const query = {
     dateFrom: dateValue[0]
@@ -1168,27 +1199,27 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     posko: ref?.id_posko ? ref?.id_posko : 0,
     idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref?.id_up3 ? ref?.id_up3 : 0
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    bulan: monthSelected.value,
+    tahun: parseInt(compDate[0])
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguanKoreksiTransaksiIndividu
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguanKoreksiTransaksiIndividu
+      } else {
+        dataSub.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1200,8 +1231,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (monthSelected.value != null) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -1211,21 +1244,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -1242,40 +1272,68 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
-  const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idPosko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+const filterData = async (params: any) => {
+  resetData()
+  const dateValue = filters.value.periode.split(' s/d ')
+  const { uid, up3, posko, jenisTransaksi } = params
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
-    }
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idPosko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    is_transaksi_individual:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Transaksi Individual')
+          ? 1
+          : 2,
+    is_cleansing_transaksi_tm:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Cleansing Traksaksi TM')
+          ? 1
+          : 2,
+    is_koreksi_transaksi_tm:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Transaksi TM')
+          ? 1
+          : 2,
+    is_koreksi_gangguan_dan_anev:
+      jenisTransaksi.length == 4 || jenisTransaksi.length == 0
+        ? 0
+        : jenisTransaksi.includes('Koreksi Kode Gangguan dan Anev')
+          ? 1
+          : 2
+  }
 
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanKoreksiTransaksiIndividual
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 6898bfa..9a47067 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -56,7 +56,7 @@
         data-field="no"
         caption="NO"
         css-class="custom-table-column"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         cell-template="formatNumber"
       />
       <DxColumn
@@ -85,7 +85,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -95,7 +95,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -115,7 +115,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -488,13 +488,49 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -506,7 +542,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -532,7 +568,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -566,7 +602,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -867,17 +903,18 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -897,9 +934,15 @@ const reportMeta = ref({
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
   periode: ''
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -916,27 +959,26 @@ const getDetail = () => {
     idRegu: ref?.id_regu ? ref?.id_regu : 0,
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    media: ref?.media ? ref?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -948,8 +990,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -959,21 +1003,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -990,41 +1031,46 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanPerPosko,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      const result: any[] = [...queryResult.data.rekapitulasiGangguanPerPosko]
-      data.value = result.sort((a: any, b: any) => a?.nama_up3.localeCompare(b?.nama_up3))
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanPerPosko, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = [...result.data.data.rekapitulasiGangguanPerPosko].sort((a: any, b: any) =>
+          a?.nama_up3.localeCompare(b?.nama_up3)
+        )
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 39a5de2..b97b1c6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -54,7 +54,7 @@
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <DxColumn
         :width="120"
@@ -63,7 +63,7 @@
         caption="UID"
         css-class="custom-table-column"
         group-index="0"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="150"
@@ -89,7 +89,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -99,7 +99,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -119,7 +119,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -498,13 +498,13 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -515,7 +515,43 @@
         </p>
       </template>
 
-      <template #formatTime="{ data }">
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
@@ -542,7 +578,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -576,7 +612,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -875,19 +911,18 @@ import {
   DxSummary,
   DxTotalItem
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
+import {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -909,9 +944,16 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -928,27 +970,26 @@ const getDetail = () => {
     idRegu: ref?.id_regu ? ref?.id_regu : 0,
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    media: ref?.media ? ref?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -960,8 +1001,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -976,21 +1019,18 @@ const updateFilters = (value: any) => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -1007,11 +1047,17 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -1021,34 +1067,34 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerRegu
-    }
-
-    const { posko, uid, up3 } = params
-
-    reportMeta.value = {
-      uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
-      up3: {
-        id: up3 ? up3.id : 0,
-        name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-      },
-      posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
-      periode: params.periode,
-      groupBy: params.groupBy
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
+    .then((result) => {
+      isGroupBy.value = params.groupBy
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanPerRegu
+      } else {
+        data.value = []
+      }
+      reportMeta.value = {
+        uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
+        up3: {
+          id: up3 ? up3.id : 0,
+          name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+        },
+        posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
+        periode: params.periode,
+        groupBy: params.groupBy
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref({
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 78ecfd1..f3f23b4 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -52,7 +52,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -64,7 +64,7 @@
         caption="Nama UID"
         css-class="custom-table-column"
         group-index="0"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
       />
       <DxColumn
         :width="170"
@@ -81,7 +81,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -91,7 +91,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -111,7 +111,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -246,13 +246,49 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -264,7 +300,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -290,7 +326,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -324,7 +360,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -625,17 +661,18 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
+import {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -658,9 +695,16 @@ const reportMeta = ref({
   periode: '',
   groupBy: false
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -677,27 +721,26 @@ const getDetail = () => {
     idRegu: ref?.id_regu ? ref?.id_regu : 0,
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    media: ref?.media ? ref?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -709,8 +752,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -720,21 +765,18 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
@@ -756,57 +798,54 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
-  loadingData.value = true
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanPerTanggal,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko ? posko.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerTanggal
-    }
-
-    if (queryResult.networkStatus == 7) {
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanPerTanggal, query)
+    .then((result) => {
+      isGroupBy.value = params.groupBy
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanPerTanggal
+      } else {
+        data.value = []
+      }
+      reportMeta.value = {
+        uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
+        up3: {
+          id: up3 ? up3.id : 0,
+          name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+        },
+        posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
+        periode: params.periode,
+        groupBy: params.groupBy
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
       loadingData.value = false
-    }
-
-    reportMeta.value = {
-      uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
-      up3: {
-        id: up3 ? up3.id : 0,
-        name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-      },
-      posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
-      periode: params.periode,
-      groupBy: params.groupBy
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-    // loadingData.value = false
-  })
-
-  loadingData.value = loading.value
-
-  watch(loading, (value) => {
-    // loadingData.value = value
-  })
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 651bb31..9dbbdba 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -89,7 +89,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn
@@ -98,7 +98,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             alignment="center"
@@ -116,7 +116,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             alignment="center"
@@ -209,19 +209,55 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -233,7 +269,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -259,7 +295,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -293,7 +329,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -625,14 +661,8 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { onMounted, ref } from 'vue'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -640,7 +670,12 @@ import InputText from '@/components/InputText.vue'
 import vue3starRatings from 'vue3-star-ratings'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportDetailToPDF,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -660,9 +695,15 @@ const reportMeta = ref({
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
   periode: ''
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -679,27 +720,28 @@ const getDetail = () => {
     idRegu: ref?.id_regu ? ref?.id_regu : 0,
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    media: ref?.media ? ref?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -711,8 +753,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 const closeDialog = () => {
   dialogDetail.value = false
@@ -721,58 +765,45 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(dataSubSelected)
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanRatingPerPosko,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      posko: posko.id,
-      idUid: uid.id,
-      idUp3: up3.id
-    }
-  )
-
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -782,28 +813,32 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerPosko].sort((a: any, b: any) =>
-        a.nama_up3.localeCompare(b.nama_up3)
-      )
-      data.value = refs.map((ref: any, index: number) => {
-        return {
-          ...ref,
-          number: index + 1
-        }
-      })
-    }
+  }
 
-    reportMeta.value = filters.value
-  })
-  onError((error) => {
-    console.log(error)
-  })
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanRatingPerPosko, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = [...result.data.data.rekapitulasiGangguanRatingPerPosko]
+          .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+          .map((ref: any, index: number) => {
+            return {
+              ...ref,
+              number: index + 1
+            }
+          })
+      } else {
+        data.value = []
+      }
+
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const filters = ref()
 onMounted(() => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 81f994c..5aae0ea 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -50,7 +50,7 @@
         alignment="center"
         caption="NO"
         data-type="number"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         css-class="custom-table-column"
         cell-template="formatNumber"
       />
@@ -77,7 +77,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn
@@ -86,7 +86,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             alignment="center"
@@ -104,7 +104,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             alignment="center"
@@ -199,19 +199,55 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -223,7 +259,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -249,7 +285,7 @@
           :hover-state-enabled="true"
           @selection-changed="onDataSubSelectionChanged"
           :column-width="100"
-          @exporting="onExporting"
+          @exporting="onExportingDetail"
           :allow-column-resizing="true"
           column-resizing-mode="widget"
         >
@@ -283,7 +319,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -615,11 +651,7 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import vue3starRatings from 'vue3-star-ratings'
@@ -627,7 +659,12 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
-import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
+import {
+  exportToPDF,
+  exportDetailToPDF,
+  exportToXLSX,
+  exportDetailToXLSX
+} from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -649,9 +686,15 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
 
-const getDetail = () => {
-  loadingSubData.value = true
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -668,27 +711,30 @@ const getDetail = () => {
     idRegu: ref?.id_regu ? ref?.id_regu : 0,
     idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    media: ref?.media ? ref?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -700,8 +746,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -711,52 +759,45 @@ const closeDialog = () => {
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta.value, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+    exportDetailToXLSX(reportMeta.value, e)
+  } else {
   }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(dataSubSelected)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.rekap.gangguanRatingPerRegu,
-  {
-    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
-  }
-)
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
-  refetch({
+
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -766,27 +807,25 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      // const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
-      //   a.nama_up3.localeCompare(b.nama_up3)
-      // )
-      // data.value = refs.map((ref: any, index: number) => {
-      //   return {
-      //     ...ref,
-      //     number: index + 1
-      //   }
-      // })
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
-    }
+  }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanRatingPerRegu, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanRatingPerRegu
+      } else {
+        data.value = []
+      }
+
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const filters = ref()
 onMounted(() => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 5cc5d10..661755a 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -310,13 +310,12 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
-import autoTable from 'jspdf-autotable'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -347,212 +346,28 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Berdasarkan Media'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Telp Pelapor',
-          'Keterangan Pelapor',
-          'Status',
-          'Tgl Lapor',
-          'Tgl Response',
-          'Tgl Recovery',
-          'Response Time',
-          'Recovery Time',
-          'Sumber Lapor',
-          'Tgl Media',
-          'Keterangan Media'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor,
-        item.status_akhir,
-        item.waktu_lapor,
-        item.waktu_response,
-        item.waktu_recovery,
-        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        item.media,
-        item.waktu_media,
-        item.keterangan_media
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc.save('Laporan Daftar Keluhan Berdasarkan Media.pdf', { returnPromise: true }).then(() => {
-      console.log('pdf berhasil disimpan')
-    })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Berdasarkan Media')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Berdasarkan Media.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanBerdasarkanMedia,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -562,20 +377,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanBerdasarkanMedia, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanBerdasarkanMedia
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index 3e781eb..e05d0e7 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -52,7 +52,7 @@
         css-class="custom-table-column !align-top"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -195,7 +195,7 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field="nama_ulp"
+        data-field="nama_unit_baru"
         caption="Nama ULP"
         css-class="custom-table-column !align-top"
         cell-template="formatText"
@@ -345,14 +345,9 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { jsPDF } from 'jspdf'
-import autoTable from 'jspdf-autotable'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -361,201 +356,26 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const loading = ref(false)
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
 
 const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Pembuat Laporan',
-          'Tgl Lapor',
-          'Tgl Dialihkan',
-          'Tgl Response',
-          'Tgl Recovery',
-          'Durasi Response Time',
-          'Durasi Recovery Time',
-          'Unit Asal',
-          'Status',
-          'IDPEL/NO METER',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Telp Pelapor',
-          'Keterangan Pelapor'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.pembuat_laporan,
-        item.waktu_lapor,
-        item.waktu_dialihkan,
-        item.waktu_response,
-        item.waktu_recovery,
-        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        item.nama_unit_lama,
-        item.status_akhir,
-        item.idpel_nometer,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc
-      .save('Laporan Daftar Keluhan Dialihkan Ke Unit Lain.pdf', { returnPromise: true })
-      .then(() => {
-        console.log('pdf berhasil disimpan')
-      })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Dialihkan Ke Unit Lain')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Dialihkan Ke Unit Lain.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -571,22 +391,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   showDetail()
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -596,30 +410,27 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanDialihkanKeUnitLain
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  periode: ''
-})
-
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 96b104f..3ca4a46 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -14,7 +14,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -37,8 +37,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -53,7 +52,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -178,40 +177,33 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setDetailType(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
-          {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+        <p class="text-right cursor-pointer" @click="setDetailType(data.column.caption)">
+          {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setDetailType(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
-    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+  <DetailDialog
+    :open="dialogDetail"
+    :title="detailType == 'table' ? 'Daftar Lapor ULang' : 'Detail Gangguan'"
+    @on-close="closeDialog"
+    :full-width="detailType == 'table'"
+  >
+    <div v-if="detailType == 'form'" 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="dataSelected?.no_laporan" class-name="flex-1" />
@@ -313,6 +305,130 @@
         <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
     </div>
+
+    <div v-if="detailType == 'table'" class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          @exporting="onExporting"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="true"
+          />
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="create_date"
+            caption="Create Date"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="create_by"
+            caption="User"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="keterangan"
+            caption="Keterangan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+
+    <div v-if="detailType == 'table'" class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="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-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Create Date:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.create_date" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">User:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.create_by" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
   </DetailDialog>
 </template>
 
@@ -334,24 +450,65 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
-import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import autoTable from 'jspdf-autotable'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import { formatNumber, isNumber } from '@/utils/numbers'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
+const detailType = ref('form') // form, table
+const filters = ref()
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  minJmlLapor: 1,
+  maxJmlLapor: 1,
+  periode: ''
+})
 
-const closeDialog = () => {
-  dialogDetail.value = false
+const setDetailType = (columnCaption: string) => {
+  if (columnCaption == 'Jml Lapor') {
+    detailType.value = 'table'
+  } else {
+    detailType.value = 'form'
+  }
+}
+
+const getDetail = async () => {
+  const dateValue = filters.value.periode.split(' s/d ')
+  const selected = dataSelected.value
+
+  const query = {
+    noLaporan: selected?.no_laporan ? selected?.no_laporan : ''
+  }
+  loadingSubData.value = false
+  await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKaliDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanLaporLebihDariSatuKali
+      } else {
+        dataSub.value = []
+      }
+
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -361,232 +518,50 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSubSelected.value = null
   dialogDetail.value = true
+  if (detailType.value == 'table') {
+    getDetail()
+  }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
+}
+
+const closeDialog = () => (dialogDetail.value = false)
+
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ],
-        ['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Pelanggan Lebih Dari 1 Kali'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Tgl Lapor',
-          'Tgl Response',
-          'Tgl Recovery',
-          'Jml Lapor',
-          'Durasi Response Time',
-          'Durasi Recovery Time',
-          'Status',
-          'IDPEL/NO METER',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Telp Pelapor',
-          'Keterangan Pelapor',
-          'Sumber Lapor',
-          'Nama ULP'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.waktu_lapor,
-        item.waktu_response,
-        item.waktu_selesai,
-        item.jumlah_lapor,
-        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        item.status_akhir,
-        item.idpel_nometer,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor,
-        item.media,
-        item.nama_ulp
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc
-      .save('Laporan Daftar Keluhan Pelanggan Lebih Dari 1 Kali.pdf', { returnPromise: true })
-      .then(() => {
-        console.log('pdf berhasil disimpan')
-      })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Pelanggan Lebih Dari 1 Kali')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Pelanggan Lebih Dari 1 Kali.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 
-const data = ref<any[]>([])
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali,
-  {
-    minJmlLapor: 1,
-    maxJmlLapor: 100,
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
   const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1
   const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100
 
-  refetch({
+  const query = {
     minJmlLapor: minJmlLapor,
     maxJmlLapor: maxJmlLapor,
     dateFrom: dateValue[0]
@@ -598,32 +573,27 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
-    }
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanMelaporLebihDariSatuKali
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const filters = ref()
-const reportMeta = ref({
-  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
-  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
-  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
-  minJmlLapor: 1,
-  maxJmlLapor: 1,
-  periode: ''
-})
-
 onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 9e5a8ed..adeea77 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -69,7 +69,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -312,13 +312,12 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
-import autoTable from 'jspdf-autotable'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import {
+  exportToPDF,
+  exportToDOCX,
+  exportToXLSX
+} from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -349,224 +348,28 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
-  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-  let durasi = ''
-
-  if (minTime == '4382' && maxTime != '143998560') {
-    durasi = 'Melebihi SLA (>3 hari)'
-  } else if (minTime == '1' && maxTime == '4381') {
-    durasi = 'Dibawah / Sesuai SLA (<=3 hari)'
-  } else {
-    durasi = 'Durasi Menit'
-  }
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ],
-        ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Recovery Time'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Tgl Lapor',
-          'Tgl Response',
-          'Tgl Recovery',
-          'Durasi Response Time',
-          'Durasi Recovery Time',
-          'Status',
-          'IDPEL/NO METER',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Telp Pelapor',
-          'Keterangan Pelapor',
-          'Nama ULP'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.waktu_lapor,
-        item.waktu_response,
-        item.waktu_recovery,
-        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        item.status_akhir,
-        item.idpel_nometer,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor,
-        item.nama_ulp
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc.save('Laporan Daftar Keluhan Recovery Time.pdf', { returnPromise: true }).then(() => {
-      console.log('pdf berhasil disimpan')
-    })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Recovery Time')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Recovery Time.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanRecoveryTime,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    minDurasiRecoveryTime: 0,
-    maxDurasiRecoveryTime: 0,
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, minTime, maxTime } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -578,20 +381,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanRecoveryTime
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanRecoveryTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanRecoveryTime
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index b8643b2..225a84c 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -69,7 +69,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -330,14 +330,13 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import autoTable from 'jspdf-autotable'
+import {
+  exportToPDF,
+  exportToXLSX,
+  exportToDOCX
+} from '@/report/Keluhan/Daftar/DKeluhan_ResponseTime'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -368,224 +367,28 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
-  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-  let durasi = ''
-
-  if (minTime == '1502' && maxTime != '143998560') {
-    durasi = 'Melebihi SLA (>1 hari)'
-  } else if (minTime == '1' && maxTime == '1501') {
-    durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
-  } else {
-    durasi = 'Durasi Menit'
-  }
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ],
-        ['Durasi', ':', `${durasi} ${durasi == 'Durasi Menit' ? minTime + ' - ' + maxTime : ''}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Response Time'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Tgl Lapor',
-          'Tgl Response',
-          'Tgl Recovery',
-          'Durasi Response Time',
-          'Durasi Recovery Time',
-          'Status',
-          'IDPEL/NO METER',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Telp Pelapor',
-          'Keterangan Pelapor',
-          'Nama ULP'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.waktu_lapor,
-        item.waktu_response,
-        item.waktu_recovery,
-        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        item.status_akhir,
-        item.idpel_nometer,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor,
-        item.nama_ulp
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc.save('Laporan Daftar Keluhan Response Time.pdf', { returnPromise: true }).then(() => {
-      console.log('pdf berhasil disimpan')
-    })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Response Time')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Response Time.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanResponseTime,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    minDurasiResponseTime: 0,
-    maxDurasiResponseTime: 0,
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3, maxTime, minTime } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -597,20 +400,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanResponseTime
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanResponseTime, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanResponseTime
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 7c6cb06..db4d80f 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -303,13 +303,8 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
-import autoTable from 'jspdf-autotable'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -340,214 +335,28 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Selesai Tanpa ID Pelanggan'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Tgl Lapor',
-          'Tgl Response',
-          'Tgl Recovery',
-          'Durasi Response Time',
-          'Durasi Recovery Time',
-          'Status',
-          'IDPEL/NO METER',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Telp Pelapor',
-          'Keterangan Pelapor',
-          'Sumber Lapor',
-          'Nama ULP'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.waktu_lapor,
-        item.waktu_response,
-        item.waktu_recovery,
-        parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
-        parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
-        item.status_akhir,
-        item.idpel_nometer,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor,
-        item.media,
-        item.nama_ulp
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc
-      .save('Laporan Daftar Keluhan Selesai Tanpa ID Pelanggan.pdf', { returnPromise: true })
-      .then(() => {
-        console.log('pdf berhasil disimpan')
-      })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai Tanpa ID Pelanggan')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Selesai Tanpa ID Pelanggan.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
+const resetData = () => {
+  data.value = []
+}
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -557,20 +366,25 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanSelesaiTanpaIdPelanggan
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanSelesaiTanpaIdPelanggan
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 0ee94b2..9cd6af8 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column !align-top"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -322,15 +322,9 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import autoTable from 'jspdf-autotable'
+import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -361,213 +355,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const onExporting = (e: any) => {
-  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
-
-  let dateFromFormat = ''
-  let dateToFormat = ''
-  let dayTo = ''
-
-  if (periode != '') {
-    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
-    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
-
-    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
-      month: 'long'
-    })}-${dateFrom.getFullYear()}`
-
-    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
-      month: 'long'
-    })}-${dateTo.getFullYear()}`
-
-    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
-  }
-
   if (e.format === 'pdf') {
-    const doc = new jsPDF({
-      orientation: 'landscape'
-    })
-
-    autoTable(doc, {
-      head: [
-        ['PT. PLN(Persero)', '', ''],
-        [
-          { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
-          { content: ':', styles: { cellWidth: 1 } },
-          reportMeta.value.uid
-            ? reportMeta.value.uid.name.toUpperCase()
-            : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
-        ],
-        [
-          'UNIT PELAKSANA PELAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.up3
-            ? reportMeta.value.up3.name.toUpperCase()
-            : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
-        ],
-        [
-          'UNIT LAYANAN PELANGGAN',
-          ':',
-          reportMeta.value.ulp
-            ? reportMeta.value.ulp.name.toUpperCase()
-            : 'Semua Unit Layanan Pelanggan'.toUpperCase()
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold'
-      },
-      theme: 'plain',
-      startY: 10
-    })
-
-    autoTable(doc, {
-      head: [
-        ['Daftar Keluhan Selesai di Contact Center'.toUpperCase()],
-        [`PERIODE TANGGAL : ${dateFromFormat} SD TGL ${dateToFormat}`]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      startY: 18
-    })
-
-    autoTable(doc, {
-      head: [
-        [
-          'No',
-          'No Laporan',
-          'Contact Center',
-          'UI Dist.',
-          'ULP',
-          'IDPEL/NO METER',
-          'Nama Pelapor',
-          'Alamat Pelapor',
-          'No Tlp Pelapor',
-          'Keterangan Pelapor',
-          'APKT Status',
-          'Created By',
-          'Tgl Penyelesaian',
-          'Lapor Ulang',
-          'Sumber Lapor',
-          'Issue Type',
-          'Sub Issue Type'
-        ]
-      ],
-      body: data.value.map((item: any, i: any) => [
-        { content: ++i, styles: { halign: 'right' } },
-        item.no_laporan,
-        item.nama_ulp,
-        item.nama_uid,
-        item.nama_ulp,
-        item.idpel_nometer,
-        item.nama_pelapor,
-        item.alamat_pelapor,
-        item.no_telp_pelapor,
-        item.keterangan_pelapor,
-        item.status_akhir,
-        item.nama_pelapor,
-        item.waktu_recovery,
-        item.jumlah_lapor,
-        item.media,
-        item.nama_issuetype,
-        item.nama_subissuetype
-      ]),
-      styles: {
-        fontSize: 3,
-        cellPadding: 1,
-        lineColor: [0, 0, 0],
-        lineWidth: 0.1,
-        cellWidth: 'auto'
-      },
-      rowPageBreak: 'auto',
-      headStyles: {
-        fillColor: [192, 192, 192],
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        cellWidth: 'wrap',
-        halign: 'center'
-      },
-      bodyStyles: {
-        textColor: [0, 0, 0]
-      },
-      didParseCell: function (data) {
-        if (data.row.section === 'head') {
-          data.cell.text = data.cell.text.map(function (word: any) {
-            return word.toUpperCase()
-          })
-        }
-      },
-      startY: 23
-    })
-
-    autoTable(doc, {
-      head: [
-        [`${dayTo}, ${dateToFormat}`],
-        [
-          {
-            content: '(.........................................)',
-            styles: { minCellHeight: 8, valign: 'bottom' }
-          }
-        ]
-      ],
-      styles: {
-        fontSize: 3,
-        cellPadding: 0.1,
-        textColor: [0, 0, 0],
-        fontStyle: 'bold',
-        halign: 'center'
-      },
-      theme: 'plain',
-      tableWidth: 50,
-      margin: { left: 230 }
-    })
-
-    doc
-      .save('Laporan Daftar Keluhan Selesai di Contact Center.pdf', { returnPromise: true })
-      .then(() => {
-        console.log('pdf berhasil disimpan')
-      })
+    exportToPDF(reportMeta, data)
+  } else if (e.format === 'xlsx') {
+    exportToXLSX(reportMeta, e)
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Daftar Keluhan Selesai di Contact Center')
-
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(
-          new Blob([buffer], { type: 'application/octet-stream' }),
-          'Daftar Keluhan Selesai di Contact Center.xlsx'
-        )
-      })
-    })
-
-    e.cancel = true
+    exportToDOCX(reportMeta, data)
   }
 }
 
 const data = ref<any[]>([])
-
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.keluhan.daftar.keluhanDiselesaikanCC123,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0,
-    media: ''
-  }
-)
+const loading = ref(false)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -576,11 +374,16 @@ const reportMeta = ref({
   periode: ''
 })
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -591,19 +394,25 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     media: ''
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarKeluhanDiselesaikanCC123
-    }
+  loading.value = true
+  await requestGraphQl(queries.keluhan.daftar.keluhanDiselesaikanCC123, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarKeluhanDiselesaikanCC123
+      } else {
+        data.value = []
+      }
 
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 0a51b24..6df4961 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -1,20 +1,21 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
+  <Filters @run-report="() => exportToPDF(reportMeta, data, true)" @reset-form="data = []"
+    @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type3 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
-      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
+    <DxDataGrid @cell-click="onCellClicked" ref="dataGridRef" :allow-column-reordering="true"
+      class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+      :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget">
+      <DxPaging :enabled="false" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
         :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-      <!-- <DxColumnFixing :enabled="true" /> -->
 
       <DxColumn alignment="center" :width="200" data-field="nama_ulp" caption="Nama Unit"
         css-class="custom-table-column" />
@@ -83,10 +84,6 @@
         <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="min_durasi_dispatch"
           summary-type="min" css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_diatas_sla_dispatch"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="total_dibawah_sla_dispatch"
-          summary-type="sum" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
         <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="avg_durasi_response"
           summary-type="avg" css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
         <DxGroupItem :show-in-group-footer="false" :align-by-column="true" column="max_durasi_response"
@@ -122,12 +119,12 @@
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
           {{
-    isNumber(data.text)
-      ? data.column.caption == '%'
-        ? formatPercentage(data.text)
-        : formatNumber(data.text)
-      : data.text
-  }}
+      isNumber(data.text)
+        ? data.column.caption == '%'
+          ? formatPercentage(data.text)
+          : formatNumber(data.text)
+        : data.text
+    }}
         </p>
       </template>
 
@@ -146,7 +143,7 @@
         <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
           :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
           :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
-          @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
+          @exporting="onExportingDetail" :allow-column-resizing="true" column-resizing-mode="widget">
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
           <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
@@ -157,21 +154,21 @@
           <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
 
           <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-            cell-template="formatNumber" />
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number"
+            caption="No" cell-template="formatNumber" />
           <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan"
             css-class="custom-table-column" cell-template="formatText" />
           <DxColumn :width="150" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
             css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Dalam Proses Bidang" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Selesai Bidang Unit" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_response" caption="Dalam Proses Bidang"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="waktu_recovery" caption="Selesai Bidang Unit"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
           <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
             :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
           <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
             :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Status" :allow-resizing="false"
+          <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="Status" :allow-resizing="false"
             css-class="custom-table-column" cell-template="formatTime" />
           <DxColumn :width="150" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
             :allow-resizing="false" css-class="custom-table-column" cell-template="formatTime" />
@@ -183,12 +180,12 @@
             :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
           <DxColumn :width="200" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
             :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Rayon" :allow-resizing="false"
+          <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Rayon" :allow-resizing="false"
             css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Uraian" :allow-resizing="false"
-            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Respon Pelanggan" :allow-resizing="false"
+          <DxColumn :width="150" alignment="center" data-field="uraian" caption="Uraian" :allow-resizing="false"
             css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="respon_pelanggan" caption="Respon Pelanggan"
+            :allow-resizing="false" css-class="custom-table-column" cell-template="formatText" />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -203,7 +200,7 @@
           </template>
 
           <template #formatTime="{ data }">
-            <p>
+            <p class="text-right cursor-pointer">
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
           </template>
@@ -225,28 +222,28 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.dalam_proses_bidang" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Selesai Bidang Unit:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.selesai_bidang_unit" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Durasi Response Time:</h3>
           <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_response_time)
-    ? formatWaktu(dataSubSelected?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+      ? formatWaktu(dataSubSelected?.durasi_response_time)
+      : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
           <InputText :readonly="true" :value="parseInt(dataSubSelected?.durasi_recovery_time)
-    ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-    : '-'
-    " class-name="flex-1" />
+      ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+      : '-'
+      " class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -281,7 +278,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -291,8 +288,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
-          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.response_pelanggan"
-            class-name="flex-1" />
+          <InputText :readonly="true" type="textarea" :value="dataSubSelected?.respon_pelanggan" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -320,17 +316,12 @@ import {
   DxGroupItem,
   DxGrouping
 } 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -346,12 +337,87 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+const reportMeta = ref({
+  uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
+  up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
+  ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
+  periode: ''
+})
 
-const filterData = (params: any) => {
+const onCellClicked = (e: any) => {
+  console.log('cell clicked', e)
+  //   console.log('group cell clicked', e.column.caption)
+  //   console.log('value', e.values[e.row.groupIndex])
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    setAgreementDialog(e.column.caption)
+    if (e.row.groupIndex == 0) {
+      //
+    } else if (e.row.groupIndex == 1) {
+      if (e.row.isExpanded) {
+        const data = e.data.items[0].collapsedItems[0].items[0]
+        groupData.value = data
+      } else {
+        const data = e.data.collapsedItems[0].items[0].items[0]
+        groupData.value = data
+      }
+    } else if (e.row.groupIndex == 2) {
+      if (e.row.isExpanded) {
+        const data = e.data.items[0].collapsedItems[0]
+        groupData.value = data
+      } else {
+        const data = e.data.collapsedItems[0].items[0]
+        groupData.value = data
+      }
+    } else if (e.row.groupIndex == 3) {
+      if (e.row.isExpanded) {
+        const data = e.data.items[0]
+        groupData.value = data
+      } else {
+        const data = e.data.collapsedItems[0]
+        groupData.value = data
+      }
+    }
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+const setAgreementDialog = (column: string) => {
+  if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
+    agreeToShowDialog.value = true
+    if (column == 'Total') {
+      progressSelected.value = 0
+    } else if (column == 'Selesai') {
+      progressSelected.value = 1
+    } else {
+      progressSelected.value = 2
+    }
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+  dataSelected.value = null
+  dataSubSelected.value = null
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -361,55 +427,109 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanAll
-    }
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAll, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiKeluhanAll
+      } else {
+        data.value = []
+      }
 
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const getDetail = async () => {
-  loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const result = useQuery(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-
-  result.onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
+  if (groupDialog.value) {
+    if (groupIndex.value == 0) {
+      query = {
+        ...query,
+        isSelesai: progressSelected.value
+      }
+    } else if (groupIndex.value == 1) {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 2) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 3) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
     }
-  })
+  } else {
+    query = {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      media: selected?.media ? selected?.media : '',
+      isSelesai: progressSelected.value,
+      tanggal: '',
+      namaIssuetype: '',
+      namaSubissuetype: ''
+    }
+  }
 
-  result.onError((error) => {
-    console.log(error)
-  })
-
-  watch(result.loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -422,38 +542,27 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  dataSub.value = []
-  dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
-    const doc = new jsPDF()
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-      indent: 5
-    }).then(() => {
-      doc.save(`.pdf`)
-    })
+    exportToPDF(reportMeta.value, data.value)
+  } else if (e.format === 'xlsx') {
   } else {
-    const workbook = new Workbook()
-    const worksheet = workbook.addWorksheet('Employees')
+  }
+}
 
-    exportToExcel({
-      component: e.component,
-      worksheet,
-      autoFilterEnabled: true
-    }).then(() => {
-      workbook.xlsx.writeBuffer().then((buffer: any) => {
-        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
-      })
-    })
-
-    e.cancel = true
+const onExportingDetail = (e: any) => {
+  if (e.format === 'pdf') {
+    exportDetailToPDF(reportMeta.value, dataSub.value)
+  } else if (e.format === 'xlsx') {
+  } else {
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 7fb3185..1e3f485 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -49,7 +49,7 @@
       <DxColumn
         :width="100"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         data-field="no"
@@ -102,7 +102,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setDate(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -114,7 +114,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
@@ -174,7 +174,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -489,7 +489,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -508,43 +508,61 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const date = ref('2023-02-04')
 
-const filterData = (params: any) => {
+const setDate = (value: any) => {
+  if (isNumber(value)) {
+    const tanggal = value < 10 ? `0${value}` : value
+    const dateValue = filters.value.periode.split(' s/d ')
+    const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal
+    console.log('date', dateYear)
+    date.value = dateYear
+  } else {
+    date.value = ''
+  }
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      media: ''
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    media: ''
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiKeluhanBerdasarkanMedia
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -557,27 +575,29 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    isSelesai: 0,
+    media: selected?.media ? selected?.media : '',
+    tanggal: date.value,
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -588,8 +608,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (date.value != '') {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index fb0d8c8..b1d889e 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -49,11 +49,10 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
-        data-field="no"
+        data-field="number"
         caption="No"
         cell-template="formatNumber"
       />
@@ -61,11 +60,21 @@
         :width="120"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Distribusi"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="Distribusi"
+        v-else
       />
       <DxColumn
         :width="170"
@@ -83,7 +92,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -93,7 +102,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -113,7 +122,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -251,8 +260,8 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Fungsi Bidang"
+          css-class="text-white !text-left"
         />
         <DxTotalItem
           summary-type="sum"
@@ -365,12 +374,48 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -382,7 +427,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left">
+        <p class="cursor-pointer !text-left" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -442,7 +487,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -764,7 +809,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -783,42 +828,68 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
-const filterData = (params: any) => {
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        isGroupBy.value = params.groupBy
+        if (filters.value.groupBy) {
+          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
+            .sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))
+            .map((item, index) => {
+              return { ...item, number: index + 1 }
+            })
+        } else {
+          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang].map(
+            (item, index) => {
+              return { ...item, number: index + 1 }
+            }
+          )
+        }
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -831,27 +902,30 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -862,8 +936,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 94ab3d3..e823f39 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -49,7 +49,7 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
         data-type="number"
         data-field="number"
@@ -67,8 +67,8 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field="tipe_keluhan"
-        caption="Jenis Keluhan"
+        data-field="grouping_tipe_keluhan"
+        caption=""
         name="tipeKeluhan"
         css-class="custom-table-column"
         :group-index="0"
@@ -81,7 +81,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -91,7 +91,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -111,7 +111,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -247,17 +247,16 @@
 
       <DxSummary>
         <DxGroupItem
-          summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Jenis Keluhan"
+          css-class="!text-left"
           :show-in-group-footer="true"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -265,7 +264,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -273,7 +272,7 @@
           summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -281,7 +280,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -289,7 +288,7 @@
           summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -297,7 +296,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -305,7 +304,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -313,7 +312,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -321,7 +320,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -329,7 +328,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -337,7 +336,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -345,7 +344,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -353,7 +352,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -361,7 +360,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -369,7 +368,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -377,7 +376,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -385,16 +384,15 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
-          summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Jenis Keluhan"
+          css-class="text-white !text-left"
         />
         <DxTotalItem
           summary-type="sum"
@@ -518,13 +516,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -535,7 +533,43 @@
         </p>
       </template>
 
-      <template #formatText="{ data }">
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -596,7 +630,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -620,7 +654,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -629,7 +663,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -656,7 +690,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -710,7 +744,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -719,7 +753,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -728,7 +762,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -743,7 +777,13 @@
 
           <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
-              {{ data.text }}
+              {{
+                isNumber(data.text)
+                  ? data.column.caption == '%'
+                    ? formatPercentage(data.text)
+                    : formatNumber(data.text)
+                  : data.text
+              }}
             </p>
           </template>
 
@@ -772,7 +812,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -781,7 +821,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -857,7 +897,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -875,7 +915,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -913,7 +953,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -932,49 +972,61 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
 
-const filterData = (params: any) => {
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.keluhan.rekap.keluhanPerJenisKeluhan,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = [...queryResult.data.rekapitulasiKeluhanPerJenisKeluhan]
-        .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
-        .map((item: any, index: number) => {
-          return {
-            ...item,
-            number: index + 1
-          }
-        })
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPerJenisKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = [...result.data.data.rekapitulasiKeluhanPerJenisKeluhan]
+          .sort((a: any, b: any) => a.tipe_keluhan.localeCompare(b.tipe_keluhan))
+          .map((item: any, index: number) => {
+            return {
+              ...item,
+              number: index + 1
+            }
+          })
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -987,27 +1039,30 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: selected?.tipe_keluhan ? selected?.tipe_keluhan : ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1018,8 +1073,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 5be408a..e91666f 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -49,23 +49,33 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
       />
-      <!-- <DxColumn
+      <DxColumn
         :width="120"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
-        v-if="filters.groupBy"
-      /> -->
+        v-if="isGroupBy"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Distribusi"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="Distribusi"
+        v-else
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -82,7 +92,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -92,7 +102,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -112,7 +122,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -250,7 +260,7 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="kelompok"
           css-class="text-white !text-left"
         />
         <DxTotalItem
@@ -375,13 +385,49 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -393,7 +439,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p class="!text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -453,7 +499,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -477,7 +523,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -486,7 +532,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -513,7 +559,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -567,7 +613,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -576,7 +622,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -585,7 +631,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -629,7 +675,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -638,7 +684,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -714,7 +760,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -732,7 +778,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -769,7 +815,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -788,42 +834,63 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
-const filterData = (params: any) => {
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.keluhan.rekap.keluhanPerKelompokKeluhan,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
+
+  loadingData.value = true
+  await requestGraphQl(
+    params.groupBy
+      ? queries.keluhan.rekap.keluhanPerKelompokKeluhanUID
+      : queries.keluhan.rekap.keluhanPerKelompokKeluhan,
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    .then((result) => {
+      isGroupBy.value = params.groupBy
+      if (result.data.data != undefined) {
+        data.value = isGroupBy.value
+          ? result.data.data.rekapitulasiKeluhanPerKelompokKeluhanUid
+          : result.data.data.rekapitulasiKeluhanPerKelompokKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -834,29 +901,32 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUlp: 0,
+    idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
+    idUp3: 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: selected?.kelompok ? selected?.kelompok : '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -867,8 +937,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 921dd99..c8da184 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -48,13 +48,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="100"
+        :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         data-type="number"
-        data-field="no"
         cell-template="formatNumber"
       />
       <DxColumn
@@ -69,10 +68,19 @@
         :width="170"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="0"
-        v-if="filters.groupBy"
+        v-if="isGroupBy"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Distribusi"
+        css-class="custom-table-column"
+        :group-index="0"
+        v-else
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -82,7 +90,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -92,7 +100,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -112,7 +120,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -250,7 +258,7 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="tanggal_lapor"
           css-class="text-white !text-left"
         />
         <DxTotalItem
@@ -375,17 +383,53 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #percent="{ data }">
-        <p class="cursor-pointer">{{ data.text }}%</p>
+        <p class="cursor-pointer" @click="setAgreementDialog(false, 0)">{{ data.text }}%</p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -397,7 +441,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -457,7 +501,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -481,7 +525,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -490,7 +534,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -517,7 +561,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -571,7 +615,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -580,7 +624,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -589,7 +633,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -633,7 +677,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -642,7 +686,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -718,7 +762,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -736,7 +780,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -773,10 +817,11 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { reformatDate } from '@/utils/texts'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -792,44 +837,24 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+const isGroupBy = ref(false)
 
-const filterData = (params: any) => {
-  const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3 } = params
-
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.keluhan.rekap.keluhanPerTanggal,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
 }
 
-const getDetail = () => {
-  const dateValue = filters.value.periode.split(' s/d ')
-  const selected = dataSelected.value
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const dateValue = params.periode.split(' s/d ')
+  const { ulp, uid, up3 } = params
 
   const query = {
     dateFrom: dateValue[0]
@@ -838,29 +863,68 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPerTanggal, query)
+    .then((result) => {
+      isGroupBy.value = params.groupBy
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiKeluhanPerTanggal
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
+}
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
+const getDetail = async () => {
+  const dateValue = filters.value.periode.split(' s/d ')
+  const selected = dataSelected.value
 
-  onError((error) => {
-    console.log(error)
-  })
+  const query = {
+    dateFrom: selected?.tanggal_lapor
+      ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
+      : '',
+    dateTo: selected?.tanggal_lapor
+      ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
+      : '',
+    idUlp: 0,
+    idUid: isGroupBy.value ? (selected?.id_uid ? selected?.id_uid : 0) : 0,
+    idUp3: 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: selected?.tanggal_lapor
+      ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
+      : '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
+  }
 
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -871,8 +935,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 168286a..7513dcd 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -47,7 +47,7 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="100"
+        :width="50"
         alignment="center"
         caption="NO"
         css-class="custom-table-column"
@@ -81,7 +81,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -91,7 +91,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -111,6 +111,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -248,7 +249,7 @@
         <DxGroupItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="nama_ulp"
           css-class="!text-left"
           :show-in-group-footer="true"
         />
@@ -392,7 +393,7 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="nama_ulp"
           css-class="text-white !text-left"
         />
         <DxTotalItem
@@ -517,13 +518,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -534,7 +535,43 @@
         </p>
       </template>
 
-      <template #formatText="{ data }">
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -595,7 +632,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -619,7 +656,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -628,7 +665,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -655,7 +692,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -709,7 +746,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -718,7 +755,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -727,7 +764,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -771,7 +808,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -780,7 +817,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -856,7 +893,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -874,7 +911,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -912,7 +949,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -931,12 +968,24 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
 
-const filterData = (params: any) => {
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
-
-  const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -946,31 +995,33 @@ const filterData = (params: any) => {
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = [...queryResult.data.rekapitulasiKeluhanPerUnit]
-        .sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
-        .map((item, index) => {
-          return {
-            ...item,
-            number: index + 1
-          }
-        })
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPerUnit, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = [...result.data.data.rekapitulasiKeluhanPerUnit]
+          .sort((a, b) => a.nama_up3.localeCompare(b.nama_up3))
+          .map((item, index) => {
+            return {
+              ...item,
+              number: index + 1
+            }
+          })
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -983,27 +1034,30 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1014,8 +1068,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index ad4b4e8..312937a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -44,7 +44,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -219,7 +219,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -238,41 +238,46 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { ulp, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.keluhan.rekap.keluhanPerRatingUnit,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0
-    }
-  )
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPerRatingUnit, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiKeluhanRatingPerUnit
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -288,24 +293,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 8146853..a81876d 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -48,7 +48,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -152,51 +152,24 @@ import Filters from '@/components/Form/Filters.vue'
 import { Type14 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const daftarGangguanDanMaterialDipakai = gql`
-  query DaftardaftarGangguanDanMaterialDipakai(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    daftarGangguanDanMaterialDipakai(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      distribusi: $idUid
-      area: $idUp3
-      posko: $posko
-    ) {
-      isi_laporan
-      nama_material
-      nama_pelanggan
-      nomor_gangguan
-      penyebab_gangguan
-      regu
-      satuan
-      sumber
-      volume
-      waktu_padam
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(daftarGangguanDanMaterialDipakai, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUid: 0,
-  idUp3: 0,
-  posko: ''
-})
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { posko, idUid, idUp3 } = params
-  refetch({
+
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -206,23 +179,23 @@ const filterData = (params: any) => {
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     posko: posko ? posko.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDanMaterialDipakai.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
+  }
+
+  loading.value = true
+  await requestGraphQl(queries.material.daftar.daftarGangguanDanMaterialDipakai, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.daftarGangguanDanMaterialDipakai
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 58f48a0..ef08f98 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -48,7 +48,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -112,78 +112,23 @@ import { Type14 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const loading = ref(false)
 
-const rekapitulasiPemakaianMaterial = gql`
-  query DaftarrekapitulasiPemakaianMaterial(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: String
-    $idUid: Int
-    $idUp3: Int
-  ) {
-    rekapitulasiPemakaianMaterial(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      distribusi: $idUid
-      area: $idUp3
-      posko: $posko
-    ) {
-      kode_material
-      nama_material
-      satuan
-      sumber_material
-      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 { onResult, onError, loading, refetch } = useQuery(rekapitulasiPemakaianMaterial, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUid: 0,
-  idUp3: 0,
-  posko: 0
-})
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
-
   const { posko, idUid, idUp3 } = params
-
-  refetch({
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -193,23 +138,23 @@ const filterData = (params: any) => {
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
     posko: posko ? posko.id : 0
-  })
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      queryResult.data.rekapitulasiPemakaianMaterial.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
-    }
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
+  }
+
+  loading.value = true
+  await requestGraphQl(queries.material.rekap.rekapitulasiPemakaianMaterial, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiPemakaianMaterial
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 2566d75..9ad071d 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -46,16 +46,38 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <!-- <DxColumn
+      <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
-        name="namaUlp"
-      /> -->
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UID"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -179,6 +201,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -211,6 +289,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,
@@ -227,7 +306,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -283,40 +362,45 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.dispatchingTimeGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.dispatchingTimeGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaDispatchingTimeGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaDispatchingTimeGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -332,24 +416,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 46333b2..14d9e18 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -44,7 +45,38 @@
         :allow-export-selected-data="false"
       />
       <DxColumnFixing :enabled="true" />
-
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         data-field="nama_ulp"
@@ -180,6 +212,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -194,6 +282,8 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
@@ -209,7 +299,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -236,7 +326,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -244,31 +340,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRekapitulasiEnsGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiEnsGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -300,7 +395,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -316,24 +411,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index d509edb..37b829f 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,6 +52,38 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
         <DxColumn
           :width="150"
@@ -126,6 +159,35 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="jumlah_gangguan"
+          column="jumlah_gangguan"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="jumlah_informasi"
+          column="jumlah_informasi"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="total"
+          column="total"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -183,7 +245,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -438,6 +500,8 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPager,
   DxPaging,
@@ -453,7 +517,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -483,37 +547,42 @@ const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.gangguanBelumSelesai,
-    {
-      regional: regional.name == 'Semua Regional' ? null : regional.id,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.nama_regional,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaGangguanBelumSelesai
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanBelumSelesai
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -545,40 +614,36 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
+  const { bulan, tahun } = filters.value
+
   const query = {
-    dateFrom: dateValue[0]
-      ? dateValue[0].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
-    dateTo: dateValue[1]
-      ? dateValue[1].split('-').reverse().join('-')
-      : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    bulan: bulan.id,
+    tahun: tahun.id,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanBelumSelesaiDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailMonalisaGangguanBelumSelesai
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 3d5031c..816c77d 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -48,7 +48,7 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
@@ -165,7 +165,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -188,34 +188,38 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaGangguanPerJenisGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanPerJenisGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -246,7 +250,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -262,24 +266,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index c9a2249..c59cc83 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -24,7 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -53,6 +53,14 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
+      <DxColumn
+        alignment="center"
+        data-field=""
+        caption="NASIONAL"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         alignment="center"
         data-field="nama_regional"
@@ -104,7 +112,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_gangguan_rpt_bulan"
+              data-field="count_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -115,7 +123,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_gangguan_bulan"
+              data-field="avg_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -126,7 +134,7 @@
               alignment="center"
               caption="d"
               data-type="number"
-              data-field="total_rct_bulan"
+              data-field="total_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -137,7 +145,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_gangguan_rct_bulan"
+              data-field="count_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -148,7 +156,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rct_gangguan_bulan"
+              data-field="avg_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -176,7 +184,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_gangguan_rpt_sampai_bulan"
+              data-field="count_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -187,7 +195,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_gangguan_sampai_bulan"
+              data-field="avg_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -209,7 +217,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_gangguan_rct_sampai_bulan"
+              data-field="count_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -220,7 +228,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rch_gangguan_sampai_bulan"
+              data-field="avg_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -242,8 +250,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rpt_bulan"
-          column="jumlah_gangguan_rpt_bulan"
+          show-in-column="count_durasi_response_time_bulan_ini"
+          column="count_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -251,8 +259,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_gangguan_bulan"
-          column="rpt_gangguan_bulan"
+          show-in-column="avg_durasi_response_time_bulan_ini"
+          column="avg_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -260,8 +268,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="total_rct_bulan"
-          column="total_rct_bulan"
+          show-in-column="total_durasi_recovery_time_bulan_ini"
+          column="total_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -269,8 +277,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rct_bulan"
-          column="jumlah_gangguan_rct_bulan"
+          show-in-column="count_durasi_recovery_time_bulan_ini"
+          column="count_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -278,8 +286,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rct_gangguan_bulan"
-          column="rct_gangguan_bulan"
+          show-in-column="avg_durasi_recovery_time_bulan_ini"
+          column="avg_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -296,8 +304,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rpt_sampai_bulan"
-          column="jumlah_gangguan_rpt_sampai_bulan"
+          show-in-column="count_durasi_response_time_tahun_ini"
+          column="count_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -305,8 +313,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_gangguan_sampai_bulan"
-          column="rpt_gangguan_sampai_bulan"
+          show-in-column="avg_durasi_response_time_tahun_ini"
+          column="avg_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -323,8 +331,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_gangguan_rct_sampai_bulan"
-          column="jumlah_gangguan_rct_sampai_bulan"
+          show-in-column="count_durasi_recovery_time_tahun_ini"
+          column="count_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -332,8 +340,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rch_gangguan_sampai_bulan"
-          column="rch_gangguan_sampai_bulan"
+          show-in-column="avg_durasi_recovery_time_tahun_ini"
+          column="avg_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -385,7 +393,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -407,36 +415,40 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahDurasiRptRctGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaJumlahDurasiRptRctGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
 }
 
 const onExporting = (e: any) => {
@@ -467,7 +479,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -483,24 +495,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -537,337 +546,5 @@ const filters = ref<any>({
 
 onMounted(() => {
   getMonthName(filters.value.bulan.id)
-  data.value = [
-    {
-      id: 0,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 120,
-      nama_uid: 'WILAYAH SUMATERA UTARA',
-      id_up3: 12100,
-      nama_up3: 'UP3 PEMATANG SIANTAR',
-      id_ulp: 12102,
-      nama_ulp: 'ULP LIMA PULUH',
-      total_durasi_response_time_bulan_ini: 15239,
-      count_durasi_response_time_bulan_ini: 26,
-      avg_durasi_response_time_bulan_ini: 586.1153846153846,
-      total_durasi_recovery_time_bulan_ini: 31425,
-      count_durasi_recovery_time_bulan_ini: 26,
-      avg_durasi_recovery_time_bulan_ini: 1208.6538461538462,
-      total_durasi_response_time_tahun_ini: 353812,
-      count_durasi_response_time_tahun_ini: 746,
-      avg_durasi_response_time_tahun_ini: 474.2788203753351,
-      total_durasi_recovery_time_tahun_ini: 708488,
-      count_durasi_recovery_time_tahun_ini: 746,
-      avg_durasi_recovery_time_tahun_ini: 474.2788203753351
-    },
-    {
-      id: 1,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 41,
-      nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
-      id_up3: 412,
-      nama_up3: 'UP3 TERNATE',
-      id_ulp: 41230,
-      nama_ulp: 'ULP BACAN',
-      total_durasi_response_time_bulan_ini: 475280,
-      count_durasi_response_time_bulan_ini: 378,
-      avg_durasi_response_time_bulan_ini: 1257.3544973544974,
-      total_durasi_recovery_time_bulan_ini: 834379,
-      count_durasi_recovery_time_bulan_ini: 378,
-      avg_durasi_recovery_time_bulan_ini: 2207.3518518518517,
-      total_durasi_response_time_tahun_ini: 2353207,
-      count_durasi_response_time_tahun_ini: 2185,
-      avg_durasi_response_time_tahun_ini: 1076.982608695652,
-      total_durasi_recovery_time_tahun_ini: 3773486,
-      count_durasi_recovery_time_tahun_ini: 2034,
-      avg_durasi_recovery_time_tahun_ini: 1076.982608695652
-    },
-    {
-      id: 2,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 101,
-      nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
-      id_up3: 52150,
-      nama_up3: 'UP3 MAGELANG',
-      id_ulp: 52156,
-      nama_ulp: 'ULP PARAKAN',
-      total_durasi_response_time_bulan_ini: 1149446,
-      count_durasi_response_time_bulan_ini: 991,
-      avg_durasi_response_time_bulan_ini: 1159.8849646821393,
-      total_durasi_recovery_time_bulan_ini: 2064288,
-      count_durasi_recovery_time_bulan_ini: 991,
-      avg_durasi_recovery_time_bulan_ini: 2083.0353178607465,
-      total_durasi_response_time_tahun_ini: 11820004,
-      count_durasi_response_time_tahun_ini: 10220,
-      avg_durasi_response_time_tahun_ini: 1156.5561643835617,
-      total_durasi_recovery_time_tahun_ini: 19879614,
-      count_durasi_recovery_time_tahun_ini: 10215,
-      avg_durasi_recovery_time_tahun_ini: 1156.5561643835617
-    },
-    {
-      id: 3,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 31,
-      nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
-      id_up3: 31500,
-      nama_up3: 'UP3 TOLITOLI',
-      id_ulp: 31530,
-      nama_ulp: 'ULP BANGKIR',
-      total_durasi_response_time_bulan_ini: 52509,
-      count_durasi_response_time_bulan_ini: 52,
-      avg_durasi_response_time_bulan_ini: 1009.7884615384615,
-      total_durasi_recovery_time_bulan_ini: 96349,
-      count_durasi_recovery_time_bulan_ini: 52,
-      avg_durasi_recovery_time_bulan_ini: 1852.8653846153845,
-      total_durasi_response_time_tahun_ini: 13888593,
-      count_durasi_response_time_tahun_ini: 2300,
-      avg_durasi_response_time_tahun_ini: 6038.518695652174,
-      total_durasi_recovery_time_tahun_ini: 2188450,
-      count_durasi_recovery_time_tahun_ini: 2291,
-      avg_durasi_recovery_time_tahun_ini: 6038.518695652174
-    },
-    {
-      id: 4,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 103,
-      nama_uid: 'DISTRIBUSI JAWA TIMUR',
-      id_up3: 154,
-      nama_up3: 'UP3 SITUBONDO',
-      id_ulp: 51654,
-      nama_ulp: 'ULP WONOSARI',
-      total_durasi_response_time_bulan_ini: 1408665,
-      count_durasi_response_time_bulan_ini: 843,
-      avg_durasi_response_time_bulan_ini: 1671.0142348754448,
-      total_durasi_recovery_time_bulan_ini: 2183667,
-      count_durasi_recovery_time_bulan_ini: 843,
-      avg_durasi_recovery_time_bulan_ini: 2590.3523131672596,
-      total_durasi_response_time_tahun_ini: 11091744,
-      count_durasi_response_time_tahun_ini: 8376,
-      avg_durasi_response_time_tahun_ini: 1324.2292263610316,
-      total_durasi_recovery_time_tahun_ini: 17694880,
-      count_durasi_recovery_time_tahun_ini: 8237,
-      avg_durasi_recovery_time_tahun_ini: 1324.2292263610316
-    },
-    {
-      id: 5,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 110,
-      nama_uid: 'WILAYAH ACEH',
-      id_up3: 116,
-      nama_up3: 'UP3 SIGLI',
-      id_ulp: 11662,
-      nama_ulp: 'ULP MEUREUDU',
-      total_durasi_response_time_bulan_ini: 762987,
-      count_durasi_response_time_bulan_ini: 735,
-      avg_durasi_response_time_bulan_ini: 1038.0775510204082,
-      total_durasi_recovery_time_bulan_ini: 1550302,
-      count_durasi_recovery_time_bulan_ini: 735,
-      avg_durasi_recovery_time_bulan_ini: 2109.2544217687073,
-      total_durasi_response_time_tahun_ini: 8107328,
-      count_durasi_response_time_tahun_ini: 8068,
-      avg_durasi_response_time_tahun_ini: 1004.874566187407,
-      total_durasi_recovery_time_tahun_ini: 15846250,
-      count_durasi_recovery_time_tahun_ini: 8064,
-      avg_durasi_recovery_time_tahun_ini: 1004.874566187407
-    },
-    {
-      id: 6,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 287,
-      nama_uid: 'DISTRIBUSI BALI',
-      id_up3: 329,
-      nama_up3: 'UP3 BALI UTARA',
-      id_ulp: 55340,
-      nama_ulp: 'ULP GILIMANUK',
-      total_durasi_response_time_bulan_ini: 809159,
-      count_durasi_response_time_bulan_ini: 656,
-      avg_durasi_response_time_bulan_ini: 1233.4740853658536,
-      total_durasi_recovery_time_bulan_ini: 1309097,
-      count_durasi_recovery_time_bulan_ini: 656,
-      avg_durasi_recovery_time_bulan_ini: 1995.5746951219512,
-      total_durasi_response_time_tahun_ini: 12308918,
-      count_durasi_response_time_tahun_ini: 8660,
-      avg_durasi_response_time_tahun_ini: 1421.35311778291,
-      total_durasi_recovery_time_tahun_ini: 19393316,
-      count_durasi_recovery_time_tahun_ini: 8626,
-      avg_durasi_recovery_time_tahun_ini: 1421.35311778291
-    },
-    {
-      id: 7,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 131,
-      nama_uid: 'WILAYAH SUMATERA BARAT',
-      id_up3: 13300,
-      nama_up3: 'UP3 SOLOK',
-      id_ulp: 13334,
-      nama_ulp: 'ULP SILUNGKANG',
-      total_durasi_response_time_bulan_ini: 138385,
-      count_durasi_response_time_bulan_ini: 187,
-      avg_durasi_response_time_bulan_ini: 740.0267379679144,
-      total_durasi_recovery_time_bulan_ini: 292325,
-      count_durasi_recovery_time_bulan_ini: 187,
-      avg_durasi_recovery_time_bulan_ini: 1563.235294117647,
-      total_durasi_response_time_tahun_ini: 1356526,
-      count_durasi_response_time_tahun_ini: 1575,
-      avg_durasi_response_time_tahun_ini: 861.2863492063492,
-      total_durasi_recovery_time_tahun_ini: 2834067,
-      count_durasi_recovery_time_tahun_ini: 1553,
-      avg_durasi_recovery_time_tahun_ini: 861.2863492063492
-    },
-    {
-      id: 8,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 221,
-      nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
-      id_up3: 2220,
-      nama_up3: 'UP3 BARABAI',
-      id_ulp: 22230,
-      nama_ulp: 'ULP AMUNTAI',
-      total_durasi_response_time_bulan_ini: 208716,
-      count_durasi_response_time_bulan_ini: 329,
-      avg_durasi_response_time_bulan_ini: 634.3951367781156,
-      total_durasi_recovery_time_bulan_ini: 382846,
-      count_durasi_recovery_time_bulan_ini: 329,
-      avg_durasi_recovery_time_bulan_ini: 1163.6656534954407,
-      total_durasi_response_time_tahun_ini: 2571552,
-      count_durasi_response_time_tahun_ini: 3294,
-      avg_durasi_response_time_tahun_ini: 780.6775956284152,
-      total_durasi_recovery_time_tahun_ini: 4579466,
-      count_durasi_recovery_time_tahun_ini: 3269,
-      avg_durasi_recovery_time_tahun_ini: 780.6775956284152
-    },
-    {
-      id: 9,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 31,
-      nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
-      id_up3: 31700,
-      nama_up3: 'UP3 KOTAMOBAGU',
-      id_ulp: 31730,
-      nama_ulp: 'ULP MODAYAG',
-      total_durasi_response_time_bulan_ini: 172545,
-      count_durasi_response_time_bulan_ini: 106,
-      avg_durasi_response_time_bulan_ini: 1627.7830188679245,
-      total_durasi_recovery_time_bulan_ini: 241479,
-      count_durasi_recovery_time_bulan_ini: 106,
-      avg_durasi_recovery_time_bulan_ini: 2278.103773584906,
-      total_durasi_response_time_tahun_ini: 1863546,
-      count_durasi_response_time_tahun_ini: 1801,
-      avg_durasi_response_time_tahun_ini: 1034.728484175458,
-      total_durasi_recovery_time_tahun_ini: 2899034,
-      count_durasi_recovery_time_tahun_ini: 1759,
-      avg_durasi_recovery_time_tahun_ini: 1034.728484175458
-    },
-    {
-      id: 10,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 427,
-      nama_uid: 'DISTRIBUSI JAWA BARAT',
-      id_up3: 546,
-      nama_up3: 'UP3 TASIKMALAYA',
-      id_ulp: 53231,
-      nama_ulp: 'ULP CIAMIS',
-      total_durasi_response_time_bulan_ini: 1077336,
-      count_durasi_response_time_bulan_ini: 1604,
-      avg_durasi_response_time_bulan_ini: 671.6558603491272,
-      total_durasi_recovery_time_bulan_ini: 1901265,
-      count_durasi_recovery_time_bulan_ini: 1604,
-      avg_durasi_recovery_time_bulan_ini: 1185.327306733167,
-      total_durasi_response_time_tahun_ini: 12491127,
-      count_durasi_response_time_tahun_ini: 20694,
-      avg_durasi_response_time_tahun_ini: 603.6110466801972,
-      total_durasi_recovery_time_tahun_ini: 19887846,
-      count_durasi_recovery_time_tahun_ini: 20343,
-      avg_durasi_recovery_time_tahun_ini: 603.6110466801972
-    },
-    {
-      id: 11,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 103,
-      nama_uid: 'DISTRIBUSI JAWA TIMUR',
-      id_up3: 157,
-      nama_up3: 'UP3 SURABAYA UTARA',
-      id_ulp: 51101,
-      nama_ulp: 'ULP INDRAPURA',
-      total_durasi_response_time_bulan_ini: 468551,
-      count_durasi_response_time_bulan_ini: 438,
-      avg_durasi_response_time_bulan_ini: 1069.7511415525114,
-      total_durasi_recovery_time_bulan_ini: 857038,
-      count_durasi_recovery_time_bulan_ini: 438,
-      avg_durasi_recovery_time_bulan_ini: 1956.7077625570776,
-      total_durasi_response_time_tahun_ini: 6115468,
-      count_durasi_response_time_tahun_ini: 5889,
-      avg_durasi_response_time_tahun_ini: 1038.4561046018,
-      total_durasi_recovery_time_tahun_ini: 10632184,
-      count_durasi_recovery_time_tahun_ini: 5658,
-      avg_durasi_recovery_time_tahun_ini: 1038.4561046018
-    },
-    {
-      id: 12,
-      nama_regional: 'REGIONAL SULMAPANA',
-      id_uid: 41,
-      nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
-      id_up3: 414,
-      nama_up3: 'UP3 MASOHI',
-      id_ulp: 41430,
-      nama_ulp: 'ULP MASOHI',
-      total_durasi_response_time_bulan_ini: 113695,
-      count_durasi_response_time_bulan_ini: 145,
-      avg_durasi_response_time_bulan_ini: 784.1034482758621,
-      total_durasi_recovery_time_bulan_ini: 211422,
-      count_durasi_recovery_time_bulan_ini: 145,
-      avg_durasi_recovery_time_bulan_ini: 1458.0827586206897,
-      total_durasi_response_time_tahun_ini: 2363191,
-      count_durasi_response_time_tahun_ini: 2822,
-      avg_durasi_response_time_tahun_ini: 837.4170800850461,
-      total_durasi_recovery_time_tahun_ini: 4201912,
-      count_durasi_recovery_time_tahun_ini: 2818,
-      avg_durasi_recovery_time_tahun_ini: 837.4170800850461
-    },
-    {
-      id: 13,
-      nama_regional: 'REGIONAL SUMKAL',
-      id_uid: 131,
-      nama_uid: 'WILAYAH SUMATERA BARAT',
-      id_up3: 13100,
-      nama_up3: 'UP3 PADANG',
-      id_ulp: 13105,
-      nama_ulp: 'ULP LUBUK ALUNG',
-      total_durasi_response_time_bulan_ini: 504207,
-      count_durasi_response_time_bulan_ini: 516,
-      avg_durasi_response_time_bulan_ini: 977.1453488372093,
-      total_durasi_recovery_time_bulan_ini: 974512,
-      count_durasi_recovery_time_bulan_ini: 516,
-      avg_durasi_recovery_time_bulan_ini: 1888.5891472868218,
-      total_durasi_response_time_tahun_ini: 5776799,
-      count_durasi_response_time_tahun_ini: 5202,
-      avg_durasi_response_time_tahun_ini: 1110.4957708573625,
-      total_durasi_recovery_time_tahun_ini: 10668074,
-      count_durasi_recovery_time_tahun_ini: 5035,
-      avg_durasi_recovery_time_tahun_ini: 1110.4957708573625
-    },
-    {
-      id: 14,
-      nama_regional: 'REGIONAL JMB',
-      id_uid: 103,
-      nama_uid: 'DISTRIBUSI JAWA TIMUR',
-      id_up3: 153,
-      nama_up3: 'UP3 SIDOARJO',
-      id_ulp: 51182,
-      nama_ulp: 'ULP PORONG',
-      total_durasi_response_time_bulan_ini: 2711446,
-      count_durasi_response_time_bulan_ini: 2407,
-      avg_durasi_response_time_bulan_ini: 1126.483589530536,
-      total_durasi_recovery_time_bulan_ini: 4361855,
-      count_durasi_recovery_time_bulan_ini: 2407,
-      avg_durasi_recovery_time_bulan_ini: 1812.1541337764852,
-      total_durasi_response_time_tahun_ini: 27345376,
-      count_durasi_response_time_tahun_ini: 21982,
-      avg_durasi_response_time_tahun_ini: 1243.9894459102902,
-      total_durasi_recovery_time_tahun_ini: 43993555,
-      count_durasi_recovery_time_tahun_ini: 21919,
-      avg_durasi_recovery_time_tahun_ini: 1243.9894459102902
-    }
-  ]
 })
 </script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 04511e0..228df70 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -300,7 +300,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -356,7 +356,13 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -364,33 +370,33 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.jumlahKaliGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaJumlahKaliGangguan
-    }
-  })
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.jumlahKaliGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahKaliGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -406,24 +412,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 29e9e0f..6de86b8 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
+      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -55,11 +55,35 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
-        caption="UID"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@@ -199,6 +223,7 @@
           show-in-column="mom_bulan_kemarin"
           column="mom_bulan_kemarin"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -276,7 +301,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -303,7 +328,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -311,31 +342,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.laporUlangGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRekapitulasiLaporUlangGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.laporUlangGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiLaporUlangGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -365,7 +395,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -378,27 +408,30 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: 0,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 6000ec8..262eb49 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -46,16 +46,38 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <!-- <DxColumn
+      <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
-        name="namaUlp"
-      /> -->
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -179,6 +201,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -211,6 +289,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,
@@ -227,7 +306,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -254,7 +333,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -262,31 +347,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.recoveryTimeGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRecoveryTimeGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.recoveryTimeGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRecoveryTimeGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -317,7 +401,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -333,24 +417,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 3550f2d..fb6f97b 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -46,16 +46,38 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <!-- <DxColumn
+      <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
-        name="namaUlp"
-      /> -->
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
+        caption="UIW"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      />
       <DxColumn
         alignment="center"
         :min-width="170"
@@ -179,6 +201,62 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -211,6 +289,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,
@@ -227,7 +306,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -254,7 +333,13 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -262,31 +347,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.gangguan.rekap.responseTimeGangguan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaResponseTimeGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.gangguan.rekap.responseTimeGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaResponseTimeGangguan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const onExporting = (e: any) => {
@@ -317,7 +401,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -333,24 +417,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 1fdd075..14b6d68 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -48,7 +48,7 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
@@ -152,7 +152,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -204,7 +204,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -220,24 +220,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -264,37 +261,42 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.gangguanPerJenisKeluhan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaGangguanPerJenisKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.gangguanPerJenisKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaGangguanPerJenisKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index 33c484f..e09a375 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -26,7 +26,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -57,27 +57,35 @@
       />
       <DxColumn
         alignment="center"
+        :min-width="170"
+        data-type="text"
         data-field="nama_regional"
         caption="Regional"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
-        data-field="nama_up3"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
         caption="UP3"
         css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -106,7 +114,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_keluhan_rpt_bulan"
+              data-field="count_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -117,7 +125,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_keluhan_bulan"
+              data-field="avg_durasi_response_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -128,7 +136,7 @@
               alignment="center"
               caption="d"
               data-type="number"
-              data-field="total_rct_bulan"
+              data-field="total_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -139,7 +147,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_keluhan_rct_bulan"
+              data-field="count_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -150,7 +158,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rct_keluhan_bulan"
+              data-field="avg_durasi_recovery_time_bulan_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -178,7 +186,7 @@
               alignment="center"
               caption="b"
               data-type="number"
-              data-field="jumlah_keluhan_rpt_sampai_bulan"
+              data-field="count_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -189,7 +197,7 @@
               alignment="center"
               caption="c=a/b"
               data-type="number"
-              data-field="rpt_keluhan_sampai_bulan"
+              data-field="avg_durasi_response_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -211,7 +219,7 @@
               alignment="center"
               caption="e"
               data-type="number"
-              data-field="jumlah_keluhan_rct_sampai_bulan"
+              data-field="count_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -222,7 +230,7 @@
               alignment="center"
               caption="f=d/e"
               data-type="number"
-              data-field="rch_keluhan_sampai_bulan"
+              data-field="avg_durasi_recovery_time_tahun_ini"
               css-class="custom-table-column"
               cell-template="formatNumber"
             />
@@ -236,6 +244,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_response_time_bulan_ini"
+          column="total_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -243,7 +252,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rpt_bulan"
+          show-in-column="count_durasi_response_time_bulan_ini"
+          column="count_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -251,7 +261,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_keluhan_bulan"
+          show-in-column="avg_durasi_response_time_bulan_ini"
+          column="avg_durasi_response_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -259,7 +270,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="total_rct_bulan"
+          show-in-column="total_durasi_recovery_time_bulan_ini"
+          column="total_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -267,7 +279,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rct_bulan"
+          show-in-column="count_durasi_recovery_time_bulan_ini"
+          column="count_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -275,7 +288,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rct_keluhan_bulan"
+          show-in-column="avg_durasi_recovery_time_bulan_ini"
+          column="avg_durasi_recovery_time_bulan_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -284,6 +298,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_response_time_tahun_ini"
+          column="total_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -291,7 +306,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rpt_sampai_bulan"
+          show-in-column="count_durasi_response_time_tahun_ini"
+          column="count_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -299,7 +315,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rpt_keluhan_sampai_bulan"
+          show-in-column="avg_durasi_response_time_tahun_ini"
+          column="avg_durasi_response_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -308,6 +325,7 @@
           :align-by-column="true"
           summary-type="sum"
           show-in-column="total_durasi_recovery_time_tahun_ini"
+          column="total_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -315,7 +333,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="jumlah_keluhan_rct_sampai_bulan"
+          show-in-column="count_durasi_recovery_time_tahun_ini"
+          column="count_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -323,7 +342,8 @@
           :show-in-group-footer="false"
           :align-by-column="true"
           summary-type="sum"
-          show-in-column="rch_keluhan_sampai_bulan"
+          show-in-column="avg_durasi_recovery_time_tahun_ini"
+          column="avg_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -376,7 +396,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
@@ -426,7 +446,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -442,24 +462,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -486,38 +503,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.jumlahDurasiRptRctKeluhan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaJumlahDurasiRptRctKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.jumlahDurasiRptRctKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahDurasiRptRctKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index 08830a2..dd93cb7 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -60,19 +60,33 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@@ -282,7 +296,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -338,7 +352,13 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -346,34 +366,33 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.jumlahKaliKeluhan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaJumlahKaliKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.jumlahKaliKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaJumlahKaliKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -389,24 +408,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index fc65ce1..5deeccf 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -55,11 +55,35 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
         <DxColumn
@@ -119,6 +143,37 @@
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="jumlah_keluhan"
+          column="jumlah_keluhan"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="jumlah_informasi"
+          column="jumlah_informasi"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="total"
+          column="total"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
+        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -157,6 +212,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,
@@ -173,7 +229,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
 const client = apolloClient()
@@ -223,7 +279,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -239,24 +295,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -283,38 +336,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.keluhanBelumSelesai,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRekapitulasiKeluhanBelumSelesai
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.keluhanBelumSelesai, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiKeluhanBelumSelesai
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index ad247f6..40bb560 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -55,11 +55,35 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_uid"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="namaRegional"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="id_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn alignment="center" caption="Lapor Ulang Keluhan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
@@ -181,6 +205,7 @@
           show-in-column="mom_bulan_kemarin"
           column="mom_bulan_kemarin"
           css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -259,6 +284,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxGrouping,
   DxLoadPanel,
   DxPaging,
@@ -277,7 +303,7 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 
 const client = apolloClient()
@@ -331,7 +357,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -347,24 +373,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -391,7 +414,13 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -399,31 +428,30 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.laporUlangKeluhan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRekapitulasiLaporUlangKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.laporUlangKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRekapitulasiLaporUlangKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 0945720..5c39e42 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_up3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -301,7 +306,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -357,7 +362,13 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -365,34 +376,33 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.recoveryTimeKeluhan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaRecoveryTimeKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.recoveryTimeKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaRecoveryTimeKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -408,24 +418,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index 3842c03..f416151 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_up3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -302,7 +307,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -354,7 +359,13 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1
   lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id
@@ -362,34 +373,33 @@ const filterData = (params: any) => {
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.keluhan.rekap.responseTimeKeluhan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaResponseTimeKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.keluhan.rekap.responseTimeKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.monalisaResponseTimeKeluhan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -405,24 +415,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 998202b..0514642 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
+          data-field="id_uid"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
+          data-field="id_up3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"
@@ -383,7 +388,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -664,7 +669,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -720,7 +725,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -736,24 +741,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -780,38 +782,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.laporan.bulanan.agingComplaintBulanan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.agingComplaintBulanan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.laporan.bulanan.agingComplaintBulanan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.agingComplaintBulanan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index 11ff2c1..fbd9042 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
+          data-field="id_uid"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
+          data-field="id_up3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"
@@ -278,7 +283,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -331,7 +336,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -347,24 +352,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -391,37 +393,42 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.laporan.bulanan.energyNotSalesBulanan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.energyNotSalesBulanan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.laporan.bulanan.energyNotSalesBulanan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.energyNotSalesBulanan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index ae28172..ddbeb73 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_up3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -290,7 +295,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -353,37 +358,45 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   clearSelection()
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
+
+  loadingData.value = true
+  await requestGraphQl(
     queries.monalisa.laporan.bulanan.kepatuhandanAkurasiDalamPelaporanBulanan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.kepatuhandanAkurasiDalamPelaporanBulanan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.kepatuhandanAkurasiDalamPelaporanBulanan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 8f41280..7473af8 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -26,7 +26,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -52,27 +52,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_up3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -707,7 +712,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -989,7 +994,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthNameShort } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -1044,7 +1049,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -1060,24 +1065,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1104,38 +1106,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.laporan.bulanan.penurunanJumlahKomplainBulanan,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      idUlp: ulp ? ulp.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.penurunanJumlahKomplainBulanan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.laporan.bulanan.penurunanJumlahKomplainBulanan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.penurunanJumlahKomplainBulanan
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 4fbd5cb..ce0c607 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
+          data-field="id_uid"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
+          data-field="id_up3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"
@@ -362,7 +367,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
@@ -409,7 +414,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -425,24 +430,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -468,36 +470,41 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
 }
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.laporan.kumulatif.agingComplaintKumulatif,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : 10,
-      tahun: bulan ? tahun.id : 2023
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : 10,
+    tahun: bulan ? tahun.id : 2023
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.agingComplaintKumulatif
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.laporan.kumulatif.agingComplaintKumulatif, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.agingComplaintKumulatif
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const filters = ref()
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 5d6a23f..c7a58ef 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -56,27 +56,32 @@
           :min-width="170"
           data-type="text"
           data-field="nama_regional"
-          caption="Nama Regional"
+          caption="Regional"
           css-class="custom-table-column"
           :group-index="0"
+          name="namaRegional"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
+          data-field="id_uid"
+          caption="UID"
           css-class="custom-table-column"
           :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_uid"
         />
         <DxColumn
           alignment="center"
           :min-width="170"
           data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
+          data-field="id_up3"
+          caption="UP3"
           css-class="custom-table-column"
-          :group-index="2"
+          :group-index="1"
+          name="namaUID"
+          :calculate-group-value="(rowData: any) => rowData.nama_up3"
         />
         <DxColumn
           alignment="center"
@@ -278,7 +283,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -331,7 +336,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -347,24 +352,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -391,38 +393,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.laporan.kumulatif.energyNotSalesKumulatif,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.energyNotSalesKumulatif
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.laporan.kumulatif.energyNotSalesKumulatif, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.energyNotSalesKumulatif
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index 40b595a..c331ca2 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -25,7 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -51,27 +51,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_up3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -290,7 +295,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -343,7 +348,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -359,24 +364,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -403,38 +405,46 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
+
+  loadingData.value = true
+  await requestGraphQl(
     queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.kepatuhandanAkurasiDalamPelaporanKumulatif
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index ddcdc8b..a97660a 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -26,7 +26,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" />
+      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -52,27 +52,32 @@
         :min-width="170"
         data-type="text"
         data-field="nama_regional"
-        caption="Nama Regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
+        name="namaRegional"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="id_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_uid"
       />
       <DxColumn
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="id_up3"
+        caption="UP3"
         css-class="custom-table-column"
-        :group-index="2"
+        :group-index="1"
+        name="namaUID"
+        :calculate-group-value="(rowData: any) => rowData.nama_up3"
       />
       <DxColumn
         alignment="center"
@@ -738,7 +743,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
@@ -790,7 +795,7 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -806,24 +811,21 @@ const getDetail = () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -850,38 +852,43 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
   currentYear.value = tahun.id
   currentMonth.value = bulan.id
   lastYear.value = tahun.id - 1
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif,
-    {
-      namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
-      idUlp: ulp ? ulp.id : 0,
-      idUid: uid ? uid.id : 0,
-      idUp3: up3 ? up3.id : 0,
-      bulan: bulan ? bulan.id : currentMonth.value,
-      tahun: bulan ? tahun.id : currentYear.value
-    }
-  )
+  const query = {
+    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.penurunanJumlahKomplainKumulatif
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.penurunanJumlahKomplainKumulatif
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index baf05bb..4801b43 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -49,7 +49,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -253,7 +253,7 @@ import {
 import { Type15 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -303,45 +303,55 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
   const dateValue = params.periode.split(' s/d ')
   const { type, keyword, searchBy } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    noLaporan: searchBy == 'Nomor Laporan' ? keyword : '',
+    namaPelapor: searchBy == 'Nama Pelapor' ? keyword : '',
+    noTelpPelapor: searchBy == 'No Telepon' ? keyword : '',
+    alamatPelapor: searchBy == 'Alamat' ? keyword : '',
+    pembuatLaporan: searchBy == 'Pembuat' ? keyword : ''
+  }
+
+  loadingData.value = true
+  await requestGraphQl(
     filters.value.type == 'Gangguan'
       ? queries.pencarian.pencarianGangguan
       : queries.pencarian.pencarianKeluhan,
-    {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      noLaporan: searchBy == 'Nomor Laporan' ? keyword : '',
-      namaPelapor: searchBy == 'Nama Pelapor' ? keyword : '',
-      noTelpPelapor: searchBy == 'No Telepon' ? keyword : '',
-      alamatPelapor: searchBy == 'Alamat' ? keyword : '',
-      pembuatLaporan: searchBy == 'Pembuat' ? keyword : ''
-    }
+    query
   )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      if (type == 'Gangguan') {
-        data.value = queryResult.data.pencarianDataReportNumberGangguan
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.agingComplaintKumulatif
+        if (type == 'Gangguan') {
+          data.value = result.data.data.pencarianDataReportNumberGangguan
+        } else {
+          data.value = result.data.data.pencarianDataReportNumberKeluhan
+        }
       } else {
-        data.value = queryResult.data.pencarianDataReportNumberKeluhan
+        data.value = []
       }
-    }
-  })
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 onMounted(() => {
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 5092440..7f278ce 100755
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -19,19 +19,25 @@ const props = defineProps({
   selected: {
     type: Object as () => DataItem,
     default: () => ({ id: 0, name: '' })
+  },
+  indexSelected: {
+    type: Number,
+    default: 0
   }
 })
 
 const emit = defineEmits(['update:selected'])
-const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data])
-const selected = ref(data.value[0].id)
-
-watch(
-  () => props.selected,
-  (value: any) => {
-    selected.value = value.id
-  }
+const data = computed(() =>
+  props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
 )
+const selected = ref(data.value[props.indexSelected].id)
+
+// watch(
+//   () => props.selected,
+//   (value: any) => {
+//     selected.value = value.id
+//   }
+// )
 </script>
 
 <template>
diff --git a/src/components/SelectMulti.vue b/src/components/SelectMulti.vue
index 6bed0e4..820382a 100755
--- a/src/components/SelectMulti.vue
+++ b/src/components/SelectMulti.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-
-import { ref } from 'vue';
-import { TagsInput } from '@flavorly/vanilla-components';
+import { ref } from 'vue'
+import { TagsInput } from '@flavorly/vanilla-components'
 // import Multiselect from '@vueform/multiselect';
 interface Tags {
   id: number
-  value: string,
+  value: string
   label: string
 }
 
@@ -28,18 +27,28 @@ const props = defineProps({
   }
 })
 
+const emit = defineEmits(['update:tags'])
+
 const allowed = ref(props.tags.map((tag) => tag.label))
 const tags = ref<string[]>([])
 
 const updateTags = (value: string[]) => {
   tags.value = value
+  emit('update:tags', value)
 }
 </script>
 
 <template>
   <div class="flex flex-col">
-    <TagsInput v-model="tags" :placeholder="tags.length == 0 ? placeholder : props.label" :allowed-options="allowed"
-      valueAttribute="id" textAttribute="label" :enabled="false" @update:modelValue="updateTags" />
+    <TagsInput
+      v-model="tags"
+      :placeholder="tags.length == 0 ? placeholder : props.label"
+      :allowed-options="allowed"
+      valueAttribute="id"
+      textAttribute="label"
+      :enabled="false"
+      @update:modelValue="updateTags"
+    />
 
     <!-- <Multiselect mode="tags" :placeholder="placeholder" :close-on-select="false" :searchable="true"
       :create-option="true" :options="props.tags" :classes="{
@@ -116,4 +125,4 @@ const updateTags = (value: string[]) => {
       spacer: 'box-content'
     }" /> -->
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/report/Gangguan/Daftar/DGangguan_BM.ts b/src/report/Gangguan/Daftar/DGangguan_BM.ts
index 8ed3e69..6870bf1 100644
--- a/src/report/Gangguan/Daftar/DGangguan_BM.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_BM.ts
@@ -319,12 +319,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -347,7 +348,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -360,7 +361,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -373,7 +374,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -386,7 +387,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -399,7 +400,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Media'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -408,7 +409,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -418,7 +419,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -428,7 +429,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -437,7 +438,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -474,7 +475,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -492,7 +493,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -502,7 +503,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -511,7 +512,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -521,7 +522,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts b/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
index 5f47a7c..cb8cf61 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_DKPL.ts
@@ -314,12 +314,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -342,7 +343,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -355,7 +356,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -368,7 +369,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -381,7 +382,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -390,7 +391,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -400,7 +401,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -410,7 +411,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -419,7 +420,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -460,7 +461,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -478,7 +479,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -488,7 +489,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -497,7 +498,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -507,7 +508,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts b/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
index bea5799..459ee0f 100644
--- a/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_DMAPKT.ts
@@ -302,12 +302,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -330,7 +331,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -343,7 +344,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -356,7 +357,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -369,7 +370,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -378,7 +379,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -388,7 +389,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -398,7 +399,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -407,7 +408,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -444,7 +445,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -462,7 +463,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -472,7 +473,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -481,7 +482,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -491,7 +492,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts b/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
index fbfb31a..33dd057 100644
--- a/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_MLD1K.ts
@@ -312,12 +312,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -340,7 +341,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -353,7 +354,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -366,7 +367,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -379,7 +380,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -388,7 +389,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -397,7 +398,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -407,7 +408,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -417,7 +418,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -426,7 +427,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -464,7 +465,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -482,7 +483,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -492,7 +493,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -501,7 +502,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -511,7 +512,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts b/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
index e312f75..886eb86 100644
--- a/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_RecoveryTime.ts
@@ -332,12 +332,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -360,7 +361,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -373,7 +374,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -386,7 +387,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -399,7 +400,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -410,7 +411,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -419,7 +420,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -429,7 +430,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -439,7 +440,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -448,7 +449,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -485,7 +486,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -503,7 +504,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -513,7 +514,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -522,7 +523,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -532,7 +533,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts b/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
index 8315e7d..889dbf2 100644
--- a/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_ResponseTime.ts
@@ -332,12 +332,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -360,7 +361,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -373,7 +374,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -386,7 +387,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -399,7 +400,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -410,7 +411,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -419,7 +420,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -429,7 +430,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -439,7 +440,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -448,7 +449,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -485,7 +486,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -503,7 +504,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -513,7 +514,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -522,7 +523,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -532,7 +533,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Daftar/DGangguan_STIDP.ts b/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
index 32caaf2..0c86e64 100644
--- a/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
+++ b/src/report/Gangguan/Daftar/DGangguan_STIDP.ts
@@ -302,12 +302,13 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                   children: [
                     new TextRun({
                       text: cell.text,
-                      size: 4
+                      size: 5
                     })
                   ]
                 })
               ],
-              verticalAlign: VerticalAlign.CENTER
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
             })
         )
       })
@@ -330,7 +331,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: 'PT. PLN(Persero)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -343,7 +344,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -356,7 +357,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -369,7 +370,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                     : 'Semua Posko'.toUpperCase()
                 }`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -378,7 +379,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -388,7 +389,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${reportName}`.toUpperCase(),
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -398,7 +399,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -407,7 +408,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -444,7 +445,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
                             new TextRun({
                               text: header.text,
                               bold: true,
-                              size: 4,
+                              size: 5,
                               allCaps: true
                             })
                           ]
@@ -462,7 +463,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -472,7 +473,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: `${meta.dayTo}, ${meta.dateToFormat}`,
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -481,7 +482,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           }),
@@ -491,7 +492,7 @@ const exportToDOCX = (reportMeta: any, data: any) => {
               new TextRun({
                 text: '(.........................................)',
                 bold: true,
-                size: 4
+                size: 5
               })
             ]
           })
diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index 82a1bfb..dfdadda 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan All'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -171,7 +173,11 @@ const formatData = (rawData: any) => {
           ? formatPercentage((summary.total_selesai / summary.total) * 100)
           : '100%',
         formatNumber(summary.total_inproses),
-        formatPercentage((summary.total_inproses / summary.total) * 100),
+        formatPercentage(
+          !summary.total_inproses || !summary.total
+            ? '0%'
+            : (summary.total_inproses / summary.total) * 100
+        ),
         formatNumber(avgDurasiDispatch),
         formatWaktu(summary.max_durasi_dispatch),
         formatWaktu(summary.min_durasi_dispatch),
@@ -219,9 +225,13 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
       formatNumber(total.total),
       formatNumber(total.total_selesai),
-      formatPercentage((total.total_selesai / total.total) * 100),
+      formatPercentage(
+        !total.total_selesai || !total.total ? '0%' : (total.total_selesai / total.total) * 100
+      ),
       formatNumber(total.total_inproses),
-      formatPercentage((total.total_inproses / total.total) * 100),
+      formatPercentage(
+        !total.total_inproses || !total.total ? '0%' : (total.total_inproses / total.total) * 100
+      ),
       formatNumber(
         total.avg_durasi_dispatch.length
           ? total.avg_durasi_dispatch.reduce((a: any, b: any) => a + b) /
@@ -289,7 +299,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -462,6 +471,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -470,4 +482,254 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'Posko',
+        'No Lapor',
+        'Tgl/Jam Lapor',
+        'Tgl/Jam Datang',
+        'Tgl/Jam Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Durasi Penugasan Regu',
+        'Durasi Perjalanan Regu',
+        'Jarak Closing (m)',
+        'Dispatch Oleh',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Sumber Lapor',
+        'Diselesaikan Oleh',
+        'Status',
+        'Referensi Marking',
+        'Kode Gangguan',
+        'Jenis Gangguan',
+        'Penyebab',
+        'Tindakan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.nama_posko,
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      '',
+      '',
+      item.jarak_closing,
+      item.dispatch_oleh,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.pembuat_laporan,
+      item.diselesaikan_oleh,
+      item.status_akhir,
+      item.referensi_marking,
+      item.kode_gangguan,
+      item.jenis_gangguan,
+      item.penyebab,
+      item.tindakan
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index 199d904..925c71e 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Alih Posko'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -119,7 +121,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -239,6 +240,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -247,4 +251,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Sumber Lapor',
+        'Nama Petugas',
+        'Posko Awal',
+        'Posko Tujuan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.media,
+      '',
+      '',
+      ''
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 3, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    3,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index 82110fd..c54fec1 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -16,11 +16,12 @@ import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
-import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { formatNumber } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Berdasarkan Media'
+const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
@@ -102,7 +103,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
     head: [
       ['PT. PLN(Persero)', '', ''],
       [
-        { content: 'UNIT INDUK', styles: { cellWidth: 25 } },
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
         { content: ':', styles: { cellWidth: 1 } },
         reportMeta.uid
           ? reportMeta.uid.name.toUpperCase()
@@ -122,7 +123,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
       ]
     ],
     styles: {
-      fontSize: 3,
+      fontSize,
       cellPadding: 0.1,
       textColor: [0, 0, 0],
       fontStyle: 'bold'
@@ -137,14 +138,14 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
       [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
     ],
     styles: {
-      fontSize: 3,
+      fontSize,
       cellPadding: 0.1,
       textColor: [0, 0, 0],
       fontStyle: 'bold',
       halign: 'center'
     },
     theme: 'plain',
-    startY: 18
+    startY: 25
   })
 
   autoTable(doc, {
@@ -178,7 +179,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
     ],
     body: data,
     styles: {
-      fontSize: 3,
+      fontSize,
       cellPadding: 1,
       lineColor: [0, 0, 0],
       lineWidth: 0.1,
@@ -217,7 +218,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
         }
       }
     },
-    startY: 23
+    startY: 33
   })
 
   autoTable(doc, {
@@ -231,7 +232,7 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
       ]
     ],
     styles: {
-      fontSize: 3,
+      fontSize,
       cellPadding: 0.1,
       textColor: [0, 0, 0],
       fontStyle: 'bold',
@@ -243,6 +244,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -251,4 +255,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
new file mode 100644
index 0000000..d41e232
--- /dev/null
+++ b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
@@ -0,0 +1,503 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber } from '@/utils/numbers'
+
+const reportName = 'Rekapitulasi Cleansing Transaksi TM'
+const fontSize = 5
+const detailFontSize = 5
+
+const formatData = (rawData: any) => {
+  const formattedData: any = []
+  const total: any = {
+    month1: 0,
+    month2: 1,
+    month3: 0,
+    month4: 0,
+    month5: 0,
+    month6: 0,
+    month7: 0,
+    month8: 0,
+    month9: 0,
+    month10: 0,
+    month11: 0,
+    month12: 0
+  }
+
+  formattedData.push([{ content: 'SELURUH UNIT', colSpan: 14, styles: { fontStyle: 'bold' } }])
+
+  formattedData.push(
+    ...rawData.map((item: any, i: any) => {
+      total.month1 += item.month1
+      total.month2 += item.month2
+      total.month3 += item.month3
+      total.month4 += item.month4
+      total.month5 += item.month5
+      total.month6 += item.month6
+      total.month7 += item.month7
+      total.month8 += item.month8
+      total.month9 += item.month9
+      total.month10 += item.month10
+      total.month11 += item.month11
+      total.month12 += item.month12
+
+      return [
+        { content: ++i, styles: { halign: 'right' } },
+        item.nama_ulp,
+        formatNumber(item.month1),
+        formatNumber(item.month2),
+        formatNumber(item.month3),
+        formatNumber(item.month4),
+        formatNumber(item.month5),
+        formatNumber(item.month6),
+        formatNumber(item.month7),
+        formatNumber(item.month8),
+        formatNumber(item.month9),
+        formatNumber(item.month10),
+        formatNumber(item.month11),
+        formatNumber(item.month12)
+      ]
+    })
+  )
+
+  formattedData.push([
+    { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+    total.month1,
+    total.month2,
+    total.month3,
+    total.month4,
+    total.month5,
+    total.month6,
+    total.month7,
+    total.month8,
+    total.month9,
+    total.month10,
+    total.month11,
+    total.month12
+  ])
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'POSKO',
+        ':',
+        reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'Bulan',
+          colSpan: 12
+        }
+      ],
+      [
+        'Januari',
+        'Februari',
+        'Maret',
+        'April',
+        'Mei',
+        'Juni',
+        'Juli',
+        'Agustus',
+        'September',
+        'Oktober',
+        'November',
+        'Desember'
+      ]
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Catat',
+        'Tgl Pekerjaan',
+        'Tgl Nyala',
+        'Durasi Pencatatan',
+        'Durasi Recovery Time',
+        'Keterangan Cleansing',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.tgl_catat,
+      item.tgl_pekerjaan,
+      item.tgl_nyala,
+      item.durasi_pencatatan,
+      item.durasi_recovery_time,
+      item.keterangan_cleansing,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:M1')
+  worksheet.mergeCells('A2:M2')
+  worksheet.mergeCells('A3:M3')
+  worksheet.mergeCells('A4:M4')
+  worksheet.mergeCells('A7:M7')
+  worksheet.mergeCells('A8:M8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A3:K3')
+  worksheet.mergeCells('A4:K4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index f1169cf..b8fa217 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -16,11 +16,12 @@ import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Diselesaikan Mobile APKT'
+const fontSize = 4
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
@@ -128,7 +129,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 4
 
   autoTable(doc, {
     head: [
@@ -402,6 +402,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -410,4 +413,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:X1')
+  worksheet.mergeCells('A2:X2')
+  worksheet.mergeCells('A3:X3')
+  worksheet.mergeCells('A4:X4')
+  worksheet.mergeCells('A7:X7')
+  worksheet.mergeCells('A8:X8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index 368708e..90073a2 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
@@ -20,7 +20,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
-const reportName = 'Rekapitulasi Gangguan/Jenis Gangguan'
+const reportName = 'Rekapitulasi Gangguan Jenis Gangguan'
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -59,7 +59,7 @@ const formatData = (rawData: any) => {
     total_recovery_time_kurang_sla: 0
   }
 
-  for (const sub_kelompok in data) {
+  for (const sub_kelompok of data) {
     const total: any = {
       total_laporan: 0,
       total_laporan_sudah_selesai: 0,
@@ -78,7 +78,13 @@ const formatData = (rawData: any) => {
       total_recovery_time_kurang_sla: 0
     }
 
-    formattedData.push([{ content: sub_kelompok, colSpan: 20, styles: { fontStyle: 'bold' } }])
+    formattedData.push([
+      {
+        content: `${sub_kelompok} (${data[sub_kelompok][0].nama_sub_kelompok})`,
+        colSpan: 20,
+        styles: { fontStyle: 'bold' }
+      }
+    ])
 
     for (let i = 0; i < data[sub_kelompok].length; i++) {
       formattedData.push([
@@ -88,13 +94,19 @@ const formatData = (rawData: any) => {
         formatNumber(data[sub_kelompok][i].laporan.total),
         formatNumber(data[sub_kelompok][i].laporan.sudahSelesai.jml),
         formatPercentage(
-          (data[sub_kelompok][i].laporan.sudahSelesai.jml / data[sub_kelompok][i].laporan.total) *
-            100
+          !data[sub_kelompok][i].laporan.sudahSelesai.jml || !data[sub_kelompok][i].laporan.total
+            ? '0%'
+            : (data[sub_kelompok][i].laporan.sudahSelesai.jml /
+                data[sub_kelompok][i].laporan.total) *
+                100
         ),
         formatNumber(data[sub_kelompok][i].laporan.belumSelesai.jml),
         formatPercentage(
-          (data[sub_kelompok][i].laporan.belumSelesai.jml / data[sub_kelompok][i].laporan.total) *
-            100
+          !data[sub_kelompok][i].laporan.belumSelesai.jml || !data[sub_kelompok][i].laporan.total
+            ? '0%'
+            : (data[sub_kelompok][i].laporan.belumSelesai.jml /
+                data[sub_kelompok][i].laporan.total) *
+                100
         ),
         formatNumber(data[sub_kelompok][i].responseTime.menit.total),
         formatNumber(data[sub_kelompok][i].responseTime.menit.rataRata),
@@ -155,9 +167,17 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
       formatNumber(total.total_laporan),
       formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_response_time_total),
       formatNumber(
         total.total_response_time_rata_rata.length
@@ -187,9 +207,17 @@ const formatData = (rawData: any) => {
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_sudah_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -244,6 +272,7 @@ const formatMetaData = (reportMeta: any) => {
 
 const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
   const data = formatData(rawData)
+  console.log(data)
   const meta = formatMetaData(reportMeta)
   const doc = new jsPDF({
     orientation: 'landscape'
@@ -443,6 +472,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -451,4 +483,69 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
index 3fc8529..3313ebb 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
@@ -20,7 +20,9 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
-const reportName = 'Rekapitulasi Gangguan/Jenis Gangguan SE 004'
+const reportName = 'Rekapitulasi Gangguan Jenis Gangguan SE 004'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -87,10 +89,14 @@ const formatData = (rawData: any) => {
         data[id_fasilitas][i].sub_kelompok,
         formatNumber(data[id_fasilitas][i].total),
         formatNumber(data[id_fasilitas][i].total_selesai),
-        formatPercentage((data[id_fasilitas][i].total_selesai / data[id_fasilitas][i].total) * 100),
+        formatPercentage(
+          !data[id_fasilitas][i].total_selesai || !data[id_fasilitas][i].total
+            ? '0%'
+            : (data[id_fasilitas][i].total_selesai / data[id_fasilitas][i].total) * 100
+        ),
         formatNumber(data[id_fasilitas][i].total_inproses),
         formatPercentage(
-          data[id_fasilitas][i].total_inproses == null || data[id_fasilitas][i].total == null
+          !data[id_fasilitas][i].total_inproses || !data[id_fasilitas][i].total
             ? '0%'
             : (data[id_fasilitas][i].total_inproses / data[id_fasilitas][i].total) * 100
         ),
@@ -145,9 +151,17 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
       formatNumber(total.total_laporan),
       formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_response_time_total),
       formatNumber(
         total.total_response_time_rata_rata.length
@@ -177,9 +191,17 @@ const formatData = (rawData: any) => {
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_sudah_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -238,7 +260,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -434,6 +455,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -442,4 +466,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.id_pelnomormeter,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
index 3a8b10d..9755f51 100644
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Koreksi Transaksi Individual'
+const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   const formattedData: any = []
@@ -125,7 +127,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -267,6 +268,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -275,4 +279,291 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Lapor Sebelum',
+        'Tgl Lapor Koreksi',
+        'Tgl Penugasan Sebelum',
+        'Tgl Penugasan Koreksi',
+        'Tgl Perjalanan Sebelum',
+        'Tgl Perjalanan Koreksi',
+        'Tgl Pengerjaan Sebelum',
+        'Tgl Pengerjaan Koreksi',
+        'Tgl Nyala Sebelum',
+        'Tgl Nyala Koreksi',
+        'Tgl Selesai Sebelum',
+        'Tgl Selesai Koreksi',
+        'Durasi Response Time Sebelum',
+        'Durasi Response Time Koreksi',
+        'Durasi Recovery Time Koreksi',
+        'Kelompok ID Sebelum',
+        'Kelompok ID Koreksi',
+        'Sub Kelompok ID Sebelum',
+        'Sub Kelompok ID Koreksi',
+        'Fasilitas ID Sebelum',
+        'Fasilitas ID Koreksi',
+        'Sub Fasilitas ID Sebelum',
+        'Sub Fasilitas ID Koreksi',
+        'Equipment ID Sebelum',
+        'Equipment ID Koreksi',
+        'Event Damage ID Sebelum',
+        'Event Damage ID Koreksi',
+        'Cause ID Sebelum',
+        'Cause ID Koreksi',
+        'Cause Group ID Sebelum',
+        'Cause Group ID Koreksi',
+        'Weather ID Sebelum',
+        'Weather ID Koreksi',
+        'Group Koreksi',
+        'ALASAN',
+        'IDPEL/NO METER',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.tgl_lapor,
+      item.tgl_lapor_sblm,
+      item.tgl_lapor_sdh,
+      item.tgl_penugasan_sblm,
+      item.tgl_penugasan_sdh,
+      item.tgl_perjalanan_sblm,
+      item.tgl_perjalanan_sdh,
+      item.tgl_pengerjaan_sblm,
+      item.tgl_pengerjaan_sdh,
+      item.tgl_nyala_sementara_sblm,
+      item.tgl_nyala_sementara_sdh,
+      item.tgl_nyala_sblm,
+      item.tgl_nyala_sdh,
+      item.tgl_selesai_sblm,
+      item.tgl_selesai_sdh,
+      item.durasi_response_time_sblm,
+      item.durasi_response_time_sdh,
+      item.durasi_recovery_time_sdh,
+      item.kelompok_sblm,
+      item.kelompok_sdh,
+      item.sub_kelompok_sblm,
+      item.sub_kelompok_sdh,
+      item.fasilitas_id_sblm,
+      item.fasilitas_id_sdh,
+      item.sub_fasilitas_id_sblm,
+      item.sub_fasilitas_id_sdh,
+      item.equipment_id_sblm,
+      item.equipment_id_sdh,
+      item.event_damage_sblm,
+      item.event_damage_sdh,
+      item.cause_id_sblm,
+      item.cause_id_sdh,
+      item.cause_group_id_sblm,
+      item.cause_group_id_sdh,
+      item.weather_id_sblm,
+      item.weather_id_sdh,
+      item.group_koreksi,
+      item.alasan,
+      item.idpel_no_meter,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:M1')
+  worksheet.mergeCells('A2:M2')
+  worksheet.mergeCells('A3:M3')
+  worksheet.mergeCells('A4:M4')
+  worksheet.mergeCells('A7:M7')
+  worksheet.mergeCells('A8:M8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index f711bd5..54f98d0 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Per Posko'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -86,10 +88,14 @@ const formatData = (rawData: any) => {
         data[nama_up3][i].nama_posko,
         formatNumber(data[nama_up3][i].total),
         formatNumber(data[nama_up3][i].total_selesai),
-        formatPercentage((data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100),
+        formatPercentage(
+          !data[nama_up3][i].total_selesai || !data[nama_up3][i].total
+            ? '0%'
+            : (data[nama_up3][i].total_selesai / data[nama_up3][i].total) * 100
+        ),
         formatNumber(data[nama_up3][i].total_inproses),
         formatPercentage(
-          data[nama_up3][i].total_inproses == null || data[nama_up3][i].total == null
+          !data[nama_up3][i].total_inproses || !data[nama_up3][i].total
             ? '0%'
             : (data[nama_up3][i].total_inproses / data[nama_up3][i].total) * 100
         ),
@@ -144,9 +150,17 @@ const formatData = (rawData: any) => {
       { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
       formatNumber(total.total_laporan),
       formatNumber(total.total_laporan_sudah_selesai),
-      formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_sudah_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_laporan_belum_selesai),
-      formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+      formatPercentage(
+        !total.total_laporan_belum_selesai || !total.total_laporan
+          ? '0%'
+          : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+      ),
       formatNumber(total.total_response_time_total),
       formatNumber(
         total.total_response_time_rata_rata.length
@@ -176,9 +190,17 @@ const formatData = (rawData: any) => {
     { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_sudah_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -237,7 +259,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -423,6 +444,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -431,4 +455,229 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index 0a67550..96ff2ae 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Per Regu'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -89,10 +91,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
           data[nama_uid][i].nama_regu,
           formatNumber(data[nama_uid][i].total),
           formatNumber(data[nama_uid][i].total_selesai),
-          formatPercentage((data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
           formatNumber(data[nama_uid][i].total_inproses),
           formatPercentage(
-            data[nama_uid][i].total_inproses == null || data[nama_uid][i].total == null
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
               ? '0%'
               : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
           ),
@@ -147,9 +153,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
         { content: 'TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
         formatNumber(total.total_laporan),
         formatNumber(total.total_laporan_sudah_selesai),
-        formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_laporan_belum_selesai),
-        formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_belum_selesai
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_response_time_total),
         formatNumber(
           total.total_response_time_rata_rata.length
@@ -182,10 +196,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
         rawData[i].nama_regu,
         formatNumber(rawData[i].total),
         formatNumber(rawData[i].total_selesai),
-        formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
         formatNumber(rawData[i].total_inproses),
         formatPercentage(
-          rawData[i].total_inproses == null || rawData[i].total == null
+          !rawData[i].total_inproses || !rawData[i].total
             ? '0%'
             : (rawData[i].total_inproses / rawData[i].total) * 100
         ),
@@ -225,9 +243,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
     { content: 'GRAND TOTAL', colSpan: 3, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_belum_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -286,7 +312,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -481,6 +506,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -489,4 +517,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index 82c23c8..8a0dbd2 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -21,6 +21,8 @@ import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
 
 const reportName = 'Rekapitulasi Gangguan Per Tanggal'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -88,10 +90,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
           data[nama_uid][i].tanggal,
           formatNumber(data[nama_uid][i].total),
           formatNumber(data[nama_uid][i].total_selesai),
-          formatPercentage((data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100),
+          formatPercentage(
+            !data[nama_uid][i].total || !data[nama_uid][i].total_selesai
+              ? '0%'
+              : (data[nama_uid][i].total_selesai / data[nama_uid][i].total) * 100
+          ),
           formatNumber(data[nama_uid][i].total_inproses),
           formatPercentage(
-            data[nama_uid][i].total_inproses == null || data[nama_uid][i].total == null
+            !data[nama_uid][i].total_inproses || !data[nama_uid][i].total
               ? '0%'
               : (data[nama_uid][i].total_inproses / data[nama_uid][i].total) * 100
           ),
@@ -146,9 +152,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
         { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
         formatNumber(total.total_laporan),
         formatNumber(total.total_laporan_sudah_selesai),
-        formatPercentage((total.total_laporan_sudah_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan || !total.total_laporan_sudah_selesai
+            ? '0%'
+            : (total.total_laporan_sudah_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_laporan_belum_selesai),
-        formatPercentage((total.total_laporan_belum_selesai / total.total_laporan) * 100),
+        formatPercentage(
+          !total.total_laporan_belum_selesai || !total.total_laporan
+            ? '0%'
+            : (total.total_laporan_belum_selesai / total.total_laporan) * 100
+        ),
         formatNumber(total.total_response_time_total),
         formatNumber(
           total.total_response_time_rata_rata.length
@@ -180,10 +194,14 @@ const formatData = (rawData: any, groupBy: boolean) => {
         rawData[i].tanggal,
         formatNumber(rawData[i].total),
         formatNumber(rawData[i].total_selesai),
-        formatPercentage((rawData[i].total_selesai / rawData[i].total) * 100),
+        formatPercentage(
+          !rawData[i].total || !rawData[i].total_selesai
+            ? '0%'
+            : (rawData[i].total_selesai / rawData[i].total) * 100
+        ),
         formatNumber(rawData[i].total_inproses),
         formatPercentage(
-          rawData[i].total_inproses == null || rawData[i].total == null
+          !rawData[i].total_inproses || !rawData[i].total
             ? '0%'
             : (rawData[i].total_inproses / rawData[i].total) * 100
         ),
@@ -223,9 +241,17 @@ const formatData = (rawData: any, groupBy: boolean) => {
     { content: 'GRAND TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
     formatNumber(grandTotal.total_laporan),
     formatNumber(grandTotal.total_laporan_sudah_selesai),
-    formatPercentage((grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan || !grandTotal.total_laporan_sudah_selesai
+        ? '0%'
+        : (grandTotal.total_laporan_sudah_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_laporan_belum_selesai),
-    formatPercentage((grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100),
+    formatPercentage(
+      !grandTotal.total_laporan_belum_selesai || !grandTotal.total_laporan
+        ? '0%'
+        : (grandTotal.total_laporan_belum_selesai / grandTotal.total_laporan) * 100
+    ),
     formatNumber(grandTotal.total_response_time_total),
     formatNumber(
       grandTotal.total_response_time_rata_rata.length
@@ -284,7 +310,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -475,6 +500,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -483,4 +511,238 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.id_pelnomormeter,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportDetailToPDF, exportToXLSX, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index 3fa2dc9..de5118a 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -16,11 +16,13 @@ import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { numberToStars } from '@/report/utils/rating'
 
 const reportName = 'Rekapitulasi Rating Per Posko'
+const fontSize = 5
+const detailFontSize = 3
 
 const groupingData = (data: any) => {
   const groupedData: any = {}
@@ -102,7 +104,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -257,6 +258,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -265,4 +269,231 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Rating',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      numberToStars(item.nilai_rating),
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 5, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    6,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A2:Q2')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A5:Q5')
+  worksheet.mergeCells('A6:Q6')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 8, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A3:R3')
+  worksheet.mergeCells('A4:R4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
index a7645a1..065f6d6 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
@@ -16,11 +16,13 @@ import { saveAs } from 'file-saver'
 import { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
 import { Workbook } from 'exceljs'
-import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { setHeaderStyle } from '@/report/utils/xlsx'
 import { formatNumber, formatPercentage } from '@/utils/numbers'
+import { numberToStars } from '@/report/utils/rating'
 
 const reportName = 'Rekapitulasi Rating Per Regu'
+const fontSize = 5
+const detailFontSize = 3
 
 const formatData = (rawData: any) => {
   return rawData.map((item: any, i: any) => {
@@ -77,7 +79,6 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   const doc = new jsPDF({
     orientation: 'landscape'
   })
-  const fontSize = 5
 
   autoTable(doc, {
     head: [
@@ -237,6 +238,9 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   })
 
   if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
     window.open(doc.output('bloburl'))
   } else {
     doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
@@ -245,4 +249,240 @@ const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) =>
   }
 }
 
-export { exportToPDF }
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Rating',
+        'Tgl Lapor',
+        'Tgl Datang',
+        'Tgl Nyala',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'Referensi Marking',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Posko',
+        'Tindakan',
+        'Penyebab'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      numberToStars(item.nilai_rating),
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time,
+      item.durasi_recovery_time,
+      item.status_akhir,
+      item.referensi_marking,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_posko,
+      item.tindakan,
+      item.penyebab
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A2:Q2')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+  worksheet.mergeCells('A7:Q7')
+  worksheet.mergeCells('A8:Q8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 1, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A3:R3')
+  worksheet.mergeCells('A4:R4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
new file mode 100644
index 0000000..c7756f4
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_BerdasarMedia.ts
@@ -0,0 +1,512 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Berdasarkan Media'
+const fontSize = 4
+const docxFontSize = 6
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Status',
+        'Tgl Lapor',
+        'Tgl Response',
+        'Tgl Recovery',
+        'Response Time',
+        'Recovery Time',
+        'Sumber Lapor',
+        'Tgl Media',
+        'Keterangan Media'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.status_akhir,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
+      parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.media,
+      item.waktu_media,
+      item.keterangan_media
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:O1')
+  worksheet.mergeCells('A2:O2')
+  worksheet.mergeCells('A3:O3')
+  worksheet.mergeCells('A4:O4')
+  worksheet.mergeCells('A6:O6')
+  worksheet.mergeCells('A7:O7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.waktu_lapor, field: 'waktu_lapor' },
+          { text: item.waktu_response, field: 'waktu_response' },
+          { text: item.waktu_recovery, field: 'waktu_recovery' },
+          {
+            text: parseInt(item.durasi_response_time)
+              ? formatWaktu(item.durasi_response_time)
+              : '-',
+            field: 'durasi_response_time'
+          },
+          {
+            text: parseInt(item.durasi_recovery_time)
+              ? formatWaktu(item.durasi_recovery_time)
+              : '-',
+            field: 'durasi_recovery_time'
+          },
+          { text: item.media, field: 'media' },
+          { text: item.waktu_media, field: 'waktu_media' },
+          { text: item.keterangan_media, field: 'keterangan_media' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'Status', field: 'status_akhir' },
+                  { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                  { text: 'Tgl Response', field: 'waktu_response' },
+                  { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                  { text: 'Response Time', field: 'durasi_response_time' },
+                  { text: 'Recovery Time', field: 'durasi_recovery_time' },
+                  { text: 'Sumber Lapor', field: 'media' },
+                  { text: 'Tgl Media', field: 'waktu_media' },
+                  { text: 'Keterangan Media', field: 'keterangan_media' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
new file mode 100644
index 0000000..57591b5
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_DKUL.ts
@@ -0,0 +1,528 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Dialihkan Ke Unit Lain'
+const fontSize = 4
+const docxFontSize = 8
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      ['Daftar Keluhan Dialihkan Ke Unit Lain'.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Pembuat Laporan',
+        'Tgl Lapor',
+        'Tgl Dialihkan',
+        'Tgl Response',
+        'Tgl Recovery',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Unit Asal',
+        'Unit Tujuan',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Sumber Lapor',
+        'Nama ULP'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.pembuat_laporan,
+      item.waktu_lapor,
+      item.waktu_dialihkan,
+      item.waktu_response,
+      item.waktu_recovery,
+      parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
+      parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.nama_unit_lama,
+      item.nama_unit_baru,
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.media,
+      item.nama_ulp
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:S1')
+  worksheet.mergeCells('A2:S2')
+  worksheet.mergeCells('A3:S3')
+  worksheet.mergeCells('A4:S4')
+  worksheet.mergeCells('A6:S6')
+  worksheet.mergeCells('A7:S7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.pembuat_laporan, field: 'pembuat_laporan' },
+          { text: item.waktu_lapor, field: 'waktu_lapor' },
+          { text: item.waktu_dialihkan, field: 'waktu_dialihkan' },
+          { text: item.waktu_response, field: 'waktu_response' },
+          { text: item.waktu_recovery, field: 'waktu_recovery' },
+          {
+            text: parseInt(item.durasi_response_time)
+              ? formatWaktu(item.durasi_response_time)
+              : '-',
+            field: 'durasi_response_time'
+          },
+          {
+            text: parseInt(item.durasi_recovery_time)
+              ? formatWaktu(item.durasi_recovery_time)
+              : '-',
+            field: 'durasi_recovery_time'
+          },
+          { text: item.nama_unit_lama, field: 'nama_unit_lama' },
+          { text: item.nama_unit_baru, field: 'nama_unit_baru' },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.idpel_nometer, field: 'idpel_nometer' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.media, field: 'media' },
+          { text: item.nama_ulp, field: 'nama_ulp' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Pembuat Laporan', field: 'pembuat_laporan' },
+                  { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                  { text: 'Tgl Dialihkan', field: 'waktu_dialihkan' },
+                  { text: 'Tgl Response', field: 'waktu_response' },
+                  { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                  { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                  { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                  { text: 'Unit Asal', field: 'nama_unit_lama' },
+                  { text: 'Unit Tujuan', field: 'nama_unit_baru' },
+                  { text: 'Status', field: 'status_akhir' },
+                  { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'Sumber Lapor', field: 'media' },
+                  { text: 'Nama ULP', field: 'nama_ulp' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
new file mode 100644
index 0000000..4b135c1
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_PLD1K.ts
@@ -0,0 +1,533 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Pelanggan Lebih Dari 1 Kali'
+const fontSize = 4
+const docxFontSize = 8
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      ['LAPOR ULANG', ':', `${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Response',
+        'Tgl Recovery',
+        'Jml Lapor',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Sumber Lapor',
+        'Nama ULP'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_selesai,
+      item.jumlah_lapor,
+      parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
+      parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.media,
+      item.nama_ulp
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    5,
+    1,
+    `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:P1')
+  worksheet.mergeCells('A2:P2')
+  worksheet.mergeCells('A3:P3')
+  worksheet.mergeCells('A4:P4')
+  worksheet.mergeCells('A5:P5')
+  worksheet.mergeCells('A7:P7')
+  worksheet.mergeCells('A8:P8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.waktu_lapor, field: 'waktu_lapor' },
+          { text: item.waktu_response, field: 'waktu_response' },
+          { text: item.waktu_selesai, field: 'waktu_selesai' },
+          { text: item.jumlah_lapor, field: 'jumlah_lapor' },
+          {
+            text: parseInt(item.durasi_response_time)
+              ? formatWaktu(item.durasi_response_time)
+              : '-',
+            field: 'durasi_response_time'
+          },
+          {
+            text: parseInt(item.durasi_recovery_time)
+              ? formatWaktu(item.durasi_recovery_time)
+              : '-',
+            field: 'durasi_recovery_time'
+          },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.idpel_nometer, field: 'idpel_nometer' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.media, field: 'media' },
+          { text: item.nama_ulp, field: 'nama_ulp' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `LAPOR ULANG : ${reportMeta.value.minJmlLapor} s/d ${reportMeta.value.maxJmlLapor}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                  { text: 'Tgl Response', field: 'waktu_response' },
+                  { text: 'Tgl Recovery', field: 'waktu_selesai' },
+                  { text: 'Jml Lapor', field: 'jumlah_lapor' },
+                  { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                  { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                  { text: 'Status', field: 'status_akhir' },
+                  { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'Sumber Lapor', field: 'media' },
+                  { text: 'Nama ULP', field: 'nama_ulp' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
new file mode 100644
index 0000000..dc20fe4
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_RecoveryTime.ts
@@ -0,0 +1,540 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Recovery Time'
+const fontSize = 4
+const docxFontSize = 8
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
+  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+  let durasi = ''
+
+  if (minTime == '1502' && maxTime != '143998560') {
+    durasi = 'Melebihi SLA (>1 hari)'
+  } else if (minTime == '1' && maxTime == '1501') {
+    durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
+  } else {
+    durasi = 'Durasi Menit'
+  }
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'Durasi',
+        ':',
+        `${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Response',
+        'Tgl Recovery',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Nama ULP'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
+      parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_ulp
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    5,
+    1,
+    `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:N1')
+  worksheet.mergeCells('A2:N2')
+  worksheet.mergeCells('A3:N3')
+  worksheet.mergeCells('A4:N4')
+  worksheet.mergeCells('A5:N5')
+  worksheet.mergeCells('A7:N7')
+  worksheet.mergeCells('A8:N8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.waktu_lapor, field: 'waktu_lapor' },
+          { text: item.waktu_response, field: 'waktu_response' },
+          { text: item.waktu_recovery, field: 'waktu_recovery' },
+          {
+            text: parseInt(item.durasi_response_time)
+              ? formatWaktu(item.durasi_response_time)
+              : '-',
+            field: 'durasi_response_time'
+          },
+          {
+            text: parseInt(item.durasi_recovery_time)
+              ? formatWaktu(item.durasi_recovery_time)
+              : '-',
+            field: 'durasi_recovery_time'
+          },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.idpel_nometer, field: 'idpel_nometer' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.nama_ulp, field: 'nama_ulp' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                  { text: 'Tgl Response', field: 'waktu_response' },
+                  { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                  { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                  { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                  { text: 'Status', field: 'status_akhir' },
+                  { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'Nama ULP', field: 'nama_ulp' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
new file mode 100644
index 0000000..5fecc58
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_ResponseTime.ts
@@ -0,0 +1,540 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Response Time'
+const fontSize = 4
+const docxFontSize = 8
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+  const minTime = reportMeta.value.minTime ? reportMeta.value.minTime : ''
+  const maxTime = reportMeta.value.maxTime ? reportMeta.value.maxTime : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+  let durasi = ''
+
+  if (minTime == '1502' && maxTime != '143998560') {
+    durasi = 'Melebihi SLA (>1 hari)'
+  } else if (minTime == '1' && maxTime == '1501') {
+    durasi = 'Dibawah / Sesuai SLA (<=1 hari)'
+  } else {
+    durasi = 'Durasi Menit'
+  }
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo, durasi, minTime, maxTime }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'Durasi',
+        ':',
+        `${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Response',
+        'Tgl Recovery',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Nama ULP'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
+      parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_ulp
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    5,
+    1,
+    `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`
+  )
+
+  setHeaderStyle(worksheet, 7, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:N1')
+  worksheet.mergeCells('A2:N2')
+  worksheet.mergeCells('A3:N3')
+  worksheet.mergeCells('A4:N4')
+  worksheet.mergeCells('A5:N5')
+  worksheet.mergeCells('A7:N7')
+  worksheet.mergeCells('A8:N8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.waktu_lapor, field: 'waktu_lapor' },
+          { text: item.waktu_response, field: 'waktu_response' },
+          { text: item.waktu_recovery, field: 'waktu_recovery' },
+          {
+            text: parseInt(item.durasi_response_time)
+              ? formatWaktu(item.durasi_response_time)
+              : '-',
+            field: 'durasi_response_time'
+          },
+          {
+            text: parseInt(item.durasi_recovery_time)
+              ? formatWaktu(item.durasi_recovery_time)
+              : '-',
+            field: 'durasi_recovery_time'
+          },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.idpel_nometer, field: 'idpel_nometer' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.nama_ulp, field: 'nama_ulp' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `DURASI : ${meta.durasi} ${meta.durasi == 'Durasi Menit' ? meta.minTime + ' - ' + meta.maxTime : ''}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                  { text: 'Tgl Response', field: 'waktu_response' },
+                  { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                  { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                  { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                  { text: 'Status', field: 'status_akhir' },
+                  { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'Nama ULP', field: 'nama_ulp' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
new file mode 100644
index 0000000..d0e8777
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_STIDP.ts
@@ -0,0 +1,512 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Selesai Tanpa ID Pelanggan'
+const fontSize = 4
+const docxFontSize = 6
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Tgl Response',
+        'Tgl Recovery',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Sumber Lapor',
+        'Nama ULP'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
+      parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.media,
+      item.nama_ulp
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:O1')
+  worksheet.mergeCells('A2:O2')
+  worksheet.mergeCells('A3:O3')
+  worksheet.mergeCells('A4:O4')
+  worksheet.mergeCells('A6:O6')
+  worksheet.mergeCells('A7:O7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.waktu_lapor, field: 'waktu_lapor' },
+          { text: item.waktu_response, field: 'waktu_response' },
+          { text: item.waktu_recovery, field: 'waktu_recovery' },
+          {
+            text: parseInt(item.durasi_response_time)
+              ? formatWaktu(item.durasi_response_time)
+              : '-',
+            field: 'durasi_response_time'
+          },
+          {
+            text: parseInt(item.durasi_recovery_time)
+              ? formatWaktu(item.durasi_recovery_time)
+              : '-',
+            field: 'durasi_recovery_time'
+          },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.idpel_nometer, field: 'idpel_nometer' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.media, field: 'media' },
+          { text: item.nama_ulp, field: 'nama_ulp' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Tgl Lapor', field: 'waktu_lapor' },
+                  { text: 'Tgl Response', field: 'waktu_response' },
+                  { text: 'Tgl Recovery', field: 'waktu_recovery' },
+                  { text: 'Durasi Response Time', field: 'durasi_response_time' },
+                  { text: 'Durasi Recovery Time', field: 'durasi_recovery_time' },
+                  { text: 'Status', field: 'status_akhir' },
+                  { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Telp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'Sumber Lapor', field: 'media' },
+                  { text: 'Nama ULP', field: 'nama_ulp' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
new file mode 100644
index 0000000..b03bc42
--- /dev/null
+++ b/src/report/Keluhan/Daftar/DKeluhan_SelesaiCC.ts
@@ -0,0 +1,510 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+
+const reportName = 'Daftar Keluhan Selesai di Contact Center'
+const fontSize = 4
+const docxFontSize = 6
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 35 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.value.uid
+          ? reportMeta.value.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.up3
+          ? reportMeta.value.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.value.ulp
+          ? reportMeta.value.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 25
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Contact Center',
+        'UI Dist.',
+        'ULP',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Tlp Pelapor',
+        'Keterangan Pelapor',
+        'APKT Status',
+        'Created By',
+        'Tgl Penyelesaian',
+        'Lapor Ulang',
+        'Sumber Lapor',
+        'Issue Type',
+        'Sub Issue Type'
+      ]
+    ],
+    body: data.value.map((item: any, i: any) => [
+      { content: ++i, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.nama_ulp,
+      item.nama_uid,
+      item.nama_ulp,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.status_akhir,
+      item.nama_pelapor,
+      item.waktu_recovery,
+      item.jumlah_lapor,
+      item.media,
+      item.nama_issuetype,
+      item.nama_subissuetype
+    ]),
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 35
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.value.uid
+        ? reportMeta.value.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.value.up3
+        ? reportMeta.value.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `UNIT LAYANAN PELANGGAN : ${
+      reportMeta.value.posko
+        ? reportMeta.value.posko.name.toUpperCase()
+        : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 6, 1, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    7,
+    1,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:Q1')
+  worksheet.mergeCells('A2:Q2')
+  worksheet.mergeCells('A3:Q3')
+  worksheet.mergeCells('A4:Q4')
+  worksheet.mergeCells('A6:Q6')
+  worksheet.mergeCells('A7:Q7')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 9, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportToDOCX = (reportMeta: any, data: any) => {
+  const meta = formatMetaData(reportMeta)
+
+  const generateRows = () => {
+    return data.value.map((item: any, i: any) => {
+      return new TableRow({
+        children: [
+          { text: `${++i}`, field: 'no' },
+          { text: item.no_laporan, field: 'no_laporan' },
+          { text: item.nama_ulp, field: 'nama_ulp' },
+          { text: item.nama_uid, field: 'nama_uid' },
+          { text: item.nama_ulp, field: 'nama_ulp' },
+          { text: item.idpel_nometer, field: 'idpel_nometer' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: item.alamat_pelapor, field: 'alamat_pelapor' },
+          { text: item.no_telp_pelapor, field: 'no_telp_pelapor' },
+          { text: item.keterangan_pelapor, field: 'keterangan_pelapor' },
+          { text: item.status_akhir, field: 'status_akhir' },
+          { text: item.nama_pelapor, field: 'nama_pelapor' },
+          { text: formatWaktu(item.waktu_recovery), field: 'waktu_recovery' },
+          { text: item.jumlah_lapor, field: 'jumlah_lapor' },
+          { text: item.media, field: 'media' },
+          { text: item.nama_issuetype, field: 'nama_issuetype' },
+          { text: item.nama_subissuetype, field: 'nama_subissuetype' }
+        ].map(
+          (cell) =>
+            new TableCell({
+              children: [
+                new Paragraph({
+                  children: [
+                    new TextRun({
+                      text: cell.text,
+                      size: docxFontSize
+                    })
+                  ]
+                })
+              ],
+              verticalAlign: VerticalAlign.CENTER,
+              margins: { top: 0, bottom: 0, right: 0, left: 30 }
+            })
+        )
+      })
+    })
+  }
+
+  const doc = new Document({
+    sections: [
+      {
+        properties: {
+          page: {
+            size: {
+              orientation: PageOrientation.LANDSCAPE
+            }
+          }
+        },
+        children: [
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: 'PT. PLN(Persero)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT INDUK : ${
+                  reportMeta.value.uid
+                    ? reportMeta.value.uid.name.toUpperCase()
+                    : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+                  reportMeta.value.up3
+                    ? reportMeta.value.up3.name.toUpperCase()
+                    : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: `UNIT LAYANAN PELANGGAN : ${
+                  reportMeta.value.ulp
+                    ? reportMeta.value.ulp.name.toUpperCase()
+                    : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+                }`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `${reportName}`.toUpperCase(),
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.CENTER,
+            children: [
+              new TextRun({
+                text: `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Table({
+            width: {
+              size: 13950,
+              type: WidthType.DXA
+            },
+            rows: [
+              new TableRow({
+                children: [
+                  { text: 'No', field: 'no' },
+                  { text: 'No Laporan', field: 'no_laporan' },
+                  { text: 'Contact Center', field: 'nama_ulp' },
+                  { text: 'UI Dist.', field: 'nama_uid' },
+                  { text: 'ULP', field: 'nama_ulp' },
+                  { text: 'IDPEL/NO METER', field: 'idpel_nometer' },
+                  { text: 'Nama Pelapor', field: 'nama_pelapor' },
+                  { text: 'Alamat Pelapor', field: 'alamat_pelapor' },
+                  { text: 'No Tlp Pelapor', field: 'no_telp_pelapor' },
+                  { text: 'Keterangan Pelapor', field: 'keterangan_pelapor' },
+                  { text: 'APKT Status', field: 'status_akhir' },
+                  { text: 'Created By', field: 'nama_pelapor' },
+                  { text: 'Tgl Penyelesaian', field: 'waktu_recovery' },
+                  { text: 'Lapor Ulang', field: 'jumlah_lapor' },
+                  { text: 'Sumber Lapor', field: 'media' },
+                  { text: 'Issue Type', field: 'nama_issuetype' },
+                  { text: 'Sub Issue Type', field: 'nama_subissuetype' }
+                ].map(
+                  (header) =>
+                    new TableCell({
+                      children: [
+                        new Paragraph({
+                          alignment: AlignmentType.CENTER,
+                          children: [
+                            new TextRun({
+                              text: header.text,
+                              bold: true,
+                              size: docxFontSize,
+                              allCaps: true
+                            })
+                          ]
+                        })
+                      ],
+                      verticalAlign: VerticalAlign.CENTER
+                    })
+                )
+              }),
+              ...generateRows()
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: `${meta.dayTo}, ${meta.dateToFormat}`,
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            children: [
+              new TextRun({
+                text: '',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          }),
+          new Paragraph({
+            alignment: AlignmentType.RIGHT,
+            children: [
+              new TextRun({
+                text: '(.........................................)',
+                bold: true,
+                size: docxFontSize
+              })
+            ]
+          })
+        ]
+      }
+    ]
+  })
+
+  Packer.toBlob(doc).then((blob) => {
+    saveAs(blob, `Laporan ${reportName}.docx`)
+    console.log('Document created successfully')
+  })
+}
+
+export { exportToPDF, exportToXLSX, exportToDOCX }
diff --git a/src/report/Keluhan/Rekap/RKeluhan_ALL.ts b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
new file mode 100644
index 0000000..100cda0
--- /dev/null
+++ b/src/report/Keluhan/Rekap/RKeluhan_ALL.ts
@@ -0,0 +1,640 @@
+import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
+import {
+  Document,
+  AlignmentType,
+  Packer,
+  Paragraph,
+  Table,
+  TableCell,
+  TableRow,
+  VerticalAlign,
+  TextRun,
+  WidthType,
+  PageOrientation
+} from 'docx'
+import { saveAs } from 'file-saver'
+import { jsPDF } from 'jspdf'
+import autoTable from 'jspdf-autotable'
+import { Workbook } from 'exceljs'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { setHeaderStyle } from '@/report/utils/xlsx'
+import { formatNumber, formatPercentage } from '@/utils/numbers'
+
+const reportName = 'Rekapitulasi Keluhan All'
+const fontSize = 5
+const detailFontSize = 5
+
+const groupingData = (data: any) => {
+  const groupedData: any = {}
+
+  data.forEach((item: any) => {
+    const { nama_regional, nama_uid } = item
+
+    if (!groupedData[nama_regional]) {
+      groupedData[nama_regional] = {}
+    }
+
+    if (!groupedData[nama_regional][nama_uid]) {
+      groupedData[nama_regional][nama_uid] = { data: [] }
+    }
+
+    groupedData[nama_regional][nama_uid].data.push(item)
+  })
+
+  for (const regional in groupedData) {
+    for (const uid in groupedData[regional]) {
+      const data = groupedData[regional][uid].data
+
+      data.forEach((item: any) => {
+        if (!groupedData[regional][uid].summary) {
+          groupedData[regional][uid].summary = {
+            total: 0,
+            total_selesai: 0,
+            total_inproses: 0,
+            avg_durasi_response: [],
+            max_durasi_response: 0,
+            min_durasi_response: 0,
+            total_diatas_sla_response: 0,
+            total_dibawah_sla_response: 0,
+            avg_durasi_recovery: [],
+            max_durasi_recovery: 0,
+            min_durasi_recovery: 0,
+            total_diatas_sla_recovery: 0,
+            total_dibawah_sla_recovery: 0
+          }
+        }
+
+        groupedData[regional][uid].summary.total += item.total
+        groupedData[regional][uid].summary.total_selesai += item.total_selesai
+        groupedData[regional][uid].summary.total_inproses += item.total_inproses
+        groupedData[regional][uid].summary.avg_durasi_response.push(item.avg_durasi_response)
+        groupedData[regional][uid].summary.max_durasi_response =
+          groupedData[regional][uid].summary.max_durasi_response < item.max_durasi_response
+            ? item.max_durasi_response
+            : groupedData[regional][uid].summary.max_durasi_response
+        groupedData[regional][uid].summary.min_durasi_response =
+          groupedData[regional][uid].summary.min_durasi_response > item.min_durasi_response
+            ? item.min_durasi_response
+            : groupedData[regional][uid].summary.min_durasi_response
+        groupedData[regional][uid].summary.total_diatas_sla_response +=
+          item.total_diatas_sla_response
+        groupedData[regional][uid].summary.total_dibawah_sla_response +=
+          item.total_dibawah_sla_response
+        groupedData[regional][uid].summary.avg_durasi_recovery.push(item.avg_durasi_recovery)
+        groupedData[regional][uid].summary.max_durasi_recovery =
+          groupedData[regional][uid].summary.max_durasi_recovery < item.max_durasi_recovery
+            ? item.max_durasi_recovery
+            : groupedData[regional][uid].summary.max_durasi_recovery
+        groupedData[regional][uid].summary.min_durasi_recovery =
+          groupedData[regional][uid].summary.min_durasi_recovery > item.min_durasi_recovery
+            ? item.min_durasi_recovery
+            : groupedData[regional][uid].summary.min_durasi_recovery
+        groupedData[regional][uid].summary.total_diatas_sla_recovery +=
+          item.total_diatas_sla_recovery
+        groupedData[regional][uid].summary.total_dibawah_sla_recovery +=
+          item.total_dibawah_sla_recovery
+      })
+    }
+  }
+
+  return groupedData
+}
+
+const formatData = (rawData: any) => {
+  const data = groupingData(rawData)
+  const formattedData: any = []
+
+  for (const regional in data) {
+    let no = 1
+    const total: any = {
+      total: 0,
+      total_selesai: 0,
+      total_inproses: 0,
+      avg_durasi_response: [],
+      max_durasi_response: [],
+      min_durasi_response: [],
+      total_diatas_sla_response: 0,
+      total_dibawah_sla_response: 0,
+      avg_durasi_recovery: [],
+      max_durasi_recovery: [],
+      min_durasi_recovery: [],
+      total_diatas_sla_recovery: 0,
+      total_dibawah_sla_recovery: 0
+    }
+
+    formattedData.push([{ content: regional, colSpan: 17, styles: { fontStyle: 'bold' } }])
+
+    for (const uid in data[regional]) {
+      const summary = data[regional][uid].summary
+      const avgDurasiResponse = summary.avg_durasi_response.length
+        ? summary.avg_durasi_response.reduce((a: any, b: any) => a + b) /
+          summary.avg_durasi_response.length
+        : 0
+      const avgDurasiRecovery = summary.avg_durasi_recovery.length
+        ? summary.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
+          summary.avg_durasi_recovery.length
+        : 0
+
+      formattedData.push([
+        { content: no++, styles: { halign: 'right' } },
+        uid,
+        formatNumber(summary.total),
+        formatNumber(summary.total_selesai),
+        summary.total_selesai != summary.total
+          ? formatPercentage((summary.total_selesai / summary.total) * 100)
+          : '100%',
+        formatNumber(summary.total_inproses),
+        formatPercentage(
+          !summary.total_inproses || !summary.total
+            ? '0%'
+            : (summary.total_inproses / summary.total) * 100
+        ),
+        formatNumber(avgDurasiResponse),
+        formatWaktu(summary.max_durasi_response),
+        formatWaktu(summary.min_durasi_response),
+        formatNumber(summary.total_diatas_sla_response),
+        formatNumber(summary.total_dibawah_sla_response),
+        formatNumber(avgDurasiRecovery),
+        formatWaktu(summary.max_durasi_recovery),
+        formatWaktu(summary.min_durasi_recovery),
+        formatNumber(summary.total_diatas_sla_recovery),
+        formatNumber(summary.total_dibawah_sla_recovery)
+      ])
+
+      total.total += summary.total
+      total.total_selesai += summary.total_selesai
+      total.total_inproses += summary.total_inproses
+      total.avg_durasi_response.push(avgDurasiResponse)
+      total.max_durasi_response.push(summary.max_durasi_response)
+      total.min_durasi_response.push(summary.min_durasi_response)
+      total.total_diatas_sla_response += summary.total_diatas_sla_response
+      total.total_dibawah_sla_response += summary.total_dibawah_sla_response
+      total.avg_durasi_recovery.push(avgDurasiRecovery)
+      total.max_durasi_recovery.push(summary.max_durasi_recovery)
+      total.min_durasi_recovery.push(summary.min_durasi_recovery)
+      total.total_diatas_sla_recovery += summary.total_diatas_sla_recovery
+      total.total_dibawah_sla_recovery += summary.total_dibawah_sla_recovery
+    }
+
+    formattedData.push([
+      { content: 'TOTAL', colSpan: 2, styles: { fontStyle: 'bold' } },
+      formatNumber(total.total),
+      formatNumber(total.total_selesai),
+      formatPercentage(
+        !total.total_selesai || !total.total ? '0%' : (total.total_selesai / total.total) * 100
+      ),
+      formatNumber(total.total_inproses),
+      formatPercentage(
+        !total.total_inproses || !total.total ? '0%' : (total.total_inproses / total.total) * 100
+      ),
+      formatNumber(
+        total.avg_durasi_response.length
+          ? total.avg_durasi_response.reduce((a: any, b: any) => a + b) /
+              total.avg_durasi_response.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.max_durasi_response)),
+      formatWaktu(Math.min(...total.min_durasi_response)),
+      formatNumber(total.total_diatas_sla_response),
+      formatNumber(total.total_dibawah_sla_response),
+      formatNumber(
+        total.avg_durasi_recovery.length
+          ? total.avg_durasi_recovery.reduce((a: any, b: any) => a + b) /
+              total.avg_durasi_recovery.length
+          : 0
+      ),
+      formatWaktu(Math.max(...total.max_durasi_recovery)),
+      formatWaktu(Math.min(...total.min_durasi_recovery)),
+      formatNumber(total.total_diatas_sla_recovery),
+      formatNumber(total.total_dibawah_sla_recovery)
+    ])
+  }
+
+  return formattedData
+}
+
+const formatMetaData = (reportMeta: any) => {
+  const periode = reportMeta.periode ? reportMeta.periode.split(' s/d ') : ''
+
+  let dateFromFormat = ''
+  let dateToFormat = ''
+  let dayTo = ''
+
+  if (periode != '') {
+    const dateFrom = new Date(periode[0].split('-').reverse().join('-'))
+    const dateTo = new Date(periode[1].split('-').reverse().join('-'))
+
+    dateFromFormat = `${dateFrom.getDate()}-${dateFrom.toLocaleString('default', {
+      month: 'long'
+    })}-${dateFrom.getFullYear()}`
+
+    dateToFormat = `${dateTo.getDate()}-${dateTo.toLocaleString('default', {
+      month: 'long'
+    })}-${dateTo.getFullYear()}`
+
+    dayTo = dateTo.toLocaleString('default', { weekday: 'long' })
+  }
+
+  return { dateFromFormat, dateToFormat, dayTo }
+}
+
+const exportToPDF = (reportMeta: any, rawData: any, preview: boolean = false) => {
+  const data = formatData(rawData)
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [
+      ['PT. PLN(Persero)', '', ''],
+      [
+        { content: 'UNIT INDUK', styles: { cellWidth: 40 } },
+        { content: ':', styles: { cellWidth: 1 } },
+        reportMeta.uid
+          ? reportMeta.uid.name.toUpperCase()
+          : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+      ],
+      [
+        'UNIT PELAKSANA PELAYANAN PELANGGAN',
+        ':',
+        reportMeta.up3
+          ? reportMeta.up3.name.toUpperCase()
+          : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+      ],
+      [
+        'UNIT LAYANAN PELANGGAN',
+        ':',
+        reportMeta.ulp
+          ? reportMeta.ulp.name.toUpperCase()
+          : 'Semua Unit Layanan Pelanggan'.toUpperCase()
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 23
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        {
+          content: 'No',
+          rowSpan: 2
+        },
+        {
+          content: 'Nama Unit',
+          rowSpan: 2
+        },
+        {
+          content: 'Response Time',
+          colSpan: 10
+        },
+        {
+          content: 'Penyelesaian',
+          colSpan: 5
+        }
+      ],
+      [
+        'Total',
+        'Selesai',
+        '%',
+        'Inproses',
+        '%',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>SLA',
+        '<SLA',
+        'Rata-Rata',
+        'Max',
+        'Min',
+        '>SLA',
+        '<SLA'
+      ]
+    ],
+    body: data,
+    styles: {
+      fontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+
+      if (data.cell.text[0] === 'TOTAL') {
+        for (const key in data.row.cells) {
+          data.row.cells[key].styles.fillColor = [192, 192, 192]
+          data.row.cells[key].styles.fontStyle = 'bold'
+        }
+      }
+    },
+    startY: 30
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  if (preview) {
+    doc.setProperties({
+      title: `${reportName}`
+    })
+    window.open(doc.output('bloburl'))
+  } else {
+    doc.save(`Laporan ${reportName}.pdf`, { returnPromise: true }).then(() => {
+      console.log('pdf berhasil disimpan')
+    })
+  }
+}
+
+const exportDetailToPDF = (reportMeta: any, rawData: any) => {
+  const meta = formatMetaData(reportMeta)
+  const doc = new jsPDF({
+    orientation: 'landscape'
+  })
+
+  autoTable(doc, {
+    head: [['PT. PLN(Persero)']],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold'
+    },
+    theme: 'plain',
+    startY: 10,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`Daftar Detail ${reportName}`.toUpperCase()],
+      [`PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    startY: 18,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [
+        'No',
+        'No Laporan',
+        'Tgl Lapor',
+        'Dalam Proses Bidang',
+        'Selesai Bidang Unit',
+        'Durasi Response Time',
+        'Durasi Recovery Time',
+        'Status',
+        'IDPEL/NO METER',
+        'Nama Pelapor',
+        'Alamat Pelapor',
+        'No Telp Pelapor',
+        'Keterangan Pelapor',
+        'Rayon',
+        'Uraian',
+        'Response Pelanggan'
+      ]
+    ],
+    body: rawData.map((item: any, i: any) => [
+      { content: i + 1, styles: { halign: 'right' } },
+      item.no_laporan,
+      item.waktu_lapor,
+      item.waktu_response,
+      item.waktu_recovery,
+      item.durasi_response_time ? formatWaktu(item.durasi_response_time) : '-',
+      item.durasi_recovery_time ? formatWaktu(item.durasi_recovery_time) : '-',
+      item.status_akhir,
+      item.idpel_nometer,
+      item.nama_pelapor,
+      item.alamat_pelapor,
+      item.no_telp_pelapor,
+      item.keterangan_pelapor,
+      item.nama_ulp,
+      item.uraian,
+      item.respon_pelanggan
+    ]),
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 1,
+      lineColor: [0, 0, 0],
+      lineWidth: 0.1,
+      cellWidth: 'auto'
+    },
+    rowPageBreak: 'auto',
+    headStyles: {
+      fillColor: [192, 192, 192],
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      cellWidth: 'wrap',
+      halign: 'center',
+      valign: 'middle'
+    },
+    bodyStyles: {
+      textColor: [0, 0, 0]
+    },
+    didParseCell: function (data) {
+      if (data.row.section === 'head') {
+        data.cell.text = data.cell.text.map(function (word: any) {
+          return word.toUpperCase()
+        })
+      }
+    },
+    startY: 24,
+    margin: 5
+  })
+
+  autoTable(doc, {
+    head: [
+      [`${meta.dayTo}, ${meta.dateToFormat}`],
+      [
+        {
+          content: '(.........................................)',
+          styles: { minCellHeight: 8, valign: 'bottom' }
+        }
+      ]
+    ],
+    styles: {
+      fontSize: detailFontSize,
+      cellPadding: 0.1,
+      textColor: [0, 0, 0],
+      fontStyle: 'bold',
+      halign: 'center'
+    },
+    theme: 'plain',
+    tableWidth: 50,
+    margin: { left: 230 }
+  })
+
+  doc.save(`Laporan Detail ${reportName}.pdf`, { returnPromise: true }).then(() => {
+    console.log('pdf berhasil disimpan')
+  })
+}
+
+const exportToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(
+    worksheet,
+    2,
+    1,
+    `UNIT INDUK : ${
+      reportMeta.uid
+        ? reportMeta.uid.name.toUpperCase()
+        : 'Semua Unit Induk Distribusi/Wilayah'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    3,
+    1,
+    `UNIT PELAKSANA PELAYANAN PELANGGAN : ${
+      reportMeta.up3
+        ? reportMeta.up3.name.toUpperCase()
+        : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'.toUpperCase()
+    }`
+  )
+  setHeaderStyle(
+    worksheet,
+    4,
+    1,
+    `POSKO : ${
+      reportMeta.posko ? reportMeta.posko.name.toUpperCase() : 'Semua Posko'.toUpperCase()
+    }`
+  )
+
+  setHeaderStyle(worksheet, 7, 8, `${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    8,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('A1:F1')
+  worksheet.mergeCells('A2:F2')
+  worksheet.mergeCells('A3:F3')
+  worksheet.mergeCells('A4:F4')
+  worksheet.mergeCells('H7:J7')
+  worksheet.mergeCells('H8:J8')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 10, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
+    })
+  })
+
+  e.cancel = true
+}
+
+const exportDetailToXLSX = (reportMeta: any, e: any) => {
+  const meta = formatMetaData(reportMeta)
+  const workbook = new Workbook()
+  const worksheet = workbook.addWorksheet(`Detail ${reportName}`)
+
+  setHeaderStyle(worksheet, 1, 1, 'PT. PLN(Persero)')
+  setHeaderStyle(worksheet, 3, 8, `Daftar Detail ${reportName}`.toUpperCase(), true)
+  setHeaderStyle(
+    worksheet,
+    4,
+    8,
+    `PERIODE TANGGAL : ${meta.dateFromFormat} SD TGL ${meta.dateToFormat}`,
+    true
+  )
+
+  worksheet.mergeCells('H3:J3')
+  worksheet.mergeCells('H4:J4')
+
+  exportToExcel({
+    component: e.component,
+    worksheet,
+    autoFilterEnabled: true,
+    topLeftCell: { row: 6, column: 1 }
+  }).then(() => {
+    workbook.xlsx.writeBuffer().then((buffer: any) => {
+      saveAs(
+        new Blob([buffer], { type: 'application/octet-stream' }),
+        `Laporan Detail ${reportName}.xlsx`
+      )
+    })
+  })
+
+  e.cancel = true
+}
+
+export { exportToPDF, exportToXLSX, exportDetailToPDF, exportDetailToXLSX }
diff --git a/src/report/utils/rating.ts b/src/report/utils/rating.ts
new file mode 100644
index 0000000..a9246b3
--- /dev/null
+++ b/src/report/utils/rating.ts
@@ -0,0 +1,5 @@
+export const numberToStars = (rating: number) => {
+  const stars = rating ? Math.round(rating) : 0
+
+  return stars ? '*'.repeat(stars) : 'Tidak ada'
+}
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 5e254fb..47ed41a 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -1,5 +1,11 @@
 //deploy vm
-import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
+import {
+  ApolloClient,
+  createHttpLink,
+  gql,
+  InMemoryCache,
+  type DocumentNode
+} from '@apollo/client/core'
 import axios from 'axios'
 const controller = new AbortController()
 const url = import.meta.env.VITE_APP_GRAPHQL_ENDPOINT
@@ -13,9 +19,11 @@ const instance = axios.create({
   signal: controller.signal
 })
 
-export const requestGraphQl = async (query: string, data: any) => {
+export const getQueryString = (query: DocumentNode) => query.loc?.source.body!
+
+export const requestGraphQl = async (query: DocumentNode, data: any) => {
   return await instance.post('', {
-    query: query,
+    query: getQueryString(query),
     variables: data
   })
 }
@@ -188,6 +196,17 @@ export const queries = {
           }
         }
       `,
+      keluhanMelaporLebihDariSatuKaliDetail: gql`
+        query detailKeluhanLaporLebihDariSatuKali($noLaporan: String!) {
+          detailKeluhanLaporLebihDariSatuKali(noLaporan: $noLaporan) {
+            id
+            no_laporan
+            create_date
+            create_by
+            keterangan
+          }
+        }
+      `,
       keluhanMelaporLebihDariSatuKali: gql`
         query daftarKeluhanMelaporLebihDariSatuKali(
           $minJmlLapor: Int!
@@ -413,6 +432,50 @@ export const queries = {
           }
         }
       `,
+      keluhanPerKelompokKeluhanUID: gql`
+        query rekapitulasiKeluhanPerKelompokKeluhanUid(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPerKelompokKeluhanUid(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            kelompok
+            total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_durasi_response
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            total_durasi_recovery
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
       keluhanPerKelompokKeluhan: gql`
         query rekapitulasiKeluhanPerKelompokKeluhan(
           $dateFrom: Date!
@@ -428,6 +491,14 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             kelompok
             total
             total_selesai
@@ -464,6 +535,7 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            grouping_tipe_keluhan
             tipe_keluhan
             total
             total_selesai
@@ -628,6 +700,12 @@ export const queries = {
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
+          $namaRegional: String
+          $isSelesai: Int!
+          $media: String
+          $tanggal: String
+          $namaIssuetype: String
+          $namaSubissuetype: String
         ) {
           detailKeluhanAll(
             dateFrom: $dateFrom
@@ -635,14 +713,25 @@ export const queries = {
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
+            namaRegional: $namaRegional
+            isSelesai: $isSelesai
+            media: $media
+            tanggal: $tanggal
+            namaIssuetype: $namaIssuetype
+            namaSubissuetype: $namaSubissuetype
           ) {
             id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             no_laporan
-            pembuat_laporan
             waktu_lapor
             waktu_response
             waktu_recovery
-            durasi_dispatch_time
             durasi_response_time
             durasi_recovery_time
             status_akhir
@@ -651,14 +740,9 @@ export const queries = {
             alamat_pelapor
             no_telp_pelapor
             keterangan_pelapor
-            media
-            jarak_closing
-            dispatch_oleh
-            diselesaikan_oleh
-            penyebab
-            tindakan
-            kode_gangguan
-            jenis_gangguan
+            respon_pelanggan
+            is_selesai
+            uraian
           }
         }
       `
@@ -747,6 +831,7 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id_regu
             id
             nama_regional
             id_uid
@@ -959,6 +1044,10 @@ export const queries = {
           $idPosko: Int!
           $idUid: Int!
           $idUp3: Int!
+          $is_transaksi_individual: Int!
+          $is_cleansing_transaksi_tm: Int!
+          $is_koreksi_transaksi_tm: Int!
+          $is_koreksi_gangguan_dan_anev: Int!
         ) {
           rekapitulasiGangguanKoreksiTransaksiIndividual(
             dateFrom: $dateFrom
@@ -966,6 +1055,10 @@ export const queries = {
             idPosko: $idPosko
             idUid: $idUid
             idUp3: $idUp3
+            is_transaksi_individual: $is_transaksi_individual
+            is_cleansing_transaksi_tm: $is_cleansing_transaksi_tm
+            is_koreksi_transaksi_tm: $is_koreksi_transaksi_tm
+            is_koreksi_gangguan_dan_anev: $is_koreksi_gangguan_dan_anev
           ) {
             nama_regional
             id
@@ -1156,6 +1249,7 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            nama_sub_kelompok
             sub_kelompok
             avg_durasi_recovery
             avg_durasi_response
@@ -1706,6 +1800,17 @@ export const queries = {
           }
         }
       `,
+      melaporLebihDariSatuKaliDetail: gql`
+        query detailGangguanLaporLebihDariSatuKali($noLaporan: String!) {
+          detailGangguanLaporLebihDariSatuKali(noLaporan: $noLaporan) {
+            id
+            no_laporan
+            create_date
+            create_by
+            keterangan
+          }
+        }
+      `,
       melaporLebihDariSatuKali: gql`
         query gangguan(
           $minJmlLapor: Int!
@@ -1922,23 +2027,63 @@ export const queries = {
             }
           }
         `,
-        gangguanBelumSelesai: gql`
-          query monalisaGangguanBelumSelesai(
-            $namaRegional: String
-            $idUlp: Int
-            $idUid: Int
-            $idUp3: Int
-            $bulan: Int
-            $tahun: Int
+        gangguanBelumSelesaiDetail: gql`
+          query detailMonalisaGangguanBelumSelesai(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
           ) {
-            monalisaGangguanBelumSelesai(
+            detailMonalisaGangguanBelumSelesai(
+              bulan: $bulan
+              tahun: $tahun
               namaRegional: $namaRegional
               idUlp: $idUlp
               idUid: $idUid
               idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              id_pelanggan
+              nama_pelanggan
+              nama_pelapor
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              penyebab
+              kode_gangguan
+              nama_jenis_gangguan
+              durasi_response_time
+              durasi_recovery_time
+            }
+          }
+        `,
+        gangguanBelumSelesai: gql`
+          query monalisaGangguanBelumSelesai(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaGangguanBelumSelesai(
               bulan: $bulan
               tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
             ) {
+              id
               nama_regional
               id_uid
               nama_uid
@@ -2098,6 +2243,13 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
               nama_ulp
               mom_bulan_ini
               mom_bulan_kemarin
@@ -2125,6 +2277,13 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
               nama_ulp
               mom_bulan_ini
               mom_bulan_kemarin
@@ -2666,6 +2825,70 @@ export const queries = {
     }
   },
   cico: {
+    laporanCheckInCheckOutDetail: gql`
+      query detailCheckInCheckOut(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $personilYantek: String!
+      ) {
+        detailCheckInCheckOut(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          personilYantek: $personilYantek
+        ) {
+          id
+          id_uid
+          nama_uid
+          id_up3
+          nama_up3
+          id_posko
+          nama_posko
+          media
+          pembuat_laporan
+          dispatch_by
+          durasi_waktu_dispatch
+          user_regu
+          nama_regu
+          personil_yantek
+          shift
+          check_in_petugas
+          no_laporan
+          durasi_wo
+          waktu_lapor
+          waktu_dispatch
+          waktu_perjalanan
+          waktu_nyala_sementara
+          waktu_nyala
+          waktu_selesai
+          waktu_response
+          durasi_waktu_response
+          check_out_petugas
+          durasi_menit_response
+          durasi_menit_recovery
+          rating
+          jml_pelanggan_padam
+          fasilitas
+          sub_fasilitas
+          peralatan
+          dampak_kerusakan
+          kelompok_penyebab
+          cuaca
+          keterangan_pelapor
+          keterangan
+          penyebab
+          tindakan
+          status_akhir
+          referensi_marking
+          blth
+        }
+      }
+    `,
     laporanCheckInCheckOut: gql`
       query laporanCheckInCheckOut(
         $dateFrom: Date!
@@ -2681,6 +2904,9 @@ export const queries = {
           idUid: $idUid
           idUp3: $idUp3
         ) {
+          id_uid
+          id_up3
+          id_posko
           user_regu
           personil_yantek
           jumlah_wo_gangguan_individual
@@ -2777,12 +3003,16 @@ export const queries = {
     gangguan: {
       unitBerulang: gql`
         query anomaliPenangananPengaduanGangguanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2816,12 +3046,16 @@ export const queries = {
       `,
       unitRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2855,12 +3089,16 @@ export const queries = {
       `,
       unitSkipStep: gql`
         query anomaliPenangananPengaduanGangguanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2894,12 +3132,16 @@ export const queries = {
       `,
       petugasBerulang: gql`
         query anomaliPenangananPengaduanGangguanPetugasBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanPetugasBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2929,12 +3171,16 @@ export const queries = {
       `,
       petugasRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2964,12 +3210,16 @@ export const queries = {
       `,
       petugasSkipStep: gql`
         query anomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           anomaliPenangananPengaduanGangguanPetugasSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
@@ -2997,6 +3247,119 @@ export const queries = {
           }
         }
       `
+    },
+    keluhan: {
+      unitBerulang: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `,
+      unitSkipStep: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `,
+      unitRatingNegatif: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `
     }
   },
   cttKwhPeriksa: {
@@ -3004,28 +3367,123 @@ export const queries = {
       query laporanCttKwhPeriksa(
         $dateFrom: Date!
         $dateTo: Date!
-        $posko: String
-        $idUid: Int
-        $idUp3: Int
+        $idUlp: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $namaRegional: String
       ) {
         laporanCttKwhPeriksa(
           dateFrom: $dateFrom
           dateTo: $dateTo
-          posko: $posko
+          idUlp: $idUlp
           idUid: $idUid
           idUp3: $idUp3
+          namaRegional: $namaRegional
         ) {
-          dlpd
-          history_p2ti
-          nama_posko
-          rekomendasi_sistem_mendatangkan_petugas
-          total_wo
-          total_wo_cc123
-          total_wo_comcen
-          total_wo_loket
-          total_wo_pln_mobile
+          id
+          id_uid
+          nama_uid
+          id_up3
+          nama_up3
+          id_ulp
+          nama_ulp
+          wo_cc123
+          wo_pln_mobile
+          wo_comcen
+          wo_total
+          rekomendasi_mendatangkan_petugas
+          rekomendasi_diberikan_ke_pelanggan
+          dpld
+          history_p2lt
         }
       }
     `
+  },
+  material: {
+    daftar: {
+      daftarGangguanDanMaterialDipakai: gql`
+        query DaftardaftarGangguanDanMaterialDipakai(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: String
+          $idUid: Int
+          $idUp3: Int
+        ) {
+          daftarGangguanDanMaterialDipakai(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            distribusi: $idUid
+            area: $idUp3
+            posko: $posko
+          ) {
+            isi_laporan
+            nama_material
+            nama_pelanggan
+            nomor_gangguan
+            penyebab_gangguan
+            regu
+            satuan
+            sumber
+            volume
+            waktu_padam
+          }
+        }
+      `
+    },
+    rekap: {
+      rekapitulasiPemakaianMaterial: gql`
+        query DaftarrekapitulasiPemakaianMaterial(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: String
+          $idUid: Int
+          $idUp3: Int
+        ) {
+          rekapitulasiPemakaianMaterial(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            distribusi: $idUid
+            area: $idUp3
+            posko: $posko
+          ) {
+            kode_material
+            nama_material
+            satuan
+            sumber_material
+            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
+          }
+        }
+      `
+    }
   }
 }
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
index 8524300..5141c4f 100755
--- a/src/utils/texts.ts
+++ b/src/utils/texts.ts
@@ -60,6 +60,46 @@ const getMonthNumber = (monthName: string) => {
     'November',
     'Desember'
   ]
-  return months.indexOf(monthName) + 1
+  if (months.filter((month) => month.toLowerCase() === monthName.toLowerCase()).length > 0) {
+    return months.indexOf(monthName) + 1
+  } else {
+    return 0
+  }
 }
-export { splitRoutePath, getMonthName, getMonthNameShort, getMonthNumber }
+
+const reformatDate = (inputDate: string, originalFormat: string, targetFormat: string): string => {
+  // Parsing tanggal dari format asli
+  const originalDate = parseDate(inputDate, originalFormat)
+
+  // Format tanggal dalam format yang diinginkan
+  const formattedDate = formatDateToString(originalDate, targetFormat)
+
+  return formattedDate
+}
+
+const parseDate = (inputDate: string, format: string): Date => {
+  // Pisahkan tanggal, bulan, dan tahun dari input berdasarkan format
+  const parts = inputDate.split(/[^0-9]+/)
+  const formatParts = format.split(/[^a-zA-Z]+/)
+
+  // Buat objek tanggal baru dengan mengambil nilai dari format yang diberikan
+  const dateValues: any = {}
+  for (let i = 0; i < formatParts.length; i++) {
+    if (formatParts[i]) {
+      dateValues[formatParts[i]] = parseInt(parts[i], 10)
+    }
+  }
+
+  // Format tanggal dalam format yang diinginkan
+  return new Date(dateValues['yyyy'], dateValues['MM'] - 1, dateValues['dd'])
+}
+
+const formatDateToString = (date: Date, format: string): string => {
+  const day = date.getDate().toString().padStart(2, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const year = date.getFullYear().toString()
+
+  // Ganti placeholder dengan nilai tanggal, bulan, dan tahun
+  return format.replace('yyyy', year).replace('MM', month).replace('dd', day)
+}
+export { reformatDate, splitRoutePath, getMonthName, getMonthNameShort, getMonthNumber }