diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 2970ee6..e65320b 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -177,52 +177,16 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA = gql`
-  query daftarGangguanBerdasarkanMedia(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-    $media: String!
-  ) {
-    daftarGangguanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      media: $media
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      nama_posko
-      status_akhir
-      waktu_media
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-      keterangan_media
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_BERDASARKAN_MEDIA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 35f2ea3..2f65178 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -356,7 +356,7 @@ import { Workbook } from 'exceljs'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#dataTable' }
 const showIndicator = ref(true)
@@ -464,37 +464,6 @@ const onExporting = (e: any) => {
   }
 }
 
-const GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN = gql`
-  query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
-    daftarGangguanDialihkanKePoskoLain(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      pembuat_laporan
-      durasi_recovery_time
-      durasi_response_time
-      waktu_lapor
-      waktu_dialihkan
-      waktu_recovery
-      waktu_response
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      nama_posko_lama
-      nama_posko_baru
-      status_akhir
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
@@ -522,7 +491,7 @@ const filterData = (params: any) => {
   })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-  GET_GANGGUAN_DATA_DI_ALIHAN_KE_POSKO_LAIN,
+  queries.gangguan.daftar.dataDialihkanKePoskoLain,
   {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index a5640fc..d2adfea 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -177,49 +177,17 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT = gql`
-  query daftarGangguanDiselesaikanMobileAPKT(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarGangguanDiselesaikanMobileAPKT(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      nama_posko
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
 const { onResult, onError, loading, refetch } = useQuery(
-  GET_DAFTAR_GANGGUAN_DI_SELESAIKAN_MOBILE_APKT,
+  queries.gangguan.daftar.diselesaikanMobileAPKT,
   {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index f1fed51..8fd0b4f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -308,7 +308,7 @@ import {
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -332,45 +332,7 @@ const closeDetail = () => {
   showDetail.value = false
 }
 
-const GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI = gql`
-  query gangguan(
-    $minJmlLapor: Int!
-    $maxJmlLapor: Int!
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarGangguanMelaporLebihDariSatuKali(
-      minJmlLapor: $minJmlLapor
-      maxJmlLapor: $maxJmlLapor
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      pembuat_laporan
-      durasi_response_time
-      durasi_recovery_time
-      idpel_nometer
-      jumlah_lapor
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-      nama_posko
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_GANGGUAN_MELAPOR_LEBIHDARI_SATU_KALI, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.melaporLebihDariSatuKali, {
   minJmlLapor: 1,
   maxJmlLapor: 1,
   dateFrom: new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index a6d935a..2a7ec21 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -201,7 +201,7 @@ import {
   DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -237,45 +237,8 @@ const filterData = (params: any) => {
   })
 }
 
-const GET_DAFTAR_GANGGUAN_RECOVERY_TIME = gql`
-  query daftarGangguanRecoveryTime(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $minDurasiRecoveryTime: Int!
-    $maxDurasiRecoveryTime: Int!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarGangguanRecoveryTime(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      minDurasiRecoveryTime: $minDurasiRecoveryTime
-      maxDurasiRecoveryTime: $maxDurasiRecoveryTime
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      referensi_marking
-      no_telp_pelapor
-      nama_posko
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RECOVERY_TIME, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   minDurasiRecoveryTime: 1, //menit
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 112696b..e191ca7 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -314,7 +314,7 @@ import {
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -365,47 +365,7 @@ const filterData = (params: any) => {
   })
 }
 
-const GET_DAFTAR_GANGGUAN_RESPONSE_TIME = gql`
-  query daftarGangguanResponseTime(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $minDurasiResponseTime: Int!
-    $maxDurasiResponseTime: Int!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarGangguanResponseTime(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      minDurasiResponseTime: $minDurasiResponseTime
-      maxDurasiResponseTime: $maxDurasiResponseTime
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      penyebab
-      referensi_marking
-      tindakan
-      nama_pelapor
-      is_marking
-      no_laporan
-      no_telp_pelapor
-      nama_posko
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_GANGGUAN_RESPONSE_TIME, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.responseTime, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   minDurasiResponseTime: 1, //menit
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 563c5a2..c22f006 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -176,48 +176,16 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_SELESAI_TANPA_ID_PELANGGAN = gql`
-  query daftarGangguanSelesaiTanpaIdPelanggan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarGangguanSelesaiTanpaIdPelanggan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      nama_posko
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_SELESAI_TANPA_ID_PELANGGAN, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.selesaiTanpaIDPelanggan, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 2acc405..326f9bd 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -285,55 +285,16 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_ALL = gql`
-  query rekapitulasiAllGangguan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiAllGangguan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      avg_durasi_dispatch
-      avg_durasi_recovery
-      avg_durasi_response
-      max_durasi_dispatch
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_dispatch
-      min_durasi_recovery
-      min_durasi_response
-      persen_inproses
-      persen_selesai
-      nama_posko
-      total
-      total_diatas_sla_dispatch
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_dispatch
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
-      total_selesai
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALL, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAll, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index cad7fa1..bef4c2d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -131,7 +131,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -171,34 +171,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-  query rekapitulasiGangguanAlihPosko(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanAlihPosko(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      id_posko
-      id_uid
-      id_up3
-      nama_posko
-      nama_uid
-      nama_up3
-      posko_in
-      posko_out
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAlihPosko, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 952e6ed..5ab0abf 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -87,7 +87,7 @@
         </p>
       </template>
       <template #title-header="{ data }">
-        <p class="text-center w-full">
+        <p class="w-full text-center">
           {{ data.column.caption }}
         </p>
       </template>
@@ -140,7 +140,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -181,59 +181,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
-  query rekapitulasiGangguanBerdasarkanMedia(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      media
-      total
-      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(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.berdasarkanMedia, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 39e75a5..8921cc0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -174,7 +174,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -214,40 +214,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-  query rekapitulasiGangguanCleansingTransaksiTM(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanCleansingTransaksiTM(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      agustus
-      april
-      desember
-      februari
-      januari
-      juli
-      juni
-      maret
-      mei
-      november
-      oktober
-      september
-      uid
-      ulp
-      up3
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.rekapGangguanAlihPosko, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 8617dff..942ea25 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -319,7 +319,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -338,7 +338,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -377,49 +377,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT = gql`
-  query rekapitulasiGangguanDiselesaikanMobileAPKT(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanDiselesaikanMobileAPKT(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      avg_waktu_recovery_mobile_marking
-      avg_waktu_recovery_mobile_nonmarking
-      avg_waktu_recovery_nonmobile_marking
-      avg_waktu_recovery_nonmobile_nonmarking
-      avg_waktu_response_mobile_marking
-      avg_waktu_response_mobile_nonmarking
-      avg_waktu_response_nonmobile_marking
-      avg_waktu_response_nonmobile_nonmarking
-      kode_regu
-      persen_belum_selesai
-      persen_laporan_mobile_marking
-      persen_laporan_mobile_nonmarking
-      persen_laporan_nonmobile_marking
-      persen_laporan_nonmobile_nonmarking
-      persen_selesai
-      regu
-      total_belum_selesai
-      total_laporan
-      total_laporan_mobile_marking
-      total_laporan_mobile_nonmarking
-      total_laporan_nonmobile_marking
-      total_laporan_nonmobile_nonmarking
-      total_selesai
-    }
-  }
-`
 const { onResult, onError, loading, refetch } = useQuery(
-  GET_REKAPITULASI_GANGGUAN_DISELESAIKAN_MOBILE_APKT,
+  queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT,
   {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 9d757ee..ed7ab6b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -374,8 +374,8 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -383,46 +383,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const dataReal = ref<any[]>([])
 
-const GET_REKAP_JENIS_GANGGUAN = gql`
-  query rekapitulasiPerJenisGangguan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiPerJenisGangguan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      sub_kelompok
-      avg_durasi_recovery
-      avg_durasi_response
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_recovery
-      min_durasi_response
-      persen_inproses
-      persen_selesai
-      tipe_permasalahan
-      total
-      kode
-      total_durasi_recovery
-      total_durasi_response
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
-      total_selesai
-    }
-  }
-`
-
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguan, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: '',
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 822fb9b..b13a522 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -256,50 +256,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag'
 
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_REKAP_JENIS_GANGGUAN_SE004 = gql`
-  query rekapitulasiJenisGangguanSE004(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiJenisGangguanSE004(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      sub_kelompok
-      total
-      selesai
-      persen_selesai
-      in_process
-      persen_in_process
-      total_durasi_response
-      avg_waktu_response_time
-      max_durasi_response
-      min_durasi_response
-      diatas_sla_durasi_response
-      dibawah_sla_durasi_response
-      total_durasi_recovery
-      avg_waktu_recovery_time
-      max_durasi_recovery
-      min_durasi_recovery
-      diatas_sla_durasi_recovery
-      dibawah_sla_durasi_recovery
-    }
-  }
-`
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -330,7 +294,7 @@ const onExporting = (e: any) => {
   }
 }
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguanSE004, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index c5e7819..6a96de3 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -156,8 +156,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type18 from '@/components/Form/FiltersType/Type18.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -175,7 +174,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -215,41 +214,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL = gql`
-  query rekapitulasiGangguanKoreksiTransaksiIndividual(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanKoreksiTransaksiIndividual(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      agustus
-      april
-      desember
-      februari
-      januari
-      juli
-      juni
-      maret
-      mei
-      november
-      oktober
-      september
-      uid
-      ulp
-      up3
-    }
-  }
-`
 const { onResult, onError, loading, refetch } = useQuery(
-  GET_REKAPITULASI_GANGGUAN_KOREKSI_TRANSAKSI_INDIVIDUAL,
+  queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
   {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 9ee78ee..6671fe3 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -476,51 +476,14 @@ import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
-import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_PER_POSKO = gql`
-  query rekapitulasiGangguanPerPosko(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanPerPosko(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      avg_durasi_recovery
-      avg_durasi_response
-      id_posko
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_recovery
-      min_durasi_response
-      nama_posko
-      persen_inproses
-      persen_selesai
-      total
-      total_durasi_recovery
-      total_durasi_response
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
-      total_selesai
-    }
-  }
-`
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -556,7 +519,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_POSKO, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerPosko, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index e7d8e5c..761a8c1 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -376,51 +376,13 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_PER_REGU = gql`
-  query rekapitulasiGangguanPerRegu(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanPerRegu(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      kode_regu
-      nama_regu
-      avg_durasi_recovery
-      avg_durasi_response
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_recovery
-      min_durasi_response
-      persen_inproses
-      persen_selesai
-      nama_posko
-      total
-      total_durasi_recovery
-      total_durasi_response
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
-      total_selesai
-    }
-  }
-`
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -456,7 +418,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_REGU, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index eaee884..721ad44 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -254,7 +254,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -295,47 +295,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_PER_TANGGAL = gql`
-  query rekapitulasiGangguanPerTanggal(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanPerTanggal(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      id_uid
-      nama_uid
-      nama_posko
-      avg_durasi_recovery
-      avg_durasi_response
-      max_durasi_recovery
-      max_durasi_response
-      min_durasi_recovery
-      min_durasi_response
-      persen_inproses
-      persen_selesai
-      tanggal
-      total
-      total_durasi_response
-      total_durasi_recovery
-      total_diatas_sla_recovery
-      total_diatas_sla_response
-      total_dibawah_sla_recovery
-      total_dibawah_sla_response
-      total_inproses
-      total_selesai
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerTanggal, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index aec08ed..6729405 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -198,7 +198,6 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -210,15 +209,14 @@ import {
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import type { Rekap1 } from '@/types/gangguan'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -288,44 +286,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO = gql`
-  query rekapitulasiGangguanRatingPerPosko(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanRatingPerPosko(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      in_process
-      indeks_rating
-      jumlah_non_rating
-      jumlah_rating
-      nama_posko
-      persen_in_process
-      persen_non_rating
-      persen_rating
-      persen_selesai
-      rating_1
-      rating_2
-      rating_3
-      rating_4
-      rating_5
-      regu
-      selesai
-      total
-    }
-  }
-`
 
 const { onResult, onError, loading, refetch } = useQuery(
-  GET_REKAPITULASI_GANGGUAN_RATING_PER_POSKO,
+  queries.gangguan.rekap.gangguanRatingPerPosko,
   {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 81e2301..33ac253 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -198,8 +198,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -217,7 +216,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -257,42 +256,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_GANGGUAN_ALIH_POSKO = gql`
-  query rekapitulasiGangguanRatingPerRegu(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanRatingPerRegu(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      in_process
-      indeks_rating
-      jumlah_non_rating
-      jumlah_rating
-      nama_posko
-      persen_in_process
-      persen_non_rating
-      persen_rating
-      persen_selesai
-      rating_1
-      rating_2
-      rating_3
-      rating_4
-      rating_5
-      regu
-      selesai
-      total
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_ALIH_POSKO, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanRatingPerRegu, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: '',
diff --git a/src/utils/graphql.ts b/src/utils/graphql.ts
index 5a40a19..06fac45 100755
--- a/src/utils/graphql.ts
+++ b/src/utils/graphql.ts
@@ -23,6 +23,739 @@ export const apolloClient = () => {
 }
 
 export const queries = {
+  gangguan:{
+    rekap: {
+      gangguanRatingPerRegu: gql`
+        query rekapitulasiGangguanRatingPerRegu(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanRatingPerRegu(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            in_process
+            indeks_rating
+            jumlah_non_rating
+            jumlah_rating
+            nama_posko
+            persen_in_process
+            persen_non_rating
+            persen_rating
+            persen_selesai
+            rating_1
+            rating_2
+            rating_3
+            rating_4
+            rating_5
+            regu
+            selesai
+            total
+          }
+        }
+      `,
+      gangguanRatingPerPosko : gql`
+        query rekapitulasiGangguanRatingPerPosko(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanRatingPerPosko(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            in_process
+            indeks_rating
+            jumlah_non_rating
+            jumlah_rating
+            nama_posko
+            persen_in_process
+            persen_non_rating
+            persen_rating
+            persen_selesai
+            rating_1
+            rating_2
+            rating_3
+            rating_4
+            rating_5
+            regu
+            selesai
+            total
+          }
+        }
+      `,
+      gangguanPerTanggal: gql`
+        query rekapitulasiGangguanPerTanggal(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanPerTanggal(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_uid
+            nama_uid
+            nama_posko
+            avg_durasi_recovery
+            avg_durasi_response
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_recovery
+            min_durasi_response
+            persen_inproses
+            persen_selesai
+            tanggal
+            total
+            total_durasi_response
+            total_durasi_recovery
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+          }
+        }
+      `,
+      gangguanPerRegu: gql`
+        query rekapitulasiGangguanPerRegu(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanPerRegu(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            kode_regu
+            nama_regu
+            avg_durasi_recovery
+            avg_durasi_response
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_recovery
+            min_durasi_response
+            persen_inproses
+            persen_selesai
+            nama_posko
+            total
+            total_durasi_recovery
+            total_durasi_response
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+          }
+        }
+      `,
+      gangguanPerPosko: gql`
+        query rekapitulasiGangguanPerPosko(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanPerPosko(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            avg_durasi_recovery
+            avg_durasi_response
+            id_posko
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_recovery
+            min_durasi_response
+            nama_posko
+            persen_inproses
+            persen_selesai
+            total
+            total_durasi_recovery
+            total_durasi_response
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+          }
+        }
+      `,
+      gangguanKoreksiTransaksiIndividual: gql`
+        query rekapitulasiGangguanKoreksiTransaksiIndividual(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanKoreksiTransaksiIndividual(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            agustus
+            april
+            desember
+            februari
+            januari
+            juli
+            juni
+            maret
+            mei
+            november
+            oktober
+            september
+            uid
+            ulp
+            up3
+          }
+        }
+      `,
+      jenisGangguanSE004: gql`
+        query rekapitulasiJenisGangguanSE004(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiJenisGangguanSE004(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            sub_kelompok
+            total
+            selesai
+            persen_selesai
+            in_process
+            persen_in_process
+            total_durasi_response
+            avg_waktu_response_time
+            max_durasi_response
+            min_durasi_response
+            diatas_sla_durasi_response
+            dibawah_sla_durasi_response
+            total_durasi_recovery
+            avg_waktu_recovery_time
+            max_durasi_recovery
+            min_durasi_recovery
+            diatas_sla_durasi_recovery
+            dibawah_sla_durasi_recovery
+          }
+        }
+      `,
+      jenisGangguan: gql`
+        query rekapitulasiPerJenisGangguan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiPerJenisGangguan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            sub_kelompok
+            avg_durasi_recovery
+            avg_durasi_response
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_recovery
+            min_durasi_response
+            persen_inproses
+            persen_selesai
+            tipe_permasalahan
+            total
+            kode
+            total_durasi_recovery
+            total_durasi_response
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+          }
+        }
+      `,
+      gangguanDiselesaikanMobileAPKT: gql`
+        query rekapitulasiGangguanDiselesaikanMobileAPKT(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanDiselesaikanMobileAPKT(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            avg_waktu_recovery_mobile_marking
+            avg_waktu_recovery_mobile_nonmarking
+            avg_waktu_recovery_nonmobile_marking
+            avg_waktu_recovery_nonmobile_nonmarking
+            avg_waktu_response_mobile_marking
+            avg_waktu_response_mobile_nonmarking
+            avg_waktu_response_nonmobile_marking
+            avg_waktu_response_nonmobile_nonmarking
+            kode_regu
+            persen_belum_selesai
+            persen_laporan_mobile_marking
+            persen_laporan_mobile_nonmarking
+            persen_laporan_nonmobile_marking
+            persen_laporan_nonmobile_nonmarking
+            persen_selesai
+            regu
+            total_belum_selesai
+            total_laporan
+            total_laporan_mobile_marking
+            total_laporan_mobile_nonmarking
+            total_laporan_nonmobile_marking
+            total_laporan_nonmobile_nonmarking
+            total_selesai
+          }
+        }
+      `,
+      rekapGangguanAlihPosko: gql`
+        query rekapitulasiGangguanCleansingTransaksiTM(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanCleansingTransaksiTM(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            agustus
+            april
+            desember
+            februari
+            januari
+            juli
+            juni
+            maret
+            mei
+            november
+            oktober
+            september
+            uid
+            ulp
+            up3
+          }
+        }
+      `,
+      berdasarkanMedia: gql`
+        query rekapitulasiGangguanBerdasarkanMedia(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanBerdasarkanMedia(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            media
+            total
+            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
+          }
+        }
+      `,
+      gangguanAll: gql`
+        query rekapitulasiAllGangguan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiAllGangguan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            avg_durasi_dispatch
+            avg_durasi_recovery
+            avg_durasi_response
+            max_durasi_dispatch
+            max_durasi_recovery
+            max_durasi_response
+            min_durasi_dispatch
+            min_durasi_recovery
+            min_durasi_response
+            persen_inproses
+            persen_selesai
+            nama_posko
+            total
+            total_diatas_sla_dispatch
+            total_diatas_sla_recovery
+            total_diatas_sla_response
+            total_dibawah_sla_dispatch
+            total_dibawah_sla_recovery
+            total_dibawah_sla_response
+            total_inproses
+            total_selesai
+          }
+        }
+      `,
+      gangguanAlihPosko: gql`
+        query rekapitulasiGangguanAlihPosko(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiGangguanAlihPosko(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_posko
+            id_uid
+            id_up3
+            nama_posko
+            nama_uid
+            nama_up3
+            posko_in
+            posko_out
+          }
+        }
+      `,
+    },
+    daftar: {
+      selesaiTanpaIDPelanggan: gql`
+        query daftarGangguanSelesaiTanpaIdPelanggan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarGangguanSelesaiTanpaIdPelanggan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            nama_posko
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      responseTime: gql`
+        query daftarGangguanResponseTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $minDurasiResponseTime: Int!
+          $maxDurasiResponseTime: Int!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarGangguanResponseTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minDurasiResponseTime: $minDurasiResponseTime
+            maxDurasiResponseTime: $maxDurasiResponseTime
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            penyebab
+            referensi_marking
+            tindakan
+            nama_pelapor
+            is_marking
+            no_laporan
+            no_telp_pelapor
+            nama_posko
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      recoveryTime: gql`
+        query daftarGangguanRecoveryTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $minDurasiRecoveryTime: Int!
+          $maxDurasiRecoveryTime: Int!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarGangguanRecoveryTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minDurasiRecoveryTime: $minDurasiRecoveryTime
+            maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            no_laporan
+            referensi_marking
+            no_telp_pelapor
+            nama_posko
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      melaporLebihDariSatuKali: gql`
+        query gangguan(
+          $minJmlLapor: Int!
+          $maxJmlLapor: Int!
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarGangguanMelaporLebihDariSatuKali(
+            minJmlLapor: $minJmlLapor
+            maxJmlLapor: $maxJmlLapor
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            pembuat_laporan
+            durasi_response_time
+            durasi_recovery_time
+            idpel_nometer
+            jumlah_lapor
+            keterangan_pelapor
+            media
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+            nama_posko
+          }
+        }
+      `,
+      diselesaikanMobileAPKT: gql`
+        query daftarGangguanDiselesaikanMobileAPKT(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarGangguanDiselesaikanMobileAPKT(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            nama_posko
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      dataDialihkanKePoskoLain: gql`
+        query DaftarGangguan($dateFrom: Date!, $dateTo: Date!, $posko: Int, $idUid: Int, $idUp3: Int) {
+          daftarGangguanDialihkanKePoskoLain(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            pembuat_laporan
+            durasi_recovery_time
+            durasi_response_time
+            waktu_lapor
+            waktu_dialihkan
+            waktu_recovery
+            waktu_response
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            nama_posko_lama
+            nama_posko_baru
+            status_akhir
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      berdasarkanMedia: gql`
+        query daftarGangguanBerdasarkanMedia(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String!
+        ) {
+          daftarGangguanBerdasarkanMedia(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            nama_posko
+            status_akhir
+            waktu_media
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+            keterangan_media
+          }
+        }
+      `
+    },
+  },
   monalisa: {
     gangguan: {
       rekap: {