From 81068e08421069ce3f1e48412929a3fc1ea80947 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 29 Feb 2024 20:20:14 +0700
Subject: [PATCH] Refactor MonalisaGR_GangguanPerJenisGangguan.vue component

---
 .../MonalisaGR_GangguanPerJenisGangguan.vue   | 100 ++-----
 .../MonalisaGR_JumlahDDRPTRCTGangguan.vue     | 260 +++++++-----------
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  | 108 ++------
 3 files changed, 145 insertions(+), 323 deletions(-)

diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index cdbc1df..1967640 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -3,73 +3,31 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="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"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="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
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :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
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="50"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="id_gangguan"
-        caption="ID Gangguan"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="tipe_permasalahan"
-        caption="Jenis Gangguan"
-        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_gangguan"
-        caption="%"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO" css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="id_jenis_gangguan" caption="ID Gangguan" css-class="custom-table-column" />
+      <DxColumn alignment="center" data-field="nama_jenis_gangguan" caption="Jenis Gangguan"
+        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" />
+
+      <template #percent="data">
+        {{ data.text }}%
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -108,25 +66,25 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const monalisaGangguanPerJenisGangguan = gql`
   query DaftarmonalisaGangguanPerJenisGangguan(
-    $regional: String
-    $posko: Int
+    #$nama_regional: String
+    #$idPosko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaGangguanPerJenisGangguan(
-      regional: $regional
-      posko: $posko
+      #nama_regional: $regional
+      #idPosko: $posko
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-      id_gangguan
+      id_jenis_gangguan
+      nama_jenis_gangguan
       jumlah
-      persen_gangguan
-      tipe_permasalahan
+      persen
     }
   }
 `
@@ -139,13 +97,13 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaGangguanPerJeni
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, posko, uid, up3, bulan, tahun } = params
 
   refetch({
     regional: regional,
     posko: posko ? posko.id : 0,
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index e4a758c..d6e3963 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -3,174 +3,73 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div>
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @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
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :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
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <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"
-        caption="Jumlah dan Durasi RPT & RCT Gangguan"
-        css-class="custom-table-column"
-      >
-        <DxColumn alignment="center" caption="Januari 2021" css-class="custom-table-column">
+      <DxColumn alignment="center" data-field="nama_posko" 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">
           <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_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number"
+              data-field="total_durasi_response_time_bulan_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"
-              data-field="jumlah_gangguan_rpt_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="c=a/b"
-              data-type="number"
-              data-field="rpt_gangguan_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number" data-field="rpt_gangguan_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_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_bulan"
+              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"
-              data-field="jumlah_gangguan_rct_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="f=d/e"
-              data-type="number"
-              data-field="rct_gangguan_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number" data-field="rct_gangguan_bulan"
+              css-class="custom-table-column" />
           </DxColumn>
         </DxColumn>
-        <DxColumn alignment="center" caption="s.d Januari 2021" css-class="custom-table-column">
+        <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"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="a" data-type="number" data-field="total_rpt_sampai_bulan"
+              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"
-              data-field="jumlah_gangguan_rpt_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="b" data-type="number"
+              data-field="jumlah_gangguan_rpt_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RPT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="c=a/b"
-              data-type="number"
-              data-field="rpt_gangguan_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="c=a/b" data-type="number"
+              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"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="d" data-type="number" data-field="total_rct_sampai_bulan"
+              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"
-              data-field="jumlah_gangguan_rct_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="e" data-type="number"
+              data-field="jumlah_gangguan_rct_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
           <DxColumn alignment="center" caption="RCT Gangguan" css-class="custom-table-column">
-            <DxColumn
-              :width="150"
-              alignment="center"
-              caption="f=d/e"
-              data-type="number"
-              data-field="rch_gangguan_sampai_bulan"
-              css-class="custom-table-column"
-            />
+            <DxColumn :width="150" alignment="center" caption="f=d/e" data-type="number"
+              data-field="rch_gangguan_sampai_bulan" css-class="custom-table-column" />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -181,7 +80,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -200,10 +99,10 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getMonthName } from '@/utils/texts'
 
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -213,53 +112,68 @@ const dataDetail = ref<any>()
 const showDetail = ref(false)
 const monalisaJumlahDurasiRptRctGangguan = gql`
   query DaftarmonalisaJumlahDurasiRptRctGangguan(
-    $regional: String
-    $posko: Int
+    #$regional: String
+    #$posko: Int
     $idUid: Int
     $idUp3: Int
     $bulan: Int
     $tahun: Int
   ) {
     monalisaJumlahDurasiRptRctGangguan(
-      regional: $regional
-      posko: $posko
+      #regional: $regional
+      #posko: $posko
       idUid: $idUid
       idUp3: $idUp3
       bulan: $bulan
       tahun: $tahun
     ) {
-      jumlah_gangguan_rct_bulan
-      jumlah_gangguan_rct_sampai_bulan
-      jumlah_gangguan_rpt_bulan
-      jumlah_gangguan_rpt_sampai_bulan
-      nama_posko
-      rct_gangguan_bulan
-      rct_gangguan_sampai_bulan
-      rpt_gangguan_bulan
-      rpt_gangguan_sampai_bulan
-      total_rct_bulan
-      total_rct_sampai_bulan
-      total_rpt_bulan
-      total_rpt_sampai_bulan
+      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: '',
-  posko: '',
+  // regional: '',
+  // posko: '',
   idUid: 0,
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const {
+    // regional, 
+    // posko, 
+    uid,
+    up3,
+    bulan,
+    tahun
+  } = params
+
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
 
   refetch({
-    regional: regional,
-    posko: posko ? posko.id : 0,
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    // regional: regional,
+    // posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })
@@ -311,5 +225,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const filters = ref()
+const filters = ref<any>({
+  // regional: '',
+  // posko: '',
+  uid: 0,
+  up3: 0,
+  bulan: 2,
+  tahun: 2024
+})
+
+
+onMounted(() => {
+  getMonthName(filters.value.bulan.id)
+})
 </script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 26c7f4d..b64496c 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -3,98 +3,36 @@
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="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"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="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
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :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
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <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_posko" 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"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`"
-            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 :width="150" alignment="center" data-field="jumlah_bulan" data-type="number"
+            :caption="`${getMonthName(bulanSekarang)} ${tahunLalu}`" 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
-            :width="150"
-            alignment="center"
-            data-field="jumlah_tahun"
-            data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`"
-            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 :width="150" alignment="center" data-field="jumlah_tahun" data-type="number"
+            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" 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>
     </DxDataGrid>
@@ -171,15 +109,15 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
   idUp3: 0
 })
 const filterData = (params: any) => {
-  const { regional, posko, idUid, idUp3, bulan, tahun } = params
+  const { regional, posko, uid, up3, bulan, tahun } = params
   bulanSekarang.value = bulan.id
   tahunSekarang.value = tahun.id
   tahunLalu.value = tahun.id - 1
   refetch({
     regional: regional,
     posko: posko ? posko.id : 0,
-    idUid: idUid ? idUid.id : 0,
-    idUp3: idUp3 ? idUp3.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
     bulan: bulan ? bulan.id : 10,
     tahun: bulan ? tahun.id : 2023
   })