From f478e63a19501b775f447b76f39f22c7231fc88f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 28 Mar 2024 13:15:33 +0700
Subject: [PATCH 1/5] Refactor RGangguan_BerdasarMedia.vue and api.graphql.ts

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    |  76 +++++++----
 .../Rekap/RGangguan_BerdasarMedia.vue         |  38 +++---
 src/utils/api/api.graphql.ts                  | 123 +++++++++---------
 3 files changed, 132 insertions(+), 105 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index e52f0a0..61d97ac 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -25,7 +25,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 :page-size="40" :enabled="true" />
       <DxPager
@@ -495,13 +495,13 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -513,7 +513,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer">
+        <p class="cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -522,6 +522,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -537,6 +538,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -552,6 +554,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
+          @click="setAgreementDialog(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -1074,7 +1077,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 { getGangguanDetail, queries } from '@/utils/api/api.graphql'
+import { requestGraphQl, queries } 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'
@@ -1096,6 +1099,8 @@ 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 reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -1103,6 +1108,23 @@ const reportMeta = ref({
   periode: ''
 })
 
+const setAgreementDialog = (column: string) => {
+  console.log('column', column)
+
+  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 calculateCustomSummary = (options: any) => {
   if (options.name == 'persenSelesai') {
     console.log(options.component.persen_selesai)
@@ -1150,7 +1172,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiAllGangguan
-      loadingData.value = false
     }
 
     reportMeta.value = filters.value
@@ -1158,11 +1179,10 @@ const filterData = (params: any) => {
 
   onError((error) => {
     console.log(error)
-    loadingData.value = false
   })
 
   watch(loading, (value) => {
-    // loadingData.value = value
+    loadingData.value = value
   })
 }
 
@@ -1184,12 +1204,13 @@ const getDetail = async () => {
     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 : ''
+    media: selected?.media ? selected?.media : '',
+    isSelesai: progressSelected.value,
+    tanggal: ''
   }
 
-  await getGangguanDetail(query)
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail.loc?.source.body!, query)
     .then((result) => {
-      // console.table(result.data.data.detailGangguan)
       dataSub.value = result.data.data.detailGangguan
     })
     .catch((err) => {
@@ -1199,28 +1220,25 @@ const getDetail = async () => {
       loadingSubData.value = false
     })
 
-  // const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
-  //   fetchPolicy: 'network-only'
-  // })
+  // const { onResult, onError, refetch, loading } = useQuery(
+  //   queries.gangguan.rekap.gangguanAllDetail,
+  //   query,
+  //   {
+  //     fetchPolicy: 'network-only'
+  //   }
+  // )
 
-  // result.onResult((queryResult) => {
+  // onResult((queryResult) => {
   //   if (queryResult.data != undefined) {
   //     dataSub.value = queryResult.data.detailGangguan
-  //     console.table(queryResult.data.detailGangguan)
   //   }
   // })
 
-  // watch(result, (value) => {
-  //   if (dataSub.value != value.detailGangguan) {
-  //     console.table(value.detailGangguan)
-  //   }
-  // })
-
-  // result.onError((error) => {
+  // onError((error) => {
   //   console.log(error)
   // })
 
-  // watch(result.loading, (value) => {
+  // watch(loading, (value) => {
   //   loadingSubData.value = value
   // })
 }
@@ -1234,10 +1252,12 @@ 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) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 03da219..6330dee 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -88,13 +88,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
-          {{ data.text }}
+        <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
+          {{ data.text == null || data.text == '' ? '-' : data.text }}
         </p>
       </template>
 
       <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 == '%'
@@ -515,6 +515,7 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const date = ref('2023-02-04')
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -522,35 +523,39 @@ const reportMeta = ref({
   periode: ''
 })
 
+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 getDetail = () => {
   loadingSubData.value = true
-  const dateValue = filters.value.periode.split(' s/d ')
   const ref = 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),
+    tanggal: date.value,
     posko: ref?.id_posko ? ref?.id_posko : 0,
     idUid: ref?.id_uid ? ref?.id_uid : 0,
     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-    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 : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.berdasarkanMediaDetail,
     query
   )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailRekapitulasiGangguanBerdasarkanMedia
     }
   })
 
