Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -24,17 +24,17 @@
       <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
@@ -66,10 +66,11 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -105,81 +106,27 @@ const onExporting = (e: any) => {
   }
 }
 
-// const monalisaDispatchingTimeGangguan = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.dispatchingTimeGangguan, {
-//   query DaftarmonalisaDispatchingTimeGangguan(
-//     $regional: String
-//     $posko: Int
-//     $idUid: Int
-//     $idUp3: Int
-//     $bulan: Int
-//     $tahun: Int
-//   ) {
-//     monalisaDispatchingTimeGangguan(
-//       regional: $regional
-//       posko: $posko
-//       idUid: $idUid
-//       idUp3: $idUp3
-//       bulan: $bulan
-//       tahun: $tahun
-//     ) {
-//       jumlah_bulan
-//       jumlah_bulan_n_1
-//       jumlah_tahun
-//       jumlah_tahun_n_1
-//       nama_posko
-//       persen_bulan
-//       persen_tahun
-//     }
-//   }
-// `
-
-const monalisaDispatchingTimeGangguan = gql`
-  query DaftarmonalisaDispatchingTimeGangguan(
-    $idUid: Int
-    $idUp3: Int
-    $idUlp: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaDispatchingTimeGangguan(
-      idUid: $idUid
-      idUp3: $idUp3
-      idUlp: $idUlp
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_ulp
-      mom_bulan_ini
-      mom_bulan_kemarin
-      persen_mom
-      yoy_tahun_ini
-      yoy_tahun_kemarin
-      persen_yoy
-    }
-  }
-`
-
-const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeGangguan, {
   // regional: 0,
   idUp3: 0,
   idUid: 0,
   idUlp: 0,
-  bulan: bulanSekarang.value,
+  bulan: currentMonth.value,
-  tahun: tahunSekarang.value
+  tahun: currentYear.value
 })
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
+    bulan: bulan ? bulan.id : currentMonth.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue

@@ -16,25 +16,29 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
+          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
+          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
+      <template #percent="{ data }">
+        {{ data.text }}%
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -62,10 +66,11 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -73,40 +78,8 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const monalisaRekapitulasiEnsGangguan = gql`
+
-  query DaftarmonalisaRekapitulasiEnsGangguan(
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, {
-    #$regional: String
-    $idUlp: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaRekapitulasiEnsGangguan(
-      #regional: $regional
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_regional
-      id_uid
-      nama_uid
-      id_up3
-      nama_up3
-      id_ulp
-      nama_ulp
-      mom_bulan_ini
-      mom_bulan_kemarin
-      persen_mom
-      yoy_tahun_ini
-      yoy_tahun_kemarin
-      persen_yoy
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEnsGangguan, {
   bulan: 10,
   tahun: 2023,
   regional: '',
@@ -115,15 +88,15 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiEns
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, ulp, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     regional: regional,
     idUlp: ulp ? ulp.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -16,11 +16,11 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="gangguan" data-type="number" caption="Gangguan"
+        <DxColumn :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="informasi" data-type="number" caption="Informasi"
+        <DxColumn :width="150" alignment="center" data-field="jumlah_informasi" data-type="number" caption="Informasi"
           css-class="custom-table-column" />
         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
@@ -51,10 +51,11 @@ 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 tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -62,37 +63,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const monalisaGangguanBelumSelesai = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, {
-  query DaftarmonalisaGangguanBelumSelesai(
-    #$regional: String
-    $idUlp: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaGangguanBelumSelesai(
-      #regional: $regional
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_regional
-      id_uid
-      nama_uid
-      id_up3
-      nama_up3
-      id_ulp
-      nama_ulp
-      jumlah_gangguan
-      jumlah_informasi
-      total
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSelesai, {
   regional: '',
   idUlp: 0,
   idUid: 0,
@@ -102,9 +73,9 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanBelumSe
 })
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     regional: regional,
     idUlp: ulp ? ulp.id : 0,

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue

@@ -23,10 +23,12 @@
         css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
       <DxColumn :width="120" alignment="center" data-field="persen" caption="%" css-class="custom-table-column"
-        cell-template="percent" />
+        data-type="number" cell-template="percent" />
 
-      <template #percent="data">
+      <template #percent="{ data }">
-        {{ data.text }}%
+        <p class="cursor-pointer">
+          {{ data.text }}%
+        </p>
       </template>
     </DxDataGrid>
   </div>
@@ -54,9 +56,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
-const tahunSekarang = ref(new Date().getFullYear())
+import { queries } from '@/utils/graphql'
-const bulanSekarang = ref(new Date().getMonth())
+const currentYear = ref(new Date().getFullYear())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -64,31 +67,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const monalisaGangguanPerJenisGangguan = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan, {
-  query DaftarmonalisaGangguanPerJenisGangguan(
-    #$nama_regional: String
-    $idUid: Int
-    $idUp3: Int
-    $idUlp: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaGangguanPerJenisGangguan(
-      #nama_regional: $regional
-      idUid: $idUid
-      idUp3: $idUp3
-      idUlp: $idUlp
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      id_jenis_gangguan
-      nama_jenis_gangguan
-      jumlah
-      persen
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJenisGangguan, {
   bulan: 10,
   tahun: 2023,
   regional: '',

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue

@@ -16,7 +16,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Jumlah dan Durasi RPT & RCT Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" :caption="`${getMonthName(currentMonth)} ${currentYear}`"
           css-class="custom-table-column">
@@ -48,8 +48,8 @@
         <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${currentYear} `"
           css-class="custom-table-column">
           <DxColumn alignment="center" caption="Total RPT" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number"
