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
+          }
+        }
+      `
+    }
   }
 }