Refactor GraphQL queries in Keluhan Daftar components

src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue

@@ -313,7 +313,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)
@@ -365,41 +365,8 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query daftarKeluhanBerdasarkanMedia(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      keterangan_pelapor
-      media
-      waktu_media
-      keterangan_media
-      waktu_lapor
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      nama_ulp
-      status_akhir
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanBerdasarkanMedia, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -193,7 +193,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)
@@ -235,45 +235,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
-  query daftarKeluhanDialihkanKeUnitLain(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanDialihkanKeUnitLain(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_unit_baru
-      id_unit_lama
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      nama_unit_baru
-      nama_unit_lama
-      no_laporan
-      no_telp_pelapor
-      pembuat_laporan
-      status_akhir
-      waktu_dialihkan
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 const { onResult, onError, loading, refetch } = useQuery(
-  GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN,
+  queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain,
   {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue

@@ -319,7 +319,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)
@@ -371,45 +371,8 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query daftarKeluhanMelaporLebihDariSatuKali(
-    $minJmlLapor: Int!
-    $maxJmlLapor: Int!
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanMelaporLebihDariSatuKali(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      minJmlLapor: $minJmlLapor
-      maxJmlLapor: $maxJmlLapor
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      jumlah_lapor
-      keterangan_pelapor
-      media
-      nama_pelapor
-      nama_ulp
-      no_laporan
-      no_telp_pelapor
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, {
   minJmlLapor: 1,
   maxJmlLapor: 100,
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),

src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue

@@ -299,7 +299,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)
@@ -351,44 +351,8 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query daftarKeluhanRecoveryTime(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $minDurasiRecoveryTime: Int!
-    $maxDurasiRecoveryTime: Int!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanRecoveryTime(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      minDurasiRecoveryTime: $minDurasiRecoveryTime
-      maxDurasiRecoveryTime: $maxDurasiRecoveryTime
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      nama_ulp
-      no_laporan
-      no_telp_pelapor
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanRecoveryTime, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   minDurasiRecoveryTime: 0,

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -299,7 +299,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)
@@ -351,44 +351,8 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query daftarKeluhanResponseTime(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $minDurasiResponseTime: Int!
-    $maxDurasiResponseTime: Int!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanResponseTime(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      minDurasiResponseTime: $minDurasiResponseTime
-      maxDurasiResponseTime: $maxDurasiResponseTime
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      nama_ulp
-      no_laporan
-      no_telp_pelapor
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanResponseTime, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   minDurasiResponseTime: 0,

src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue

@@ -306,7 +306,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)
@@ -358,40 +358,8 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query daftarKeluhanSelesaiTanpaIdPelanggan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanSelesaiTanpaIdPelanggan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_ulp
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      status_akhir
-      waktu_lapor
-      waktu_recovery
-      waktu_response
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -193,7 +193,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)
@@ -234,41 +234,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query daftarKeluhanDiselesaikanCC123(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    daftarKeluhanDiselesaikanCC123(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      alamat_pelapor
-      idpel_nometer
-      jumlah_lapor
-      pembuat_laporan
-      keterangan_pelapor
-      media
-      nama_uid
-      nama_ulp
-      nama_pelapor
-      no_laporan
-      nama_issuetype
-      nama_subissuetype
-      no_telp_pelapor
-      status_akhir
-      waktu_recovery
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanDiselesaikanCC123, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -343,15 +343,13 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
+  DxLoadPanel, DxPaging,
-  DxPager,
-  DxPaging,
   DxScrolling,
   DxSearchPanel,
   DxSelection
@@ -362,8 +360,8 @@ 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -421,43 +419,8 @@ const onExporting = (e: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query rekapitulasiKeluhanAll(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanAll(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      id_ulp
-      nama_ulp
-      total
-      total_selesai
-      persen_selesai
-      total_inproses
-      persen_inproses
-      avg_durasi_response
-      min_durasi_response
-      max_durasi_response
-      total_dibawah_sla_response
-      total_diatas_sla_response
-      avg_durasi_recovery
-      min_durasi_recovery
-      max_durasi_recovery
-      total_dibawah_sla_recovery
-      total_diatas_sla_recovery
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanAll, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue

@@ -122,7 +122,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)
@@ -162,57 +162,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.rekapKeluhanBerdasarkanMedia, {
-  query rekapitulasiKeluhanBerdasarkanMedia(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      media
-      tgl1
-      tgl10
-      tgl11
-      tgl12
-      tgl13
-      tgl14
-      tgl15
-      tgl16
-      tgl17
-      tgl18
-      tgl19
-      tgl2
-      tgl20
-      tgl21
-      tgl22
-      tgl23
-      tgl24
-      tgl25
-      tgl26
-      tgl27
-      tgl28
-      tgl29
-      tgl3
-      tgl30
-      tgl31
-      tgl4
-      tgl5
-      tgl6
-      tgl7
-      tgl8
-      tgl9
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -384,7 +384,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)
@@ -425,42 +425,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      fungsi_bidang
-      total
-      total_durasi_response
-      total_durasi_recovery
-      total_selesai
-      persen_selesai
-      total_inproses
-      persen_inproses
-      avg_durasi_response
-      min_durasi_response
-      max_durasi_response
-      total_dibawah_sla_response
-      total_diatas_sla_response
-      avg_durasi_recovery
-      min_durasi_recovery
-      max_durasi_recovery
-      total_dibawah_sla_recovery
-      total_diatas_sla_recovery
-    }
-  }
-`
 // const GET_DATA = gql`
 //   query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
 //     $dateFrom: Date!
@@ -499,7 +463,7 @@ const GET_DATA = gql`
 //     }
 //   }
 // `
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue

@@ -506,7 +506,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)
@@ -546,44 +546,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query rekapitulasiKeluhanPerJenisKeluhan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanPerJenisKeluhan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      tipe_keluhan
-      total
-      total_selesai
-      persen_selesai
-      total_inproses
-      persen_inproses
-      avg_durasi_response
-      min_durasi_response
-      max_durasi_response
-      total_durasi_response
-      total_durasi_recovery
-      total_dibawah_sla_response
-      total_diatas_sla_response
-      avg_durasi_recovery
-      min_durasi_recovery
-      max_durasi_recovery
-      total_dibawah_sla_recovery
-      total_diatas_sla_recovery
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerJenisKeluhan, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -384,7 +384,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)
@@ -424,42 +424,6 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
-  query rekapitulasiKeluhanPerKelompokKeluhan(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanPerKelompokKeluhan(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      kelompok
-      total
-      total_selesai
-      persen_selesai
-      total_inproses
-      persen_inproses
-      avg_durasi_response
-      min_durasi_response
-      max_durasi_response
-      total_durasi_recovery
-      total_durasi_response
-      total_dibawah_sla_response
-      total_diatas_sla_response
-      avg_durasi_recovery
-      min_durasi_recovery
-      max_durasi_recovery
-      total_dibawah_sla_recovery
-      total_diatas_sla_recovery
-    }
-  }
-`
 // const GET_DATA = gql`
 //   query rekapitulasiKeluhanPerKelompokKeluhan(
 //     $dateFrom: Date!
@@ -498,7 +462,7 @@ const GET_DATA = gql`
 //     }
 //   }
 // `
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerKelompokKeluhan, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue

@@ -383,7 +383,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)
@@ -424,45 +424,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerTanggal, {
-  query rekapitulasiKeluhanPerTanggal(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanPerTanggal(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      id_uid
-      nama_uid
-      tanggal_lapor
-      total
-      total_durasi_response
-      total_durasi_recovery
-      total_selesai
-      persen_selesai
-      total_inproses
-      persen_inproses
-      avg_durasi_response
-      min_durasi_response
-      max_durasi_response
-      total_dibawah_sla_response
-      total_diatas_sla_response
-      avg_durasi_recovery
-      min_durasi_recovery
-      max_durasi_recovery
-      total_dibawah_sla_recovery
-      total_diatas_sla_recovery
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: '',

src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue

@@ -512,7 +512,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)
@@ -553,44 +553,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerUnit, {
-  query rekapitulasiKeluhanPerUnit(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanPerUnit(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      id_ulp
-      nama_ulp
-      total
-      total_selesai
-      persen_selesai
-      total_inproses
-      persen_inproses
-      total_durasi_response
-      total_durasi_recovery
-      avg_durasi_response
-      min_durasi_response
-      max_durasi_response
-      total_dibawah_sla_response
-      total_diatas_sla_response
-      avg_durasi_recovery
-      min_durasi_recovery
-      max_durasi_recovery
-      total_dibawah_sla_recovery
-      total_diatas_sla_recovery
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue

@@ -70,8 +70,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type8 from '@/components/Form/FiltersType/Type8.vue'
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -89,7 +88,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)
@@ -129,42 +128,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DATA = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.rekap.keluhanPerRatingUnit, {
-  query rekapitulasiKeluhanRatingPerUnit(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $idUlp: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiKeluhanRatingPerUnit(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      in_process
-      indeks_rating
-      jumlah_non_rating
-      jumlah_rating
-      nama_idUlp
-      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_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   idUlp: 0,

src/utils/graphql.ts

@@ -23,6 +23,559 @@ export const apolloClient = () => {
 }
 
 export const queries = {
+  keluhan:{
+    daftar: {
+      keluhanSelesaiTanpaIDPelanggan: gql`
+        query daftarKeluhanSelesaiTanpaIdPelanggan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanSelesaiTanpaIdPelanggan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_ulp
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      keluhanDiselesaikanCC123: gql`
+        query daftarKeluhanDiselesaikanCC123(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanDiselesaikanCC123(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            idpel_nometer
+            jumlah_lapor
+            pembuat_laporan
+            keterangan_pelapor
+            media
+            nama_uid
+            nama_ulp
+            nama_pelapor
+            no_laporan
+            nama_issuetype
+            nama_subissuetype
+            no_telp_pelapor
+            status_akhir
+            waktu_recovery
+          }
+        }
+      `,
+      keluhanResponseTime: gql`
+        query daftarKeluhanResponseTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $minDurasiResponseTime: Int!
+          $maxDurasiResponseTime: Int!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanResponseTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minDurasiResponseTime: $minDurasiResponseTime
+            maxDurasiResponseTime: $maxDurasiResponseTime
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            nama_ulp
+            no_laporan
+            no_telp_pelapor
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      keluhanRecoveryTime: gql`
+        query daftarKeluhanRecoveryTime(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $minDurasiRecoveryTime: Int!
+          $maxDurasiRecoveryTime: Int!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanRecoveryTime(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            minDurasiRecoveryTime: $minDurasiRecoveryTime
+            maxDurasiRecoveryTime: $maxDurasiRecoveryTime
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            nama_ulp
+            no_laporan
+            no_telp_pelapor
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      keluhanMelaporLebihDariSatuKali: gql`
+        query daftarKeluhanMelaporLebihDariSatuKali(
+          $minJmlLapor: Int!
+          $maxJmlLapor: Int!
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanMelaporLebihDariSatuKali(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            minJmlLapor: $minJmlLapor
+            maxJmlLapor: $maxJmlLapor
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            idpel_nometer
+            jumlah_lapor
+            keterangan_pelapor
+            media
+            nama_pelapor
+            nama_ulp
+            no_laporan
+            no_telp_pelapor
+            status_akhir
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      keluhanDipindahkanKeIDULPLain: gql`
+        query daftarKeluhanDialihkanKeUnitLain(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanDialihkanKeUnitLain(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            id_unit_baru
+            id_unit_lama
+            idpel_nometer
+            keterangan_pelapor
+            media
+            nama_pelapor
+            nama_unit_baru
+            nama_unit_lama
+            no_laporan
+            no_telp_pelapor
+            pembuat_laporan
+            status_akhir
+            waktu_dialihkan
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+      keluhanBerdasarkanMedia: gql`
+        query daftarKeluhanBerdasarkanMedia(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          daftarKeluhanBerdasarkanMedia(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            alamat_pelapor
+            durasi_recovery_time
+            durasi_response_time
+            keterangan_pelapor
+            media
+            waktu_media
+            keterangan_media
+            waktu_lapor
+            nama_pelapor
+            no_laporan
+            no_telp_pelapor
+            nama_ulp
+            status_akhir
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
+    },
+    rekap: {
+      keluhanPerRatingUnit: gql`
+        query rekapitulasiKeluhanRatingPerUnit(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanRatingPerUnit(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            in_process
+            indeks_rating
+            jumlah_non_rating
+            jumlah_rating
+            nama_idUlp
+            persen_in_process
+            persen_non_rating
+            persen_rating
+            persen_selesai
+            rating_1
+            rating_2
+            rating_3
+            rating_4
+            rating_5
+            regu
+            selesai
+            total
+          }
+        }
+      `,
+      keluhanPerUnit: gql`
+        query rekapitulasiKeluhanPerUnit(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPerUnit(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_ulp
+            nama_ulp
+            total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_durasi_response
+            total_durasi_recovery
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
+      keluhanPerTanggal :gql`
+        query rekapitulasiKeluhanPerTanggal(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPerTanggal(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_uid
+            nama_uid
+            tanggal_lapor
+            total
+            total_durasi_response
+            total_durasi_recovery
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
+      keluhanPerKelompokKeluhan: gql`
+        query rekapitulasiKeluhanPerKelompokKeluhan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPerKelompokKeluhan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            kelompok
+            total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_durasi_recovery
+            total_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
+      keluhanPerJenisKeluhan : gql`
+        query rekapitulasiKeluhanPerJenisKeluhan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPerJenisKeluhan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            tipe_keluhan
+            total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_durasi_response
+            total_durasi_recovery
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
+      keluhanPenyelesaianPerFungsiBIidang :gql`
+        query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            fungsi_bidang
+            total
+            total_durasi_response
+            total_durasi_recovery
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
+      rekapKeluhanBerdasarkanMedia: gql`
+        query rekapitulasiKeluhanBerdasarkanMedia(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanBerdasarkanMedia(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            media
+            tgl1
+            tgl10
+            tgl11
+            tgl12
+            tgl13
+            tgl14
+            tgl15
+            tgl16
+            tgl17
+            tgl18
+            tgl19
+            tgl2
+            tgl20
+            tgl21
+            tgl22
+            tgl23
+            tgl24
+            tgl25
+            tgl26
+            tgl27
+            tgl28
+            tgl29
+            tgl3
+            tgl30
+            tgl31
+            tgl4
+            tgl5
+            tgl6
+            tgl7
+            tgl8
+            tgl9
+          }
+        }
+      `,
+      rekapKeluhanAll: gql`
+        query rekapitulasiKeluhanAll(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          rekapitulasiKeluhanAll(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id_ulp
+            nama_ulp
+            total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+          }
+        }
+      `,
+    },
+  },
   gangguan:{
     rekap: {
       gangguanRatingPerRegu: gql`