-              css-class="custom-table-column" />
+              data-field="total_durasi_response_time_tahun_ini" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
             <DxColumn :width="150" alignment="center" caption="b" data-type="number"
@@ -60,8 +60,8 @@
               data-field="rpt_gangguan_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Total RCT" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number"
-              css-class="custom-table-column" />
+              data-field="total_durasi_recovery_time_tahun_ini" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="Jumlah Gangguan" css-class="custom-table-column">
             <DxColumn :width="150" alignment="center" caption="e" data-type="number"
@@ -100,6 +100,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
@@ -110,45 +111,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const monalisaJumlahDurasiRptRctGangguan = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan, {
-  query DaftarmonalisaJumlahDurasiRptRctGangguan(
-    #$regional: String
-    $idUlp: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaJumlahDurasiRptRctGangguan(
-      #regional: $regional
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      id_uid
-      nama_uid
-      id_up3
-      nama_up3
-      id_ulp
-      nama_ulp
-      total_durasi_response_time_bulan_ini
-      count_durasi_response_time_bulan_ini
-      avg_durasi_response_time_bulan_ini
-      total_durasi_recovery_time_bulan_ini
-      count_durasi_recovery_time_bulan_ini
-      avg_durasi_recovery_time_bulan_ini
-      total_durasi_response_time_tahun_ini
-      count_durasi_response_time_tahun_ini
-      avg_durasi_response_time_tahun_ini
-      total_durasi_recovery_time_tahun_ini
-      count_durasi_recovery_time_tahun_ini
-      avg_durasi_recovery_time_tahun_ini
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(monalisaJumlahDurasiRptRctGangguan, {
   bulan: 10,
   tahun: 2023,
   // regional: '',

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue

@@ -90,6 +90,7 @@ 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)
@@ -130,63 +131,7 @@ const tahunSekarang = ref(new Date().getFullYear())
 const bulanSekarang = ref(new Date().getMonth())
 const tahunLalu = ref(tahunSekarang.value - 1)
 
-// const MONALISAJUMLAHKALIGANGGUAN = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.jumlahKaliGangguan, {
-//   query DaftarMonalisaJumlahKaliGangguan(
-//     $regional: String
-//     $idUid: Int
-//     $idUp3: Int
-//     $idUlp: Int
-//     $bulan: Int
-//     $tahun: Int
-//   ) {
-//     monalisaJumlahKaliGangguan(
-//       regional: $regional
-//       idUid: $idUid
-//       idUp3: $idUp3
-//       $idUlp: $idUlp
-//       bulan: $bulan
-//       tahun: $tahun
-//     ) {
-//       jumlah_bulan
-//       jumlah_bulan_n_1
-//       jumlah_tahun
-//       jumlah_tahun_n_1
-//       nama_posko
-//       persen_bulan
-//       persen_tahun
-//     }
-//   }
-// `
-
-const MONALISAJUMLAHKALIGANGGUAN = gql`
-  query DaftarMonalisaJumlahKaliGangguan(
-    $idUid: Int
-    $idUp3: Int
-    $idUlp: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaJumlahKaliGangguan(
-      idUid: $idUid
-      idUp3: $idUp3
-      idUlp: $idUlp
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_uid
-      nama_up3
-      nama_ulp
-      mom_bulan_ini
-      mom_bulan_kemarin
-      persen_mom
-      yoy_tahun_ini
-      yoy_tahun_kemarin
-      persen_yoy
-    }
-  }
-`
-
-const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIGANGGUAN, {
   // regional: 0,
   idUp3: 0,
   idUid: 0,

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue

@@ -16,25 +16,29 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Lapor Ulang Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="jumlah_bulan_n_1" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_bulan" data-type="number" caption="%"
+          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="jumlah_tahun_n_1" data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_tahun" data-type="number" caption="%"
+          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            css-class="custom-table-column" />
+            css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
+      <template #percent="{ data }">
+        {{ data.text }}%
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -62,10 +66,11 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -73,40 +78,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const monalisaRekapitulasiLaporUlangGangguan = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.laporUlangGangguan, {
-  query DaftarmonalisaRekapitulasiLaporUlangGangguan(
-    #$regional: String
-    $idUlp: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaRekapitulasiLaporUlangGangguan(
-      #regional: $regional
-      idUlp: $idUlp
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_regional
-      id_uid
-      nama_uid
-      id_up3
-      nama_up3
-      id_ulp
-      nama_ulp
-      mom_bulan_ini
-      mom_bulan_kemarin
-      persen_mom
-      yoy_tahun_ini
-      yoy_tahun_kemarin
-      persen_yoy
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLaporUlangGangguan, {
   bulan: 10,
   tahun: 2023,
   regional: '',
@@ -116,9 +88,9 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
 })
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     regional: regional,
     idUlp: ulp ? ulp.id : 0,

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue

@@ -24,17 +24,17 @@
       <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
@@ -66,91 +66,38 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 
-// const monalisaRecoveryTimeGangguan = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.recoveryTimeGangguan, {
-//   query DaftarmonalisaRecoveryTimeGangguan(
-//     $regional: regional
-//     $posko: Int
-//     $idUid: Int
-//     $idUp3: Int
-//     $bulan: Int
-//     $tahun: Int
-//   ) {
-//     monalisaRecoveryTimeGangguan(
-//       regional: $regional
-//       posko: $posko
-//       idUid: $idUid
-//       idUp3: $idUp3
-//       bulan: $bulan
-//       tahun: $tahun
-//     ) {
-//       jumlah_bulan
-//       jumlah_bulan_n_1
-//       jumlah_tahun
-//       jumlah_tahun_n_1
-//       nama_posko
-//       persen_bulan
-//       persen_tahun
-//     }
-//   }
-// `
-
-const monalisaRecoveryTimeGangguan = gql`
-  query DaftarmonalisaRecoveryTimeGangguan(
-    $idUid: Int
-    $idUp3: Int
-    $idUlp: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaRecoveryTimeGangguan(
-      idUid: $idUid
-      idUp3: $idUp3
-      idUlp: $idUlp
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_ulp
-      mom_bulan_ini
-      mom_bulan_kemarin
-      persen_mom
-      yoy_tahun_ini
-      yoy_tahun_kemarin
-      persen_yoy
-    }
-  }
-`
-
-const { onResult, onError, loading, refetch } = useQuery(monalisaRecoveryTimeGangguan, {
   // regional: 0,
   idUp3: 0,
   idUid: 0,
   idUlp: 0,
-  bulan: bulanSekarang.value,
+  bulan: currentMonth.value,
-  tahun: tahunSekarang.value
+  tahun: currentYear.value
 })
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
+    bulan: bulan ? bulan.id : currentMonth.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue

@@ -24,17 +24,17 @@
       <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
@@ -66,95 +66,42 @@ import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 
-// const monalisaResponseTimeKeluhan = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.responseTimeGangguan, {
-//   query DaftarmonalisaResponseTimeKeluhan(
-//     $regional: String
-//     $posko: Int
-//     $idUid: Int
-//     $idUp3: Int
-//     $bulan: Int
-//     $tahun: Int
-//   ) {
-//     monalisaResponseTimeKeluhan(
-//       regional: $regional
-//       posko: $posko
-//       idUid: $idUid
-//       idUp3: $idUp3
-//       bulan: $bulan
-//       tahun: $tahun
-//     ) {
-//       jumlah_bulan
-//       jumlah_bulan_n_1
-//       jumlah_tahun
-//       jumlah_tahun_n_1
-//       nama_posko
-//       persen_bulan
-//       persen_tahun
-//     }
-//   }
-// `
-
-const monalisaResponseTimeKeluhan = gql`
-  query DaftarmonalisaResponseTimeKeluhan(
-    $idUid: Int
-    $idUp3: Int
-    $idUlp: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaResponseTimeKeluhan(
-      idUid: $idUid
-      idUp3: $idUp3
-      idUlp: $idUlp
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      nama_ulp
-      mom_bulan_ini
-      mom_bulan_kemarin
-      persen_mom
-      yoy_tahun_ini
-      yoy_tahun_kemarin
-      persen_yoy
-    }
-  }
-`
-
-const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKeluhan, {
   // regional: 0,
   idUp3: 0,
   idUid: 0,
   idUlp: 0,
-  bulan: bulanSekarang.value,
+  bulan: currentMonth.value,
-  tahun: tahunSekarang.value
+  tahun: currentYear.value
 })
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
+    bulan: bulan ? bulan.id : currentMonth.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.monalisaResponseTimeKeluhan
+      data.value = queryResult.data.monalisaResponseTimeGangguan
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue

@@ -3,100 +3,42 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" />
-        data-field="nama_posko"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :width="150"
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-field="jumlah_bulan"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" cell-template="percent" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_bulan_n_1"
-            data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_bulan"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :width="150"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-field="jumlah_tahun"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" cell-template="percent" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_tahun_n_1"
-            data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_tahun"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
+      <template #percent="{ data }">
+        {{ data.text }}%
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -124,6 +66,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+import { queries } from '@/utils/graphql'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -158,57 +101,30 @@ const onExporting = (e: any) => {
   }
 }
 
-const tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
-const MONALISAJUMLAHKALIKELUHAN = gql`
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.keluhan.rekap.jumlahKaliKeluhan, {
-  query DaftarMonalisaJumlahKaliKeluhan(
-    $regional: String
-    $posko: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaJumlahKaliKeluhan(
-      regional: $regional
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      jumlah_bulan
-      jumlah_bulan_n_1
-      jumlah_tahun
-      jumlah_tahun_n_1
-      nama_posko
-      persen_bulan
-      persen_tahun
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(MONALISAJUMLAHKALIKELUHAN, {
   regional: '',
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0,
-  bulan: bulanSekarang.value,
+  bulan: currentMonth.value,
-  tahun: tahunSekarang.value
+  tahun: currentYear.value
 })
 
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     regional: regional,
-    posko: posko ? posko.id : 0,
+    idUlp: ulp ? ulp.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
+    bulan: bulan ? bulan.id : currentMonth.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -227,7 +143,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 onMounted(() => {
-  console.log(bulanSekarang.value)
+  console.log(currentMonth.value)
 })
 const filters = ref()
 </script>

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue

@@ -3,104 +3,42 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      :data-source="data"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      :show-column-lines="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        :position="position"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
+      <DxColumn :width="200" alignment="center" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" />
-        data-field="nama_posko"
+      <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
-        caption="Nama Unit"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah RCT Kali Keluhan"
-        css-class="custom-table-column"
-      >
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :width="150"
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-field="jumlah_bulan"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" cell-template="percent" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_bulan_n_1"
-            data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_bulan"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :width="150"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-field="jumlah_tahun"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
+            css-class="custom-table-column" cell-template="percent" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jumlah_tahun_n_1"
-            data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_tahun"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-          />
         </DxColumn>
       </DxColumn>
+      <template #percent="{ data }">
+        {{ data.text }}%
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -128,14 +66,15 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { getMonthName } from '@/utils/texts'
+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 tahunSekarang = ref(new Date().getFullYear())
+const currentYear = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
+const currentMonth = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const lastYear = ref(currentYear.value - 1)
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 const onExporting = (e: any) => {
@@ -166,64 +105,31 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const monalisaDispatchingTimeKeluhan = gql`
+
-  query DaftarmonalisaDispatchingTimeKeluhan(
+const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.keluhan.rekap.recoveryTimeKeluhan, {
-    $regional: String
-    $posko: Int
-    $idUid: Int
-    $idUp3: Int
-    $bulan: Int
-    $tahun: Int
-  ) {
-    monalisaDispatchingTimeKeluhan(
-      regional: $regional
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-      bulan: $bulan
-      tahun: $tahun
-    ) {
-      jumlah_bulan
-      jumlah_bulan_n_1
-      jumlah_tahun
-      jumlah_tahun_n_1
-      nama_posko
-      persen_bulan
-      persen_tahun
-    }
-  }
-`
-const { onResult, onError, loading, refetch } = useQuery(monalisaDispatchingTimeKeluhan, {
   regional: '',
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0,
   bulan: 10,
   tahun: 2023
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
+  currentMonth.value = bulan.id
-  tahunSekarang.value = tahun.id
+  currentYear.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  lastYear.value = tahun.id - 1
   refetch({
     regional: regional,
-    posko: posko ? posko.id : 0,
+    idUlp: ulp ? ulp.id : 0,
-    idUid: idUid ? idUid.id : 0,
+    idUid: uid ? uid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.monalisaDispatchingTimeKeluhan.forEach((item: any) => {
+      data.value = queryResult.data.monalisaRecoveryTimeKeluhan
-        data.value = [
-          ...data.value,
-          {
-            ...item
-          }
-        ]
-      })
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)

src/utils/graphql.ts

@@ -1,5 +1,5 @@
 //deploy vm
-import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
+import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
 
 export const apolloClient = () => {
   const httpLink = createHttpLink({
@@ -21,3 +21,351 @@ export const apolloClient = () => {
   })
   return apolloClient
 }
+
+export const queries = {
+  monalisa: {
+    gangguan: {
+      rekap: {
+        dispatchingTimeGangguan: gql`
+          query DaftarmonalisaDispatchingTimeGangguan(
+            #$regional: String
+            $idUid: Int
+            $idUp3: Int
+            $idUlp: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaDispatchingTimeGangguan(
+              #regional: $regional
+              idUid: $idUid
+              idUp3: $idUp3
+              idUlp: $idUlp
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        rekapitulasiEnsGangguan: gql`
+          query DaftarmonalisaRekapitulasiEnsGangguan(
+            #$regional: String
+            $idUlp: Int
+            $idUid: Int
+            $idUp3: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaRekapitulasiEnsGangguan(
+              #regional: $regional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        gangguanBelumSelesai: gql`
+          query DaftarmonalisaGangguanBelumSelesai(
+            #$regional: String
+            $idUlp: Int
+            $idUid: Int
+            $idUp3: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaGangguanBelumSelesai(
+              #regional: $regional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              jumlah_gangguan
+              jumlah_informasi
+              total
+            }
+          }
+        `,
+        gangguanPerJenisGangguan: gql`
+          query DaftarmonalisaGangguanPerJenisGangguan(
+            #$nama_regional: String
+            $idUid: Int
+            $idUp3: Int
+            $idUlp: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaGangguanPerJenisGangguan(
+              #nama_regional: $regional
+              idUid: $idUid
+              idUp3: $idUp3
+              idUlp: $idUlp
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              id_jenis_gangguan
+              nama_jenis_gangguan
+              jumlah
+              persen
+            }
+          }
+        `,
+        jumlahDurasiRptRctGangguan: gql`
+          query DaftarmonalisaJumlahDurasiRptRctGangguan(
+            #$regional: String
+            $idUlp: Int
+            $idUid: Int
+            $idUp3: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaJumlahDurasiRptRctGangguan(
+              #regional: $regional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              total_durasi_response_time_bulan_ini
+              count_durasi_response_time_bulan_ini
+              avg_durasi_response_time_bulan_ini
+              total_durasi_recovery_time_bulan_ini
+              count_durasi_recovery_time_bulan_ini
+              avg_durasi_recovery_time_bulan_ini
+              total_durasi_response_time_tahun_ini
+              count_durasi_response_time_tahun_ini
+              avg_durasi_response_time_tahun_ini
+              total_durasi_recovery_time_tahun_ini
+              count_durasi_recovery_time_tahun_ini
+              avg_durasi_recovery_time_tahun_ini
+            }
+          }
+        `,
+        jumlahKaliGangguan: gql`
+          query DaftarMonalisaJumlahKaliGangguan(
+            #$regional: String
+            $idUid: Int
+            $idUp3: Int
+            $idUlp: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaJumlahKaliGangguan(
+              #regional: $regional
+              idUid: $idUid
+              idUp3: $idUp3
+              idUlp: $idUlp
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_uid
+              nama_up3
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        laporUlangGangguan: gql`
+          query DaftarmonalisaRekapitulasiLaporUlangGangguan(
+            #$regional: String
+            $idUlp: Int
+            $idUid: Int
+            $idUp3: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaRekapitulasiLaporUlangGangguan(
+              #regional: $regional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        recoveryTimeGangguan: gql`
+          query DaftarmonalisaRecoveryTimeGangguan(
+            #$regional: regional
+            $idUid: Int
+            $idUp3: Int
+            $idUlp: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaRecoveryTimeGangguan(
+              #regional: $regional
+              idUid: $idUid
+              idUp3: $idUp3
+              idUlp: $idUlp
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        responseTimeGangguan: gql`
+          query DaftarmonalisaResponseTimeGangguan(
+            #regional: String
+            $idUid: Int
+            $idUp3: Int
+            $idUlp: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaResponseTimeGangguan(
+              #regional: $regional
+              idUid: $idUid
+              idUp3: $idUp3
+              idUlp: $idUlp
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `
+      }
+    },
+    keluhan: {
+      rekap: {
+        jumlahKaliKeluhan: gql`
+          query DaftarMonalisaJumlahKaliKeluhan(
+            #$regional: String
+            $idUlp: Int
+            $idUid: Int
+            $idUp3: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaJumlahKaliKeluhan(
+              #regional: $regional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        recoveryTimeKeluhan: gql`
+          query DaftarmonalisaRecoveryTimeKeluhan(
+            #$regional: String
+            $idUlp: Int
+            $idUid: Int
+            $idUp3: Int
+            $bulan: Int
+            $tahun: Int
+          ) {
+            monalisaRecoveryTimeKeluhan(
+              #regional: $regional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+              bulan: $bulan
+              tahun: $tahun
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `
+      }
+    }
+  },
+
+}