@@ -604,7 +609,10 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-    showDetail()
+
+    if (date.value != '') {
+      showDetail()
+    }
   }
 }
 
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 15a7bea..5e254fb 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -13,69 +13,9 @@ const instance = axios.create({
   signal: controller.signal
 })
 
-export const getGangguanDetail = async (data: any) => {
-  // controller.abort()
+export const requestGraphQl = async (query: string, data: any) => {
   return await instance.post('', {
-    query: `query detailGangguan(
-          $dateFrom: Date!
-          $dateTo: Date!
-          $posko: Int!
-          $idUid: Int!
-          $idUp3: Int!
-          $idRegu: Int!
-          $media: String!
-          $idUlp: Int!
-          $namaRegional: String!
-        ) {
-          detailGangguan(
-            dateFrom: $dateFrom
-            dateTo: $dateTo
-            posko: $posko
-            idUid: $idUid
-            idUp3: $idUp3
-            idRegu: $idRegu
-            idUlp: $idUlp
-            namaRegional: $namaRegional
-            media: $media
-          ) {
-            id
-            nama_regional
-            id_uid
-            nama_uid
-            id_up3
-            nama_up3
-            id_ulp
-            nama_ulp
-            id_posko
-            nama_posko
-            no_laporan
-            pembuat_laporan
-            waktu_lapor
-            waktu_response
-            waktu_recovery
-            durasi_dispatch_time
-            durasi_response_time
-            durasi_recovery_time
-            status_akhir
-            is_marking
-            referensi_marking
-            idpel_nometer
-            nama_pelapor
-            alamat_pelapor
-            no_telp_pelapor
-            keterangan_pelapor
-            media
-            nama_posko
-            jarak_closing
-            dispatch_oleh
-            diselesaikan_oleh
-            penyebab
-            tindakan
-            kode_gangguan
-            jenis_gangguan
-            nilai_rating
-          }
-        }`,
+    query: query,
     variables: data
   })
 }
@@ -1365,6 +1305,61 @@ export const queries = {
           }
         }
       `,
+      berdasarkanMediaDetail: gql`
+        query detailRekapitulasiGangguanBerdasarkanMedia(
+          $tanggal: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $namaRegional: String!
+          $media: String!
+        ) {
+          detailRekapitulasiGangguanBerdasarkanMedia(
+            tanggal: $tanggal
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            namaRegional: $namaRegional
+            media: $media
+          ) {
+            alamat_pelapor
+            diselesaikan_oleh
+            dispatch_oleh
+            durasi_dispatch_time
+            durasi_recovery_time
+            durasi_response_time
+            id
+            id_posko
+            id_uid
+            id_ulp
+            id_up3
+            idpel_nometer
+            is_marking
+            jarak_closing
+            jenis_gangguan
+            keterangan_pelapor
+            kode_gangguan
+            media
+            nama_pelapor
+            nama_posko
+            nama_regional
+            nama_uid
+            nama_ulp
+            nama_up3
+            nilai_rating
+            no_laporan
+            no_telp_pelapor
+            pembuat_laporan
+            penyebab
+            referensi_marking
+            status_akhir
+            tindakan
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
       berdasarkanMedia: gql`
         query rekapitulasiGangguanBerdasarkanMedia(
           $dateFrom: Date!
@@ -1475,6 +1470,8 @@ export const queries = {
           $media: String!
           $idUlp: Int!
           $namaRegional: String!
+          $isSelesai: Int!
+          $tanggal: String
         ) {
           detailGangguan(
             dateFrom: $dateFrom
@@ -1486,6 +1483,8 @@ export const queries = {
             idUlp: $idUlp
             namaRegional: $namaRegional
             media: $media
+            isSelesai: $isSelesai
+            tanggal: $tanggal
           ) {
             id
             nama_regional

From c7bbf618781a02efc5c526fceef954cb521b5171 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 28 Mar 2024 20:24:20 +0700
Subject: [PATCH 2/5] Add cell-click event handler and related variables

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 156 ++++++++++++------
 src/utils/api/api.graphql.ts                  |  14 +-
 2 files changed, 114 insertions(+), 56 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 61d97ac..c47cb7f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.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"
@@ -1101,6 +1102,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' },
@@ -1108,9 +1112,36 @@ const reportMeta = ref({
   periode: ''
 })
 
-const setAgreementDialog = (column: string) => {
-  console.log('column', column)
+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) {
+      const data = e.data.collapsedItems[0].items[0].items[0]
+      groupData.value = data
+      console.table(data)
+    } else if (e.row.groupIndex == 2) {
+      const data = e.data.collapsedItems[0].items[0]
+      groupData.value = data
+      console.table(data)
+    } else if (e.row.groupIndex == 3) {
+      const data = e.data.collapsedItems[0]
+      groupData.value = data
+      console.table(data)
+    }
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
 
+const setAgreementDialog = (column: string) => {
   if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
     agreeToShowDialog.value = true
     if (column == 'Total') {
@@ -1151,13 +1182,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),
@@ -1167,23 +1197,20 @@ 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
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
+    .then((result) => {
+      dataSub.value = result.data.data.rekapitulasiAllGangguan
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const getDetail = async () => {
@@ -1191,56 +1218,79 @@ 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 (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),
+      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
     })
     .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 = () => {
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 5e254fb..54c7e38 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
   })
 }

From b05b6f82bc425ae6874bfc2ff5cc01f3e5f68aa1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 29 Mar 2024 00:22:39 +0700
Subject: [PATCH 3/5] Refactor data retrieval in filterData function

---
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    |  45 +++----
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  |  48 ++++---
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      |  47 +++----
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 113 +++++++----------
 .../Daftar/DGangguan_RecoveryTime.vue         |  46 +++----
 .../Daftar/DGangguan_ResponseTime.vue         |  46 +++----
 .../Pages/Gangguan/Daftar/DGangguan_STIDP.vue |  48 +++----
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    |  13 +-
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    | 110 ++++++++--------
 .../Rekap/RGangguan_BerdasarMedia.vue         |  95 +++++++-------
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   |  92 +++++++-------
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |  98 +++++++-------
 .../Rekap/RGangguan_JenisGangguan.vue         | 117 ++++++++---------
 .../Rekap/RGangguan_JenisGangguanSE.vue       |  96 +++++++-------
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    |  96 +++++++-------
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     |  99 +++++++--------
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      |  95 +++++++-------
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 120 ++++++++----------
 .../Rekap/RGangguan_RatingPerPosko.vue        | 103 +++++++--------
 .../Rekap/RGangguan_RatingPerRegu.vue         |  91 ++++++-------
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue |  47 +++----
 .../Pages/Keluhan/Daftar/DKeluhan_DKUL.vue    |  47 +++----
 .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue   |  49 +++----
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue  |  49 +++----
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  |  49 +++----
 .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue   |  47 +++----
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue     |  47 +++----
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |  67 +++++-----
 .../Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  |  94 +++++++-------
 .../Rekap/RKeluhan_PerFungsiBidang.vue        |  92 +++++++-------
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        | 106 ++++++++--------
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     |  92 +++++++-------
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     |  92 +++++++-------
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  |  86 ++++++-------
 .../Keluhan/Rekap/RKeluhan_RatingPerUnit.vue  |  92 +++++++-------
 35 files changed, 1247 insertions(+), 1427 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index e649e74..5cc3c1f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -310,7 +310,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 +321,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 +338,11 @@ 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +353,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..05c4f66 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -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,14 @@ 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 filterData = async (params: any) => {
   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 +387,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..fb40621 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -320,7 +320,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 +331,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 +348,11 @@ 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +362,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..9dd8fc0 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -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'
@@ -483,7 +483,7 @@ const setDetailType = (columnCaption: string) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -498,25 +498,23 @@ const getDetail = () => {
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
+  loadingSubData.value = false
+  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailKeluhanAll
+      } 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 +531,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 +545,40 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..59fcd98 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -346,7 +346,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 +361,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 +378,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +394,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 +424,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..3ac1c0f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -323,7 +323,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 +338,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 +355,11 @@ const showDetail = () => (dialogDetail.value = true)
 
 const closeDialog = () => (dialogDetail.value = false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +371,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..06d37e8 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -320,7 +320,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 +331,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 +348,11 @@ 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +362,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 c47cb7f..62acdad 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -1202,7 +1202,12 @@ const filterData = async (params: any) => {
   loadingData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
     .then((result) => {
-      dataSub.value = result.data.data.rekapitulasiAllGangguan
+      if (result.data.data != null) {
+        dataSub.value = result.data.data.rekapitulasiAllGangguan
+      } else {
+        dataSub.value = []
+      }
+
       reportMeta.value = filters.value
     })
     .catch((err) => {
@@ -1283,7 +1288,11 @@ const getDetail = async () => {
 
   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.error(err)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 6cc51ff..64457e0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -508,7 +508,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 InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -537,7 +537,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 +554,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)
@@ -625,49 +621,47 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 6330dee..ad85f14 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -493,7 +493,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -535,8 +535,7 @@ const setDate = (value: any) => {
   }
 }
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const ref = dataSelected.value
 
   const query = {
@@ -548,24 +547,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)
@@ -622,40 +618,39 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..05f6191 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -432,7 +432,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -459,41 +459,40 @@ const setMonth = (month: any) => {
   monthSelected.value = getMonthNumber(month)
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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
-    }
-  )
+  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: 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
-  })
+  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 = []
+      }
+    })
+    .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
 
@@ -509,24 +508,21 @@ const getDetail = () => {
     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)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 69c16b1..0c1b48e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -779,7 +779,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
@@ -808,7 +808,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 +827,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)
@@ -900,41 +894,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..e6b1bda 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -450,7 +450,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 { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -553,11 +553,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +567,68 @@ 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,
+              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()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 70cf528..4b6eaf0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -789,7 +789,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 InputText from '@/components/InputText.vue'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -842,43 +842,41 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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
@@ -897,24 +895,22 @@ const getDetail = () => {
     idEquipment: ref?.kode ? parseInt(ref.kode) : 0
   }
 
-  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)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 089de98..5313e3f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1125,7 +1125,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1154,7 +1154,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
@@ -1171,24 +1171,22 @@ const getDetail = () => {
     idUp3: ref?.id_up3 ? ref?.id_up3 : 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)
@@ -1242,40 +1240,38 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  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 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
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
-    }
-
-    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..05f90db 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -871,7 +871,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'
@@ -898,8 +898,7 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -919,24 +918,21 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  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)
@@ -990,41 +986,40 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..05e6628 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -881,7 +881,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'
@@ -910,8 +910,7 @@ const reportMeta = ref({
   groupBy: false
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -931,24 +930,21 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  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)
@@ -1007,11 +1003,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +1017,33 @@ 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) => {
+      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..d7e9887 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -629,7 +629,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'
@@ -659,8 +659,7 @@ const reportMeta = ref({
   groupBy: false
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -680,24 +679,21 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  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)
@@ -756,57 +752,47 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
-  loadingData.value = true
+const filterData = async (params: any) => {
   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) => {
+      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..8c2c79a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -632,7 +632,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -661,8 +661,7 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -682,24 +681,21 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  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)
@@ -753,26 +749,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(dataSubSelected)
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +763,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..b488913 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -619,7 +619,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import vue3starRatings from 'vue3-star-ratings'
@@ -650,8 +650,7 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -671,24 +670,23 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  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)
@@ -743,20 +741,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   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 filterData = async (params: any) => {
   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 +755,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..52f46b9 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -315,7 +315,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 autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
@@ -536,23 +536,13 @@ const onExporting = (e: any) => {
 }
 
 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +552,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..ef95ab9 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -349,7 +349,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 { jsPDF } from 'jspdf'
 import autoTable from 'jspdf-autotable'
@@ -361,6 +361,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
+const loading = ref(false)
 
 const showDetail = () => (dialogDetail.value = true)
 
@@ -571,22 +572,11 @@ 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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,20 +586,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.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()
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 96b104f..8701a69 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -339,7 +339,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 autoTable from 'jspdf-autotable'
 
@@ -566,27 +566,15 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
+const loading = ref(false)
 
-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) => {
   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,20 +586,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.daftarKeluhanMelaporLebihDariSatuKali
-    }
+  loading.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(() => {
+      loading.value = false
+    })
 }
 
 const filters = ref()
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 9e5a8ed..26da23b 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -317,7 +317,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 autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
@@ -548,25 +548,13 @@ const onExporting = (e: any) => {
 }
 
 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +566,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..c5444af 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -335,7 +335,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 autoTable from 'jspdf-autotable'
 
@@ -567,25 +567,13 @@ const onExporting = (e: any) => {
 }
 
 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +585,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..961e948 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -308,7 +308,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 autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
@@ -531,23 +531,13 @@ const onExporting = (e: any) => {
 }
 
 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 filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +547,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..7a35133 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -327,7 +327,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import autoTable from 'jspdf-autotable'
@@ -556,18 +556,7 @@ const onExporting = (e: any) => {
 }
 
 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 +565,11 @@ const reportMeta = ref({
   periode: ''
 })
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +580,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 11772d9..cec10e5 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -785,7 +785,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'
@@ -805,11 +805,11 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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),
@@ -819,25 +819,26 @@ 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
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  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 = []
+      }
+    })
+    .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
 
@@ -853,21 +854,21 @@ const getDetail = async () => {
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0
   }
 
-  const result = useQuery(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
-
-  result.onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  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)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 7fb3185..a1b1a90 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -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'
@@ -509,42 +509,41 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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
 
@@ -560,24 +559,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/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index fb0d8c8..32c7eda 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -764,7 +764,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'
@@ -784,41 +784,40 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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) {
+        data.value = result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+      } 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,24 +833,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/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 94ab3d3..5a8e652 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -913,7 +913,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'
@@ -933,48 +933,47 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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
 
@@ -990,24 +989,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/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 5be408a..4566c6e 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -769,7 +769,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'
@@ -789,41 +789,40 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPerKelompokKeluhan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = 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
 
@@ -839,24 +838,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/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 921dd99..51a6739 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -773,7 +773,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'
@@ -793,41 +793,40 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (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
-    }
-  )
+  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.rekapitulasiKeluhanPerTanggal
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.keluhan.rekap.keluhanPerTanggal, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiKeluhanPerTanggal
+      } 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
 
@@ -843,24 +842,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/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 168286a..3a11b01 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -912,7 +912,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'
@@ -932,11 +932,10 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +945,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
 
@@ -986,24 +987,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/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index ad4b4e8..4039e95 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -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,40 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +287,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)

From 2bbf120210c37b3901c07c0193db6106d9466f9d Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 29 Mar 2024 10:03:49 +0700
Subject: [PATCH 4/5] Refactor variable names in RGangguan_ALL.vue

---
 src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 62acdad..731e7b6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -1203,9 +1203,9 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.gangguan.rekap.gangguanAll, query)
     .then((result) => {
       if (result.data.data != null) {
-        dataSub.value = result.data.data.rekapitulasiAllGangguan
+        data.value = result.data.data.rekapitulasiAllGangguan
       } else {
-        dataSub.value = []
+        data.value = []
       }
 
       reportMeta.value = filters.value

From 30bc1cbb9727768e08116b7cacad72d871458ff1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 29 Mar 2024 10:54:16 +0700
Subject: [PATCH 5/5] Add GraphQL queries for material-related data

---
 .../Pages/Material/Daftar/Material_DGMYG.vue  |  76 ++++---------
 .../Pages/Material/Rekap/Material_RPM.vue     | 102 ++++--------------
 .../MonalisaGR_DispatchingTimeGangguan.vue    |  86 +++++++--------
 .../Gangguan/Rekap/MonalisaGR_ENSGangguan.vue |  86 +++++++--------
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue |  86 +++++++--------
 .../MonalisaGR_GangguanPerJenisGangguan.vue   |  87 +++++++--------
 .../MonalisaGR_JumlahDDRPTRCTGangguan.vue     |  87 +++++++--------
 .../Rekap/MonalisaGR_JumlahKaliGangguan.vue   |  85 +++++++--------
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  |  86 +++++++--------
 .../Rekap/MonalisaGR_RecoveryTimeGangguan.vue |  86 +++++++--------
 .../Rekap/MonalisaGR_ResponseTimeGangguan.vue |  86 +++++++--------
 .../MonalisaKR_GangguanPerJenisKeluhan.vue    |  86 +++++++--------
 .../MonalisaKR_JumlahDDRPTRCTKeluhan.vue      |  86 +++++++--------
 .../Rekap/MonalisaKR_JumlahKaliKeluhan.vue    |  86 +++++++--------
 .../Rekap/MonalisaKR_KeluhanBelumSelesai.vue  |  86 +++++++--------
 .../Rekap/MonalisaKR_LaporUlangKeluhan.vue    |  86 +++++++--------
 .../Rekap/MonalisaKR_RecoveryTimeKeluhan.vue  |  86 +++++++--------
 .../Rekap/MonalisaKR_ResponseTimeKeluhan.vue  |  86 +++++++--------
 .../Bulanan/MonalisaLB_AgingComplaint.vue     |  86 +++++++--------
 .../Bulanan/MonalisaLB_EnergyNotSales.vue     |  86 +++++++--------
 .../Bulanan/MonalisaLB_KADDalamPelaporan.vue  |  52 ++++-----
 .../MonalisaLB_PenurunanJumlahKomplain.vue    |  86 +++++++--------
 .../Kumulatif/MonalisaLK_AgingComplaint.vue   |  86 +++++++--------
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   |  86 +++++++--------
 .../Kumulatif/MonalisaLK_KDADPelaporan.vue    |  87 ++++++++-------
 .../MonalisaLK_PenurunanJumlahKomplain.vue    |  86 +++++++--------
 .../Pages/PencarianData/PencarianData.vue     |  66 ++++++------
 src/utils/api/api.graphql.ts                  |  87 +++++++++++++++
 28 files changed, 1137 insertions(+), 1226 deletions(-)

diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 8146853..8b6e500 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -152,51 +152,19 @@ 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 filterData = async (params: any) => {
   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 +174,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..d066976 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -112,78 +112,18 @@ 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 filterData = async (params: any) => {
   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 +133,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..8675386 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -227,7 +227,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 +283,39 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +331,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..4392e5b 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -209,7 +209,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 +236,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +244,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 +299,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -316,24 +315,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..414653a 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -453,7 +453,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 +483,36 @@ const closeDialog = () => {
   dialogDetail.value = false
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 = {
+    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
+  }
 
-  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,7 +544,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -561,24 +560,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_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 3d5031c..ff912e3 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -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,32 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +244,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 +260,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..9ba6182 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -385,7 +385,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 +407,34 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +465,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 +481,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_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 04511e0..183b223 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,7 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +364,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 +406,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..27792ae 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -276,7 +276,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 +303,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +311,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 +364,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
 
@@ -381,24 +380,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_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 6000ec8..ba10b25 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -227,7 +227,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 +254,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +262,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 +316,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 +332,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..cb1236c 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -227,7 +227,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 +254,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +262,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 +316,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 +332,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..553ad85 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -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,36 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..57f40f8 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -376,7 +376,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 +426,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 +442,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 +483,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..363826e 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -282,7 +282,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 +338,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +346,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 +388,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..96e04e2 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -173,7 +173,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 +223,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 +239,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 +280,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..05e0dd1 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -277,7 +277,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 +331,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 +347,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 +388,7 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +396,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..8bc9d24 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -301,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'
@@ -357,7 +357,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +365,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 +407,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..21a988f 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -302,7 +302,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 +354,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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 +362,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 +404,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..1b60842 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -664,7 +664,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 +720,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -736,24 +736,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 +777,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..3ae276d 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -278,7 +278,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 +331,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 +347,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 +388,36 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..4aaa665 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -290,7 +290,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 +353,39 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   clearSelection()
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..4a9c960 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -989,7 +989,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 +1044,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -1060,24 +1060,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 +1101,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..241565a 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -362,7 +362,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 +409,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 +425,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 +465,35 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSubSelected.value = data
 }
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..3a855de 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -278,7 +278,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 +331,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 +347,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 +388,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..82cbfd9 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -290,7 +290,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 +343,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 +359,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 +400,40 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..231aa19 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -738,7 +738,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 +790,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 +806,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 +847,37 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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..85d159f 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -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,49 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   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/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 54c7e38..1e9b312 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -3035,5 +3035,92 @@ export const queries = {
         }
       }
     `
+  },
+  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
+          }
+        }
+      `
+    }
   }
 }