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

.env.development

@@ -5,4 +5,5 @@ VITE_APP_NAME='Executive Information System'
 # VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
 # VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
 VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
+# VITE_APP_GRAPHQL_ENDPOINT=http://192.168.137.46:32169/graphql
 VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -339,22 +339,22 @@
           css-class="!text-right"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
-        <!-- <DxGroupItem
+        <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
           column="persen_selesai"
           summary-type="avg"
           css-class="!text-right"
           :customize-text="(e: any) => formatPercentage(e.value)"
-        /> -->
+        />
-        <DxGroupItem
+        <!-- <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
           column="persen_selesai"
           name="persenSelesai"
           summary-type="custom"
           css-class="!text-right"
-        />
+        /> -->
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
@@ -1070,7 +1070,6 @@ import {
   DxGrouping
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
-import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'

src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue

@@ -51,10 +51,8 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-field="number"
-        data-type="number"
         caption="No"
-        name="number"
         cell-template="formatNumber"
       />
       <DxColumn
@@ -556,7 +554,7 @@ const getDetail = () => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailGangguanAlihPosko
     }
   })
 
@@ -618,15 +616,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(data)
 }
 
 const filterData = (params: any) => {
@@ -650,9 +647,17 @@ const filterData = (params: any) => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanAlihPosko
+      const refs = [...queryResult.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
+        a.nama_uid.localeCompare(b.nama_uid)
+      )
+
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
@@ -667,9 +672,16 @@ const filterData = (params: any) => {
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a, b) =>
+    const refs = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a: any, b: any) =>
       a.nama_uid.localeCompare(b.nama_uid)
     )
+
+    data.value = refs.map((ref: any, index: number) => {
+      return {
+        ...ref,
+        number: index + 1
+      }
+    })
   }
 })
 </script>

src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue

@@ -605,15 +605,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(data)
 }
 
 const filterData = (params: any) => {
@@ -639,7 +638,6 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {

src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue

@@ -797,6 +797,7 @@ const loadingSubData = ref(false)
 const getDetail = () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
+  const { posko, uid, up3 } = filters.value
   const ref = dataSelected.value
 
   const query = {
@@ -806,19 +807,22 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
+    posko: posko ? posko.id : 0,
-    idUid: ref.id_uid,
+    idUid: uid ? uid.id : 0,
-    idUp3: ref.id_up3
+    idUp3: up3 ? up3.id : 0,
+    idRegu: ref.id_regu
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail,
     query
   )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      console.log(queryResult.data.detailGangguanDiselesaikanMobileApkt)
+
+      dataSub.value = queryResult.data.detailGangguanDiselesaikanMobileApkt
     }
   })
 
@@ -880,15 +884,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(data)
 }
 
 const filterData = (params: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue

@@ -50,7 +50,13 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn css-class="custom-table-column" :width="60" alignment="center" caption="No" />
+      <!-- <DxColumn
+        css-class="custom-table-column"
+        :width="60"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="No"
+      /> -->
       <DxColumn
         :width="120"
         alignment="center"
@@ -276,7 +282,7 @@
       <DxSummary>
         <DxGroupItem
           :show-in-group-footer="true"
-          column="No"
+          column="Kode"
           display-format="Total"
           css-class="!text-left"
         />
@@ -858,7 +864,6 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiJenisGangguanSE004
-      console.log(queryResult.data.rekapitulasiJenisGangguanSE004)
     }
 
     reportMeta.value = filters.value
@@ -928,8 +933,8 @@ const showDetail = () => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue

@@ -365,7 +365,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -373,7 +373,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -381,7 +381,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_lapor_sblm"
             caption="Tgl Lapor Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -389,7 +389,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_lapor_sdh"
             caption="Tgl Lapor Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -397,7 +397,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_penugasan_sblm"
             caption="Tgl Penugasan Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -405,7 +405,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_penugasan_sdh"
             caption="Tgl Penugasan Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -413,7 +413,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_perjalanan_sblm"
             caption="Tgl Perjalanan Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -421,7 +421,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_perjalanan_sdh"
             caption="Tgl Perjalanan Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -429,7 +429,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_pengerjaan_sblm"
             caption="Tgl Pengerjaan Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -437,7 +437,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_pengerjaan_sdh"
             caption="Tgl Pengerjaan Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -445,7 +445,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sementara_sblm"
             caption="Tgl Nyala Sementara Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -453,7 +453,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sementara_sdh"
             caption="Tgl Nyala Sementara Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -461,7 +461,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sblm"
             caption="Tgl Nyala Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -469,7 +469,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sdh"
             caption="Tgl Nyala Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -477,7 +477,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_selesai_sblm"
             caption="Tgl Selesai Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -485,7 +485,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_selesai_sdh"
             caption="Tgl Selesai Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -493,31 +493,31 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_selesai_sdh"
             caption="Durasi Respon Time Sebelum"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_response_time_sdh"
             caption="Durasi Respon Time Koreksi"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_recovery_time_sdh"
             caption="Durasi Recovery Time Koreksi"
             css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="kelompok_sblm"
             caption="Kelompok ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -525,7 +525,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="kelompok_sdh"
             caption="Kelompok ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -533,7 +533,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_kelompok_sblm"
             caption="Sub Kelompok ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -541,7 +541,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_kelompok_sdh"
             caption="Sub Kelopok ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -549,7 +549,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="fasilitas_id_sblm"
             caption="Fasilitas ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -557,7 +557,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="fasilitas_id_sdh"
             caption="Fasilitas ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -565,7 +565,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_fasilitas_id_sblm"
             caption="Sub Fasilitas ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -573,7 +573,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="sub_fasilitas_id_sdh"
             caption="Sub Fasilitas ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -581,7 +581,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="equipment_id_sblm"
             caption="Equipment ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -589,7 +589,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="equipment_id_sdh"
             caption="Equipment ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -597,7 +597,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="event_damage_sblm"
             caption="Event Damage ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -605,7 +605,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="event_damage_sdh"
             caption="Event Damage ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -613,7 +613,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cause_id_sblm"
             caption="Cause ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -621,7 +621,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cause_id_sdh"
             caption="Cause ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -629,7 +629,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cause_group_id_sblm"
             caption="Cause Group ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -637,7 +637,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="cause_group_id_sdh"
             caption="Cause Group ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -645,7 +645,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="weather_id_sblm"
             caption="Weather ID Sebelum"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -653,7 +653,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="weather_id_sdh"
             caption="Weather ID Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -661,7 +661,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="grup_koreksi"
             caption="Group Koreksi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -669,7 +669,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="alasan"
             caption="ALASAN"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -677,7 +677,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="idpel_nometer"
             caption="IDPEL/NO METER"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -685,7 +685,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -693,7 +693,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko"
             caption="Posko"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -701,7 +701,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tindakan"
             caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -709,7 +709,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="penyebab"
             caption="Penyebab"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -739,222 +739,346 @@
       <div class="p-4 space-y-2 bg-white rounded-xl">
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_lapor_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor_sdh" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_penugasan_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Penugasan Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_penugasan_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Perjalanan Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_perjalanan_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Perjalanan Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_perjalanan_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_pengerjaan_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Pengerjaan Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_pengerjaan_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sementara_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sementara Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sementara_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_nyala_sdh" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_selesai_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_selesai_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Respon Time Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_response_time_sblm)
+                ? formatWaktu(dataSelected?.durasi_response_time_sblm)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Respon Time Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_response_time_sdh)
+                ? formatWaktu(dataSelected?.durasi_response_time_sdh)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_recovery_time_sdh)
+                ? formatWaktu(dataSelected?.durasi_recovery_time_sdh)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.kelompok_sblm" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Kelompok ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.kelompok_sdh" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelompok ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_kelompok_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Kelopok ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_kelompok_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.fasilitas_id_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Fasilitas ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.fasilitas_id_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_fasilitas_id_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sub Fasilitas ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_fasilitas_id_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Equipment ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.equipment_id_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Equipment ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.equipment_id_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Event Damage ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.event_damage_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Event Damage ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.event_damage_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cause_id_sblm" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cause_id_sdh" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true"  :value="dataSubSelected?.cause_group_id_sblm" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Cause Group ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cause_group_id_sdh" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Weather ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.weather_id_sblm"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Weather ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.weather_id_sdh"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Group Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.grup_koreksi" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">ALASAN:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.alasan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -1022,21 +1146,17 @@ const getDetail = () => {
       : new Date().toISOString().slice(0, 10),
     posko: ref?.id_posko ? ref?.id_posko : 0,
     idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0
-    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
-    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail,
     query
   )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailGangguanKoreksiTransaksiIndividu
     }
   })
 
@@ -1098,8 +1218,8 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@@ -1131,7 +1251,6 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {

src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue

@@ -983,15 +983,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(data)
 }
 
 const filterData = (params: any) => {
@@ -1015,11 +1014,10 @@ const filterData = (params: any) => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerPosko.sort((a: any, b: any) =>
+      const result: any[] = [...queryResult.data.rekapitulasiGangguanPerPosko]
-        a.nama_up3 > b.nama_up3 ? 1 : -1
+      console.table(result)
-      )
+      data.value = result.sort((a: any, b: any) => a?.nama_up3.localeCompare(b?.nama_up3))
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {

src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue

@@ -19,7 +19,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -35,8 +35,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
+        v-model:visible="loadingData"
-        v-model:visible="loading"
         :enabled="true"
       />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -522,19 +521,352 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Per Regu"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExporting"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="true"
+          />
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="referensi_marking"
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_posko"
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tidakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -550,13 +882,82 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
 
+const client = apolloClient()
+provideApolloClient(client)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
 
+const getDetail = () => {
+  loadingSubData.value = true
+  const dateValue = filters.value?.periode.split(' s/d ')
+  const ref = dataSelected.value
+
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: ref?.id_posko ? ref?.id_posko : 0,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
+  }
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanAllDetail,
+    query
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailGangguan
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -585,28 +986,25 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const dataGridRef = ref<DxDataGrid | null>(null)
+
-const clearSelection = () => {
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataGrid = dataGridRef.value!.instance!
+  if (selectedRowsData[0] != undefined) {
-  dataGrid.clearSelection()
+    dataSelected.value = selectedRowsData[0]
-}
+    showDetail()
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+  }
-  const data = selectedRowsData[0]
-  clearSelection()
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+  if (selectedRowsData[0] != undefined) {
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    dataSubSelected.value = selectedRowsData[0]
-  posko: 0,
+  }
-  idUid: 0,
+}
-  idUp3: 0
-})
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
-  refetch({
+
+  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -617,18 +1015,27 @@ const filterData = (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanPerRegu
     }
-    console.log(queryResult.data)
   })
+
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
 
 const filters = ref({
+  uid: 0,
+  up3: 0,
+  posko: 0,
+  periode: '',
   groupBy: false
 })
 

src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue

@@ -743,8 +743,8 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@@ -754,6 +754,7 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const filterData = (params: any) => {
+  loadingData.value = true
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
@@ -776,15 +777,24 @@ const filterData = (params: any) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanPerTanggal
     }
-    console.log(queryResult.data)
+
+    if (queryResult.networkStatus == 7) {
+      loadingData.value = false
+    }
+    console.log('loading', queryResult.loading)
+    console.log('networkStatus', queryResult.networkStatus)
+    console.log('stale', queryResult.stale)
   })
 
   onError((error) => {
     console.log(error)
+    // loadingData.value = false
   })
 
+  loadingData.value = loading.value
+
   watch(loading, (value) => {
-    loadingData.value = value
+    // loadingData.value = value
   })
 }
 

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -44,8 +44,8 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
+        data-field="number"
         data-type="number"
         css-class="custom-table-column"
         cell-template="formatNumber"
@@ -447,7 +447,7 @@
           </template>
 
           <template #formatRating="{ data }">
-            <p class="cursor-pointer">
+            <div class="flex justify-center cursor-pointer">
               <vue3starRatings
                 v-model="data.text"
                 :starSize="20"
@@ -456,7 +456,7 @@
                 :numberOfStars="5"
                 :disableClick="true"
               />
-            </p>
+            </div>
           </template>
         </DxDataGrid>
       </div>
@@ -780,9 +780,16 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerPosko].sort((a: any, b: any) =>
+        a.nama_up3.localeCompare(b.nama_up3)
+      )
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
     }
-    console.log(queryResult.data)
   })
   onError((error) => {
     console.log(error)
@@ -1201,6 +1208,13 @@ onMounted(() => {
         persen_nonrating: 5.88235294117647
       }
     ]
+      .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
   }
 })
 </script>

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue

@@ -42,12 +42,21 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
+        data-field="number"
         data-type="number"
         css-class="custom-table-column"
         cell-template="formatNumber"
       />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -438,7 +447,7 @@
           </template>
 
           <template #formatRating="{ data }">
-            <p class="cursor-pointer">
+            <div class="flex justify-center cursor-pointer">
               <vue3starRatings
                 v-model="data.text"
                 :starSize="20"
@@ -447,7 +456,7 @@
                 :numberOfStars="5"
                 :disableClick="true"
               />
-            </p>
+            </div>
           </template>
         </DxDataGrid>
       </div>
@@ -765,7 +774,15 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
+        a.nama_up3.localeCompare(b.nama_up3)
+      )
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
     }
     console.log(queryResult.data)
   })
@@ -1183,6 +1200,13 @@ onMounted(() => {
         persen_nonrating: 0
       }
     ]
+      .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
   }
 })
 </script>

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

@@ -364,8 +364,8 @@ const showDetail = () => {
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-  }
     showDetail()
+  }
 }
 
 const onExporting = (e: any) => {

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

@@ -19,7 +19,7 @@
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
-      :word-wrap-enabled="true"
+      :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
@@ -194,9 +194,106 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Daftar Keluhan Selesai di Contact Center"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Contact Center:</h3>
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Induk Distribusi:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_uid" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">
+          Unit Pelaksana Pelayanan Pelanggan:
+        </h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_up3" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.alamat_pelapor"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.keterangan_pelapor"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Create By:</h3>
+        <InputText :readonly="true" :value="dataSelected?.pembuat_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah Lapor Ulang:</h3>
+        <InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+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'
@@ -218,12 +315,37 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import autoTable from 'jspdf-autotable'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
 
 const onExporting = (e: any) => {
   const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@@ -419,15 +541,6 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  clearSelection()
-}
 
 const data = ref<any[]>([])
 
@@ -438,7 +551,8 @@ const { onResult, onError, loading, refetch } = useQuery(
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     idUlp: 0,
     idUid: 0,
-    idUp3: 0
+    idUp3: 0,
+    media: ''
   }
 )
 const filters = ref()
@@ -462,7 +576,8 @@ const filterData = (params: any) => {
       : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
+    idUp3: up3 ? up3.id : 0,
+    media: ''
   })
 
   onResult((queryResult) => {
@@ -471,7 +586,6 @@ const filterData = (params: any) => {
     }
 
     reportMeta.value = filters.value
-    console.log(queryResult.data)
   })
 
   onError((error) => {

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

@@ -1,50 +1,21 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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
@@ -57,129 +28,46 @@
         :group-index="0"
         name="namaUlp"
       /> -->
-      <DxColumn
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" cell-template="formatText" />
-        :min-width="170"
+      <DxColumn alignment="center" caption="Jumlah Dispatching Time Gangguan" css-class="custom-table-column">
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah Dispatching Time 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -231,6 +119,8 @@ import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -283,6 +173,9 @@ const { onResult, onError, loading, refetch } = useQuery(
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,116 +1,44 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        alignment="center"
+        cell-template="formatText" />
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
       <DxColumn alignment="center" caption="ENS 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
       <template #formatNumber="{ data }">
@@ -132,55 +60,21 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          column="yoy_tahun_ini"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -212,7 +106,8 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -237,6 +132,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 )
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,85 +1,30 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @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 shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        alignment="center"
+        cell-template="formatText" />
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="jumlah_informasi" data-type="number" caption="Informasi"
-          data-field="jumlah_gangguan"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          caption="Gangguan"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="jumlah_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
       </DxColumn>
       <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
@@ -100,228 +45,67 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="jumlah_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          show-in-column="nama_ulp"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="jumlah_informasi" summary-type="sum" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          column="jumlah_gangguan"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="jumlah_informasi"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
       </DxSummary>
     </DxDataGrid>
   </div>
 
-  <DetailDialog
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan Belum Selesai" @on-close="closeDialog" :full-width="true">
-    :open="dialogDetail"
-    title="Detail Gangguan Belum Selesai"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
+        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
-          :allow-column-reordering="true"
+          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
-          class="max-h-[calc(100vh-140px)]"
+          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
-          :data-source="dataSub"
+          @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="onExporting"
-          :allow-column-resizing="true"
-          column-resizing-mode="widget"
-        >
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
-            :visible="true"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            :allowed-page-sizes="[20, 50, 100]"
+          <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-            display-mode="full"
+            :show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :enabled="true" />
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :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"
-          />
 
-          <DxColumn
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            css-class="custom-table-column"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-            :width="50"
+            cell-template="formatNumber" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            cell-template="formatText" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" css-class="custom-table-column"
-            caption="No"
+            cell-template="formatText" />
-            cell-template="formatNumber"
+          <DxColumn :width="150" alignment="center" data-field="" caption="UP3" :allow-resizing="false"
-          />
+            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" caption="ULP" :allow-resizing="false"
-            :width="150"
+            css-class="custom-table-column" cell-template="formatText" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" caption="ID Pelanggan" :allow-resizing="false"
-            data-field=""
+            css-class="custom-table-column" cell-template="formatText" />
-            caption="No Laporan"
+          <DxColumn :width="200" alignment="center" data-field="" caption="Nama Pelapor" :allow-resizing="false"
-            css-class="custom-table-column"
+            css-class="custom-table-column" cell-template="formatText" />
-            cell-template="formatText"
+          <DxColumn :width="200" alignment="center" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
-          />
+            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
-            :width="150"
+            css-class="custom-table-column" cell-template="formatText" />
-            alignment="center"
+          <DxColumn :width="200" alignment="center" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
-            data-field=""
+            css-class="custom-table-column" cell-template="formatText" />
-            caption="UID/UIW"
+          <DxColumn :width="200" alignment="center" data-field="" caption="Penyebab" :allow-resizing="false"
-            css-class="custom-table-column"
+            css-class="custom-table-column" cell-template="formatText" />
-            cell-template="formatText"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Kode Gangguan" :allow-resizing="false"
-          />
+            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn
+          <DxColumn :width="200" alignment="center" data-field="" caption="Jenis Gangguan" :allow-resizing="false"
-            :width="150"
+            css-class="custom-table-column" cell-template="formatText" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Response Time" :allow-resizing="false"
-            data-field=""
+            css-class="custom-table-column" cell-template="formatTime" />
-            caption="UP3"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Recoery Time:" :allow-resizing="false"
-            :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatTime" />
-            css-class="custom-table-column"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" :allow-resizing="false"
-            cell-template="formatText"
+            css-class="custom-table-column" cell-template="formatText" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="ULP"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="ID Pelanggan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field=""
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field=""
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="No Telp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field=""
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field=""
-            caption="Penyebab"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Kode Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="200"
-            alignment="center"
-            data-field=""
-            caption="Jenis Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Recoery Time:"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Tgl Lapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
 
           <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
@@ -459,7 +243,6 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)

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

@@ -1,89 +1,31 @@
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible.sync="loading" :enabled="true" />
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible.sync="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 alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Regional"
-        data-type="text"
+        css-class="custom-table-column" :group-index="0" />
-        data-field="nama_ulp"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="UID"
-        caption="Nama Unit"
+        css-class="custom-table-column" :group-index="1" />
-        css-class="custom-table-column"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="UP3"
-        name="namaULP"
+        css-class="custom-table-column" :group-index="2" />
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
       <!-- <DxColumn
         alignment="center"
         :min-width="170"
@@ -95,163 +37,55 @@
       /> -->
       <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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_kemarin"
+        <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
-          css-class="!text-right"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-        />
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_ini"
+        <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="namaULP"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="namaULP"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -338,7 +172,8 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -357,6 +192,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,125 +1,47 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        alignment="center"
+        cell-template="formatText" />
-        data-field="nama_ulp"
+      <DxColumn alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
-        caption="Nama Unit"
+        cell-template="formatText" :group-index="0" />
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="0"
-      />
       <DxColumn alignment="center" caption="Lapor Ulang 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
@@ -142,110 +64,39 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          column="yoy_tahun_ini"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
 
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
-          :show-in-group-footer="false"
+          show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right" />
-          :align-by-column="true"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          summary-type="sum"
+          show-in-column="mom_bulan_ini" column="mom_bulan_ini" css-class="!text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="mom_bulan_kemarin"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          column="mom_bulan_kemarin"
+          show-in-column="persen_mom" column="persen_mom" css-class="!text-right"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-        <DxGroupItem
+          show-in-column="yoy_tahun_kemarin" column="yoy_tahun_kemarin" css-class="!text-right"
-          :show-in-group-footer="false"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :align-by-column="true"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          summary-type="sum"
+          show-in-column="yoy_tahun_ini" column="yoy_tahun_ini" css-class="!text-right"
-          show-in-column="mom_bulan_ini"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_ini"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          css-class="!text-right"
+          show-in-column="persen_yoy" column="persen_yoy" css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_mom"
-          column="persen_mom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_kemarin"
-          column="yoy_tahun_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_ini"
-          column="yoy_tahun_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_yoy"
-          column="persen_yoy"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -279,7 +130,8 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -303,6 +155,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 )
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,50 +1,21 @@
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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
@@ -57,129 +28,46 @@
         :group-index="0"
         name="namaUlp"
       /> -->
-      <DxColumn
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" cell-template="formatText" />
-        :min-width="170"
+      <DxColumn alignment="center" caption="Jumlah RCT Kali Gangguan" css-class="custom-table-column">
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah RCT 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -230,7 +118,8 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -254,6 +143,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,50 +1,21 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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
@@ -57,129 +28,46 @@
         :group-index="0"
         name="namaUlp"
       /> -->
-      <DxColumn
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" cell-template="formatText" />
-        :min-width="170"
+      <DxColumn alignment="center" caption="Jumlah RPT Kali Gangguan" css-class="custom-table-column">
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah RPT 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -230,7 +118,8 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
-
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -254,6 +143,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,239 +1,80 @@
 <template>
-  <Filters
+  <Filters @run-search="() => filterData(filters)" :report-button="true" @reset-form="data = []" class="mb-4">
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    @reset-form="data = []"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        alignment="center"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-        data-type="text"
+        css-class="custom-table-column" :group-index="0" />
-        data-field="nama_ulp"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-        caption="Nama Unit"
+        css-class="custom-table-column" :group-index="1" />
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
       <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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_kemarin"
+        <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
-          css-class="!text-right"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-        />
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_ini"
+        <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="namaULP"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="namaULP"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -291,6 +132,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -337,7 +180,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,233 +1,84 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
-        alignment="center"
+        cell-template="formatText" />
-        data-field="nama_ulp"
+      <DxColumn alignment="center" data-field="nama_uid" caption="UID" css-class="custom-table-column"
-        caption="Nama Unit"
+        cell-template="formatText" :group-index="0" />
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="nama_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="0"
-      />
       <DxColumn alignment="center" caption="Lapor Ulang 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="mom_bulan_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="persen_mom" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          column="mom_bulan_kemarin"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem column="yoy_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          column="yoy_tahun_ini"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="persen_yoy" summary-type="avg" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
 
-        <DxGroupItem
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
-          :show-in-group-footer="false"
+          show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right" />
-          :align-by-column="true"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          summary-type="sum"
+          show-in-column="mom_bulan_ini" column="mom_bulan_ini" css-class="!text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="mom_bulan_kemarin"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          column="mom_bulan_kemarin"
+          show-in-column="persen_mom" column="persen_mom" css-class="!text-right"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-        <DxGroupItem
+          show-in-column="yoy_tahun_kemarin" column="yoy_tahun_kemarin" css-class="!text-right"
-          :show-in-group-footer="false"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :align-by-column="true"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          summary-type="sum"
+          show-in-column="yoy_tahun_ini" column="yoy_tahun_ini" css-class="!text-right"
-          show-in-column="mom_bulan_ini"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_ini"
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
-          css-class="!text-right"
+          show-in-column="persen_yoy" column="persen_yoy" css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatPercentage(e.value)" />
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_mom"
-          column="persen_mom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_kemarin"
-          column="yoy_tahun_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_ini"
-          column="yoy_tahun_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_yoy"
-          column="persen_yoy"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -284,6 +135,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+  const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -370,7 +223,8 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaRekapitulasiLap
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,258 +1,82 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
-        alignment="center"
+        css-class="custom-table-column" :group-index="0" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-        data-type="text"
+        css-class="custom-table-column" :group-index="1" />
-        data-field="nama_regional"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-        caption="Nama Regional"
+        css-class="custom-table-column" :group-index="2" />
-        css-class="custom-table-column"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        :group-index="0"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-      />
+      <DxColumn alignment="center" caption="Jumlah RCT Kali Keluhan" css-class="custom-table-column">
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
-      <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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_kemarin"
+        <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
-          css-class="!text-right"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-        />
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_ini"
+        <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA" show-in-column="namaULP"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="RATA-RATA"
+        <DxTotalItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="namaULP"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
-          :align-by-column="true"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_kemarin"
+        <DxTotalItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxTotalItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
-          css-class="text-white !text-right"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxTotalItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-        <DxTotalItem
-          :align-by-column="true"
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -310,6 +134,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -357,7 +183,8 @@ const { onResult, onError, loading, refetch } = useQuery(
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

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

@@ -1,258 +1,82 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
-        alignment="center"
+        css-class="custom-table-column" :group-index="0" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-        data-type="text"
+        css-class="custom-table-column" :group-index="1" />
-        data-field="nama_regional"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-        caption="Nama Regional"
+        css-class="custom-table-column" :group-index="2" />
-        css-class="custom-table-column"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        :group-index="0"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-      />
+      <DxColumn alignment="center" caption="Jumlah RPT Kali Keluhan" css-class="custom-table-column">
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Jumlah RPT 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(lastMonth)} ${lastYearMoM}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="mom_bulan_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_ini"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_mom"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </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"
+            cell-template="formatNumber" />
-            data-field="yoy_tahun_kemarin"
+          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            cell-template="formatNumber" />
-            css-class="custom-table-column"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            cell-template="formatNumber"
+            css-class="custom-table-column" cell-template="formatNumber" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_ini"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="70"
-            alignment="center"
-            data-field="persen_yoy"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_kemarin"
+        <DxGroupItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxGroupItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
-          css-class="!text-right"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-        />
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem
+        <DxGroupItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="mom_bulan_ini"
+        <DxGroupItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
-          summary-type="sum"
+          css-class="!text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
 
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA" show-in-column="namaULP"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="RATA-RATA"
+        <DxTotalItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
-          show-in-column="namaULP"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem :align-by-column="true" column="mom_bulan_ini" summary-type="sum" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem :align-by-column="true" column="persen_mom" summary-type="avg" display-format="{0}"
-          :align-by-column="true"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-          column="mom_bulan_kemarin"
+        <DxTotalItem :align-by-column="true" column="yoy_tahun_kemarin" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxTotalItem :align-by-column="true" column="yoy_tahun_ini" summary-type="sum" display-format="{0}"
-          css-class="text-white !text-right"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxTotalItem :align-by-column="true" column="persen_yoy" summary-type="avg" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatPercentage(e.value)" />
-        <DxTotalItem
-          :align-by-column="true"
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -310,6 +134,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const lastMonth = ref(new Date().getMonth() == 1 ? 12 : new Date().getMonth() - 1)
+const lastYearMoM = ref(new Date().getMonth() == 1 ? new Date().getFullYear() - 1 : new Date().getFullYear())
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
@@ -388,7 +214,8 @@ const { onResult, onError, loading, refetch } = useQuery(monalisaResponseTimeKel
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-
+  lastMonth.value = bulan.id == 1 ? 12 : bulan.id - 1;
+  lastYearMoM.value = bulan.id == 1 ? tahun.id - 1 : tahun.id;
   currentMonth.value = bulan.id
   currentYear.value = tahun.id
   lastYear.value = tahun.id - 1

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -1,309 +1,103 @@
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onDataSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
-        <DxColumn
+        css-class="custom-table-column">
-          alignment="center"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
-          :min-width="170"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
-          data-type="text"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-          data-field="nama_regional"
+          css-class="custom-table-column" :group-index="1" />
-          caption="Nama Regional"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-          css-class="custom-table-column"
+          css-class="custom-table-column" :group-index="2" />
-          :group-index="0"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="na  ma_ulp" caption="Nama Unit"
-        />
+          css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
-          css-class="custom-table-column"
-          :group-index="1"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
-          css-class="custom-table-column"
-          :group-index="2"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          name="namaULP"
-          cell-template="formatText"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
-          caption="Rata-Rata RCT Gangguan"
+            :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-          css-class="custom-table-column"
+            cell-template="formatNumber" />
-        >
+          <DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
-          <DxColumn
+            css-class="custom-table-column" cell-template="formatNumber" />
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_recovery_gangguan"
-            data-type="number"
-            caption="Feb 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="sla_gangguan"
-            data-type="number"
-            caption="SLA (Menit)"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
-        <DxColumn
+        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-          alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
-          caption="Rata-Rata RCT Keluhan"
+            :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-          css-class="custom-table-column"
+            cell-template="formatNumber" />
-        >
+          <DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
-          <DxColumn
+            css-class="custom-table-column" cell-template="formatNumber" />
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_recovery_keluhan"
-            data-type="number"
-            caption="Feb 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="sla_keluhan"
-            data-type="number"
-            caption="SLA (Jam)"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatPercentage" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
-          data-field="aging_complaint_gangguan"
+          css-class="custom-table-column" cell-template="formatPercentage" />
-          data-type="number"
-          caption="G"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="aging_complaint_keluhan"
-          data-type="number"
-          caption="K"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
       </DxColumn>
-      <DxColumn
+      <DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
-        :min-width="170"
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="formatPercentage" />
-        alignment="center"
-        data-field="avg_aging_complaint"
-        data-type="number"
-        caption="% Rata-Rata Aging Complains"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA NASIONAL" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="RATA-RATA NASIONAL"
+        <DxTotalItem column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="sla_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
-          column="avg_durasi_recovery_gangguan"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="sla_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxTotalItem
+        <DxTotalItem column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
-          column="sla_gangguan"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          summary-type="sum"
+    " />
-          display-format="{0}"
+        <DxTotalItem column="avg_aging_complaint" summary-type="avg" display-format="{0}"
-          css-class="text-white !text-right"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          :customize-text="(e: any) => formatNumber(e.value)"
+    " />
-        />
-        <DxTotalItem
-          column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="sla_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="aging_complaint_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="aging_complaint_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="avg_aging_complaint"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_gangguan" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
-          show-in-column="avg_durasi_recovery_gangguan"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="sla_gangguan" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="sla_gangguan" summary-type="sum" display-format="{0}"
-          column="avg_durasi_recovery_gangguan"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_keluhan" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="sla_keluhan" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="sla_keluhan" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="sla_gangguan"
+        <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_gangguan" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
-          :align-by-column="true"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          column="sla_gangguan"
+    " />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_keluhan" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="avg_aging_complaint" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="avg_aging_complaint" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          show-in-column="avg_durasi_recovery_keluhan"
+    " />
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="sla_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="sla_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="aging_complaint_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="aging_complaint_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="aging_complaint_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="aging_complaint_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="avg_aging_complaint"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_aging_complaint"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -332,202 +126,58 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
+  <DetailDialog :open="dialogDetail" title="Detail (Monalisa) Aging Complaint" @on-close="closedialogDetail"
-    :open="dialogDetail"
+    :full-width="true">
-    title="Detail (Monalisa) Aging Complaint"
-    @on-close="closedialogDetail"
-    :full-width="true"
-  >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid
+        <DxDataGrid :allow-column-reordering="true" class="max-h-[calc(100vh-140px)]" :data-source="dataSub"
-          :allow-column-reordering="true"
+          :show-column-lines="true" :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true"
-          class="max-h-[calc(100vh-140px)]"
+          :hover-state-enabled="true" @selection-changed="onDataSubSelectionChanged" :column-width="100"
-          :data-source="dataSub"
+          @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget">
-          :show-column-lines="true"
-          :show-row-lines="false"
-          :show-borders="true"
-          :row-alternation-enabled="true"
-          :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged"
-          :column-width="100"
-          @exporting="onExporting"
-          :allow-column-resizing="true"
-          column-resizing-mode="widget"
-        >
           <DxSelection mode="single" />
           <DxPaging :page-size="20" :enabled="true" />
-          <DxPager
+          <DxPager :visible="true" :allowed-page-sizes="[20, 50, 100]" display-mode="full"
-            :visible="true"
+            :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            :allowed-page-sizes="[20, 50, 100]"
+          <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-            display-mode="full"
+            :show-pane="showPane" :shading="shading" v-model:visible="loadingSubData" :enabled="true" />
-            :show-page-size-selector="true"
-            :show-info="true"
-            :show-navigation-buttons="true"
-          />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :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"
-          />
 
-          <DxColumn
+          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            css-class="custom-table-column"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-            :width="50"
+            cell-template="formatNumber" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="no_laporan" caption="No Laporan" :allow-resizing="false"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            css-class="custom-table-column" cell-template="formatText" />
-            data-type="number"
+          <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" :allow-resizing="false"
-            caption="No"
+            css-class="custom-table-column" cell-template="formatText" />
-            cell-template="formatNumber"
+          <DxColumn :width="150" alignment="center" data-field="" caption="UP3" :allow-resizing="false"
-          />
+            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" caption="ULP" :allow-resizing="false"
-            :width="150"
+            css-class="custom-table-column" cell-template="formatText" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" caption="ID Pelanggan" :allow-resizing="false"
-            data-field="no_laporan"
+            css-class="custom-table-column" cell-template="formatNumber" />
-            caption="No Laporan"
+          <DxColumn :width="150" data-field="" caption="Nama Pelanggan" :allow-resizing="false"
-            :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
-            css-class="custom-table-column"
+          <DxColumn :width="150" data-field="" caption="Nama Pelapor" :allow-resizing="false"
-            cell-template="formatText"
+            css-class="custom-table-column" cell-template="formatText" />
-          />
+          <DxColumn :width="150" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
-          <DxColumn
+            css-class="custom-table-column" cell-template="formatText" />
-            :width="150"
+          <DxColumn :width="150" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
-            alignment="center"
+            css-class="custom-table-column" cell-template="formatText" />
-            data-field=""
+          <DxColumn :width="150" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
-            caption="UID/UIW"
+            css-class="custom-table-column" cell-template="formatText" />
-            :allow-resizing="false"
+          <DxColumn :width="150" data-field="" caption="Penyebab" :allow-resizing="false"
-            css-class="custom-table-column"
+            css-class="custom-table-column" cell-template="formatText" />
-            cell-template="formatText"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Kode Gangguan" :allow-resizing="false"
-          />
+            css-class="custom-table-column" cell-template="formatText" />
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="" caption="Jenis Gangguan" :allow-resizing="false"
-            :width="150"
+            css-class="custom-table-column" cell-template="formatText" />
-            alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Response Time" :allow-resizing="false"
-            data-field=""
+            css-class="custom-table-column" cell-template="formatText" />
-            caption="UP3"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Recovery Time" :allow-resizing="false"
-            :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
-            css-class="custom-table-column"
+          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" :allow-resizing="false"
-            cell-template="formatText"
+            css-class="custom-table-column" cell-template="formatText" />
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="ULP"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="ID Pelanggan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            data-field=""
-            caption="Nama Pelanggan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            data-field=""
-            caption="Nama Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            data-field=""
-            caption="Alamat Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            data-field=""
-            caption="No Telp Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            data-field=""
-            caption="Keterangan Pelapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            data-field=""
-            caption="Penyebab"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Kode Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Jenis Gangguan"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Response Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Durasi Recovery Time"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="Tgl Lapor"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
 
           <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
@@ -667,7 +317,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
-import { getMonthName } from '@/utils/texts'
+import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue

@@ -1,232 +1,76 @@
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
-        <DxColumn
+        css-class="custom-table-column">
-          alignment="center"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
-          :min-width="170"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
-          data-type="text"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-          data-field="nama_regional"
+          css-class="custom-table-column" :group-index="1" />
-          caption="Nama Regional"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-          css-class="custom-table-column"
+          css-class="custom-table-column" :group-index="2" />
-          :group-index="0"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        />
+          css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
-          css-class="custom-table-column"
-          :group-index="1"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
-          css-class="custom-table-column"
-          :group-index="2"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          name="namaULP"
-          cell-template="formatText"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
-          data-field="terencana"
+          caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
-          caption="Terencana"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="tidak_terencana"
-          data-type="number"
-          caption="Tidak Terencana"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="bencana_alam"
-          data-type="number"
-          caption="Bencana Alam"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
       </DxColumn>
-      <DxColumn
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
-        :width="170"
+        css-class="custom-table-column" cell-template="formatNumber" />
-        alignment="center"
+      <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
-        data-field="total"
+        css-class="custom-table-column" cell-template="formatNumber" />
-        data-type="number"
-        caption="Total"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :min-width="170"
-        alignment="center"
-        data-field="kpi_ens"
-        data-type="number"
-        caption="KPI ENS"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          show-in-column="nama_ulp"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          column="terencana"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
-        <DxTotalItem
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
-          show-in-column="terencana"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
-          column="terencana"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="total" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="tidak_terencana"
+        <DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="bencana_alam"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="kpi_ens"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue

@@ -1,242 +1,80 @@
 <template>
-  <Filters
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
-        alignment="center"
+        css-class="custom-table-column" :group-index="0" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-        data-type="text"
+        css-class="custom-table-column" :group-index="1" />
-        data-field="nama_regional"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-        caption="Nama Regional"
+        css-class="custom-table-column" :group-index="2" />
-        css-class="custom-table-column"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        :group-index="0"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-      />
+      <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Kepatuhan dan Akurasi APKT"
-        css-class="custom-table-column"
-      >
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
-            :width="150"
+            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="gangguan_berulang"
+          <DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
-            data-type="number"
+            caption="Total Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
-            caption="Jan 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="gangguan_total"
-            data-type="number"
-            caption="Total Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
-            :width="150"
+            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="keluhan_berulang"
+          <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
-            data-type="number"
+            caption="Total Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
-            caption="Jan 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="keluhan_total"
-            data-type="number"
-            caption="Total Keluhan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
-      <DxColumn
+      <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
-        :min-width="150"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
-        alignment="center"
-        data-field="komplain_pelanggan"
-        data-type="number"
-        caption="Komplain Pelanggan %"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="gangguan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="keluhan_berulang" summary-type="sum" display-format="{0}"
-          column="gangguan_berulang"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="keluhan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="komplain_pelanggan" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxTotalItem
-          column="gangguan_total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="keluhan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="keluhan_total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="komplain_pelanggan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
-          show-in-column="gangguan_berulang"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="gangguan_total" summary-type="sum" display-format="{0}"
-          column="gangguan_berulang"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="keluhan_berulang" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="keluhan_berulang" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="keluhan_total" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="keluhan_total" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="gangguan_total"
+        <DxGroupItem css-class="!text-right" show-in-column="komplain_pelanggan" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="komplain_pelanggan" summary-type="sum" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          :align-by-column="true"
+    " />
-          column="gangguan_total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="keluhan_berulang"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="keluhan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="keluhan_total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="keluhan_total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="komplain_pelanggan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="komplain_pelanggan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -292,7 +130,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
-import { getMonthName } from '@/utils/texts'
+import { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
@@ -388,7 +226,7 @@ const filterData = (params: any) => {
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    getMonthName(filters.value.bulan.id)
+    getMonthNameShort(filters.value.bulan.id)
 
     data.value = [
       {

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -87,7 +87,7 @@
 
       <DxColumn
         alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
+        :caption="`${getMonthNameShort(currentMonth)} ${lastYear}`"
         css-class="custom-table-column"
       >
         <DxColumn
@@ -150,7 +150,7 @@
 
       <DxColumn
         alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
+        :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`"
         css-class="custom-table-column"
       >
         <DxColumn
@@ -988,7 +988,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 { getMonthName } from '@/utils/texts'
+import { getMonthNameShort } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1136,7 +1136,7 @@ const filterData = (params: any) => {
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    getMonthName(filters.value.bulan.id)
+    getMonthNameShort(filters.value.bulan.id)
 
     data.value = [
       {

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue

@@ -1,310 +1,103 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
-        <DxColumn
+        css-class="custom-table-column">
-          alignment="center"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
-          :min-width="170"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
-          data-type="text"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-          data-field="nama_regional"
+          css-class="custom-table-column" :group-index="1" />
-          caption="Nama Regional"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-          css-class="custom-table-column"
+          css-class="custom-table-column" :group-index="2" />
-          :group-index="0"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        />
+          css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
-          css-class="custom-table-column"
-          :group-index="1"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
-          css-class="custom-table-column"
-          :group-index="2"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          name="namaULP"
-          cell-template="formatText"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
-          caption="Rata-Rata RCT Gangguan"
+            :caption="`Periode: ${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
-          css-class="custom-table-column"
+            cell-template="formatNumber" />
-        >
+          <DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
-          <DxColumn
+            css-class="custom-table-column" cell-template="formatNumber" />
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_recovery_gangguan"
-            data-type="number"
-            caption="Feb 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="sla_gangguan"
-            data-type="number"
-            caption="SLA (Menit)"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
-        <DxColumn
+        <DxColumn alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
-          alignment="center"
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
-          caption="Rata-Rata RCT Keluhan"
+            :caption="`Periode: ${getMonthNameShort(currentMonth)}, ${currentYear}`" css-class="custom-table-column"
-          css-class="custom-table-column"
+            cell-template="formatNumber" />
-        >
+          <DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
-          <DxColumn
+            css-class="custom-table-column" cell-template="formatNumber" />
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_recovery_keluhan"
-            data-type="number"
-            caption="Feb 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="sla_keluhan"
-            data-type="number"
-            caption="SLA (Jam)"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="% Aging Complains" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatPercentage" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
-          data-field="aging_complaint_gangguan"
+          css-class="custom-table-column" cell-template="formatPercentage" />
-          data-type="number"
-          caption="G"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="aging_complaint_keluhan"
-          data-type="number"
-          caption="K"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
       </DxColumn>
-      <DxColumn
+      <DxColumn :min-width="170" alignment="center" data-field="avg_aging_complaint" data-type="number"
-        :min-width="170"
+        caption="% Rata-Rata Aging Complains" css-class="custom-table-column" cell-template="formatPercentage" />
-        alignment="center"
-        data-field="avg_aging_complaint"
-        data-type="number"
-        caption="% Rata-Rata Aging Complains"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA NASIONAL" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="RATA-RATA NASIONAL"
+        <DxTotalItem column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="sla_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
-          column="avg_durasi_recovery_gangguan"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="sla_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxTotalItem
+        <DxTotalItem column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
-          column="sla_gangguan"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          summary-type="sum"
+    " />
-          display-format="{0}"
+        <DxTotalItem column="avg_aging_complaint" summary-type="avg" display-format="{0}"
-          css-class="text-white !text-right"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          :customize-text="(e: any) => formatNumber(e.value)"
+    " />
-        />
-        <DxTotalItem
-          column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="sla_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="aging_complaint_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="aging_complaint_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="avg_aging_complaint"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_gangguan" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
-          show-in-column="avg_durasi_recovery_gangguan"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="sla_gangguan" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="sla_gangguan" summary-type="sum" display-format="{0}"
-          column="avg_durasi_recovery_gangguan"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_keluhan" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="avg_durasi_recovery_keluhan" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="sla_keluhan" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="sla_keluhan" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="sla_gangguan"
+        <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_gangguan" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="aging_complaint_gangguan" summary-type="avg" display-format="{0}"
-          :align-by-column="true"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          column="sla_gangguan"
+    " />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="aging_complaint_keluhan" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="aging_complaint_keluhan" summary-type="avg" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="avg_aging_complaint" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="avg_aging_complaint" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          show-in-column="avg_durasi_recovery_keluhan"
+    " />
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="sla_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="sla_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="aging_complaint_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="aging_complaint_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="aging_complaint_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="aging_complaint_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="avg_aging_complaint"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_aging_complaint"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -360,7 +153,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
-import { getMonthName } from '@/utils/texts'
+import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue

@@ -1,232 +1,76 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
+      <DxColumn alignment="center" :caption="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
-        <DxColumn
+        css-class="custom-table-column">
-          alignment="center"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
-          :min-width="170"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
-          data-type="text"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-          data-field="nama_regional"
+          css-class="custom-table-column" :group-index="1" />
-          caption="Nama Regional"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-          css-class="custom-table-column"
+          css-class="custom-table-column" :group-index="2" />
-          :group-index="0"
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        />
+          css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_uid"
-          caption="Nama UID"
-          css-class="custom-table-column"
-          :group-index="1"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_up3"
-          caption="Nama UP3"
-          css-class="custom-table-column"
-          :group-index="2"
-        />
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          name="namaULP"
-          cell-template="formatText"
-        />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
-          data-field="terencana"
+          caption="Tidak Terencana" css-class="custom-table-column" cell-template="formatNumber" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
-          caption="Terencana"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="tidak_terencana"
-          data-type="number"
-          caption="Tidak Terencana"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="bencana_alam"
-          data-type="number"
-          caption="Bencana Alam"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
       </DxColumn>
-      <DxColumn
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
-        :width="170"
+        css-class="custom-table-column" cell-template="formatNumber" />
-        alignment="center"
+      <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
-        data-field="total"
+        css-class="custom-table-column" cell-template="formatNumber" />
-        data-type="number"
-        caption="Total"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
-      <DxColumn
-        :min-width="170"
-        alignment="center"
-        data-field="kpi_ens"
-        data-type="number"
-        caption="KPI ENS"
-        css-class="custom-table-column"
-        cell-template="formatNumber"
-      />
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          show-in-column="nama_ulp"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="tidak_terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="bencana_alam" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          column="terencana"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="kpi_ens" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
-        <DxTotalItem
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
-          show-in-column="terencana"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="tidak_terencana" summary-type="sum" display-format="{0}"
-          column="terencana"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="bencana_alam" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="bencana_alam" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="total" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="total" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="tidak_terencana"
+        <DxGroupItem css-class="!text-right" show-in-column="kpi_ens" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="kpi_ens" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          column="tidak_terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="bencana_alam"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="bencana_alam"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="kpi_ens"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="kpi_ens"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue

@@ -1,242 +1,80 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
-        alignment="center"
+        css-class="custom-table-column" :group-index="0" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-        data-type="text"
+        css-class="custom-table-column" :group-index="1" />
-        data-field="nama_regional"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-        caption="Nama Regional"
+        css-class="custom-table-column" :group-index="2" />
-        css-class="custom-table-column"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        :group-index="0"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-      />
+      <DxColumn alignment="center" caption="Kepatuhan dan Akurasi APKT" css-class="custom-table-column">
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Kepatuhan dan Akurasi APKT"
-        css-class="custom-table-column"
-      >
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
-            :width="150"
+            :caption="`s.d ${getMonthNameShort(currentMonth)} ${lastYear}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="gangguan_berulang"
+          <DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
-            data-type="number"
+            caption="Total Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
-            caption="Jan 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="gangguan_total"
-            data-type="number"
-            caption="Total Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
-            :width="150"
+            :caption="` s.d ${getMonthNameShort(currentMonth)} ${currentYear}`" css-class="custom-table-column"
-            alignment="center"
+            cell-template="formatNumber" />
-            data-field="keluhan_berulang"
+          <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number"
-            data-type="number"
+            caption="Total Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
-            caption="Jan 2020"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="keluhan_total"
-            data-type="number"
-            caption="Total Keluhan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
       </DxColumn>
-      <DxColumn
+      <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
-        :min-width="150"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
-        alignment="center"
-        data-field="komplain_pelanggan"
-        data-type="number"
-        caption="Komplain Pelanggan %"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="gangguan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        />
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="keluhan_berulang" summary-type="sum" display-format="{0}"
-          column="gangguan_berulang"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="keluhan_total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="komplain_pelanggan" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxTotalItem
-          column="gangguan_total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="keluhan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="keluhan_total"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="komplain_pelanggan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
-          show-in-column="gangguan_berulang"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="gangguan_total" summary-type="sum" display-format="{0}"
-          column="gangguan_berulang"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="keluhan_berulang" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="keluhan_berulang" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="keluhan_total" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="keluhan_total" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="gangguan_total"
+        <DxGroupItem css-class="!text-right" show-in-column="komplain_pelanggan" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="komplain_pelanggan" summary-type="sum" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          :align-by-column="true"
+    " />
-          column="gangguan_total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="keluhan_berulang"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="keluhan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="keluhan_total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="keluhan_total"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="komplain_pelanggan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="komplain_pelanggan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">
@@ -292,7 +130,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
-import { getMonthName } from '@/utils/texts'
+import { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
@@ -385,7 +223,7 @@ const filterData = (params: any) => {
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    getMonthName(filters.value.bulan.id)
+    getMonthNameShort(filters.value.bulan.id)
 
     data.value = [
       {

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue

@@ -1,689 +1,212 @@
 <template>
-  <Filters
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
-      ref="dataGridRef"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-      :allow-column-reordering="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-      class="max-h-[calc(100vh-140px)] mb-10"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-      :data-source="data"
+      :word-wrap-enabled="true">
-      :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"
-    >
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
-        shading-color="rgba(0,0,0,0.4)"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
-        :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
+      <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 alignment="center" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
-        alignment="center"
+        css-class="custom-table-column" :group-index="0" />
-        :min-width="170"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_uid" caption="Nama UID"
-        data-type="text"
+        css-class="custom-table-column" :group-index="1" />
-        data-field="nama_regional"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_up3" caption="Nama UP3"
-        caption="Nama Regional"
+        css-class="custom-table-column" :group-index="2" />
-        css-class="custom-table-column"
+      <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_ulp" caption="Nama Unit"
-        :group-index="0"
+        css-class="custom-table-column" name="namaULP" cell-template="formatText" />
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
-        css-class="custom-table-column"
-        :group-index="1"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
-        css-class="custom-table-column"
-        :group-index="2"
-      />
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        name="namaULP"
-        cell-template="formatText"
-      />
 
-      <DxColumn
+      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-        alignment="center"
+        css-class="custom-table-column">
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
+        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
-        css-class="custom-table-column"
+          caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
-      >
+        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
-        <DxColumn
+          caption="Gangguan" css-class="custom-table-column" />
-          :width="120"
-          alignment="center"
-          data-field="total_keluhan_tahun_sebelumnya"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          name="keluhanBulanLalu"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_sebelumnya"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
-            :width="120"
+            data-type="number" caption="Keluhan" css-class="custom-table-column" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
-            data-field="total_keluhan_informasi_tahun_sebelumnya"
+            data-type="number" caption="Gangguan" css-class="custom-table-column" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
-            caption="Keluhan"
+            caption="Total" css-class="custom-table-column" />
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
         </DxColumn>
-        <DxColumn
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
-          alignment="center"
+          data-field="total_tahun_sebelumnya" data-type="number" />
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_sebelumnya"
-          data-type="number"
-        />
       </DxColumn>
 
-      <DxColumn
+      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-        alignment="center"
+        css-class="custom-table-column">
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
+        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
-        css-class="custom-table-column"
+          caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" cell-template="formatNumber" />
-      >
+        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
-        <DxColumn
+          caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
-          :width="120"
-          alignment="center"
-          data-field="total_keluhan_tahun_sebelumnya"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          name="keluhanBulanLalu"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_sebelumnya"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
-            :width="120"
+            data-type="number" caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_sebelumnya"
-            data-field="total_keluhan_informasi_tahun_sebelumnya"
+            data-type="number" caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_sebelumnya" data-type="number"
-            caption="Keluhan"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
-        <DxColumn
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
-          alignment="center"
+          data-field="total_tahun_sebelumnya" data-type="number" cell-template="formatNumber" />
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_sebelumnya"
-          data-type="number"
-          cell-template="formatNumber"
-        />
       </DxColumn>
 
-      <DxColumn
+      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
-        alignment="center"
+        css-class="custom-table-column">
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
+        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_ini" data-type="number"
-        css-class="custom-table-column"
+          caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
-      >
+        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" data-type="number"
-        <DxColumn
+          caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
-          :width="120"
-          alignment="center"
-          data-field="total_keluhan_tahun_ini"
-          data-type="number"
-          caption="Keluhan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_ini"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
         <DxColumn alignment="center" caption="Informasi" css-class="custom-table-column">
-          <DxColumn
+          <DxColumn :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
-            :width="120"
+            caption="Keluhan" css-class="custom-table-column" cell-template="formatNumber" />
-            alignment="center"
+          <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
-            data-field="total_keluhan_informasi_tahun_ini"
+            caption="Gangguan" css-class="custom-table-column" cell-template="formatNumber" />
-            data-type="number"
+          <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" data-type="number"
-            caption="Keluhan"
+            caption="Total" css-class="custom-table-column" cell-template="formatNumber" />
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_ini"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_ini"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
         </DxColumn>
-        <DxColumn
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
-          alignment="center"
+          data-field="total_tahun_ini" data-type="number" cell-template="formatNumber" />
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_ini"
-          data-type="number"
-          cell-template="formatNumber"
-        />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Delta Penurunan" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
-          data-field="delta_keluhan"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
-          caption="Keluhan"
+          css-class="custom-table-column" cell-template="formatNumber" />
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-          cell-template="formatNumber"
-        />
       </DxColumn>
 
       <DxColumn alignment="center" caption="% Penurunan YoY" css-class="custom-table-column">
-        <DxColumn
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
-          :width="150"
+          css-class="custom-table-column" cell-template="formatPercentage" />
-          alignment="center"
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number"
-          data-field="persen_delta_keluhan"
+          caption="Gangguan" css-class="custom-table-column" cell-template="formatPercentage" />
-          data-type="number"
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
-          caption="Keluhan"
+          caption="Informasi" css-class="custom-table-column" cell-template="formatPercentage" />
-          css-class="custom-table-column"
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
-          cell-template="formatPercentage"
+          css-class="custom-table-column" cell-template="formatPercentage" />
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_total"
-          data-type="number"
-          caption="% Total"
-          css-class="custom-table-column"
-          cell-template="formatPercentage"
-        />
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
-          summary-type="sum"
+          css-class="text-white !text-left" />
-          display-format="Total"
+        <DxTotalItem column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-          show-in-column="nama_ulp"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-left"
+        <DxTotalItem column="total_gangguan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="total_keluhan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-          column="total_keluhan_tahun_sebelumnya"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="total_gangguan_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="total_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-        <DxTotalItem
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="total_gangguan_tahun_sebelumnya"
+        <DxTotalItem column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
-          summary-type="sum"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxTotalItem column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
-          css-class="text-white !text-right"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxTotalItem column="total_keluhan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxTotalItem
+        <DxTotalItem column="total_gangguan_informasi_tahun_ini" summary-type="sum" display-format="{0}"
-          column="total_keluhan_informasi_tahun_sebelumnya"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxTotalItem column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="text-white !text-right"
+        <DxTotalItem column="total_tahun_ini" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxTotalItem column="delta_keluhan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-        <DxTotalItem
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          column="total_gangguan_informasi_tahun_sebelumnya"
+        <DxTotalItem column="delta_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxTotalItem column="delta_informasi" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxTotalItem column="persen_delta_keluhan" summary-type="avg" display-format="{0}"
-        />
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        <DxTotalItem
+    " />
-          column="total_informasi_tahun_sebelumnya"
+        <DxTotalItem column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
-          summary-type="sum"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          display-format="{0}"
+    " />
-          css-class="text-white !text-right"
+        <DxTotalItem column="persen_delta_informasi" summary-type="avg" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-        />
+    " />
-        <DxTotalItem
+        <DxTotalItem column="persen_delta_total" summary-type="avg" display-format="{0}"
-          column="total_tahun_sebelumnya"
+          css-class="text-white !text-right" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          summary-type="sum"
+    " />
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_keluhan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_gangguan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_keluhan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_gangguan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="delta_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="delta_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="delta_informasi"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="persen_delta_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="persen_delta_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="persen_delta_informasi"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxTotalItem
-          column="persen_delta_total"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
 
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_sebelumnya"
-          css-class="!text-right"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_tahun_sebelumnya"
-          show-in-column="total_keluhan_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_sebelumnya"
-          :align-by-column="true"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_tahun_sebelumnya"
-          column="total_keluhan_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_sebelumnya"
-          display-format="{0}"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_sebelumnya"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_sebelumnya"
-        <DxGroupItem
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_sebelumnya"
-          css-class="!text-right"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="total_gangguan_tahun_sebelumnya"
+        <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_sebelumnya"
-          :show-in-group-footer="false"
+          :show-in-group-footer="false" :align-by-column="true" column="total_informasi_tahun_sebelumnya"
-          :align-by-column="true"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-          column="total_gangguan_tahun_sebelumnya"
+        <DxGroupItem css-class="!text-right" show-in-column="total_tahun_sebelumnya" :show-in-group-footer="false"
-          summary-type="sum"
+          :align-by-column="true" column="total_tahun_sebelumnya" summary-type="sum" display-format="{0}"
-          display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_ini" :show-in-group-footer="false"
-        />
+          :align-by-column="true" column="total_keluhan_tahun_ini" summary-type="sum" display-format="{0}"
-        <DxGroupItem
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          css-class="!text-right"
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_ini" :show-in-group-footer="false"
-          show-in-column="total_keluhan_informasi_tahun_sebelumnya"
+          :align-by-column="true" column="total_gangguan_tahun_ini" summary-type="sum" display-format="{0}"
-          :show-in-group-footer="false"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :align-by-column="true"
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_informasi_tahun_ini"
-          column="total_keluhan_informasi_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_ini"
-          summary-type="sum"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-          display-format="{0}"
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_informasi_tahun_ini"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_ini"
-        />
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
-        <DxGroupItem
+        <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_ini" :show-in-group-footer="false"
-          css-class="!text-right"
+          :align-by-column="true" column="total_informasi_tahun_ini" summary-type="sum" display-format="{0}"
-          show-in-column="total_gangguan_informasi_tahun_sebelumnya"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          :show-in-group-footer="false"
+        <DxGroupItem css-class="!text-right" show-in-column="total_tahun_ini" :show-in-group-footer="false"
-          :align-by-column="true"
+          :align-by-column="true" column="total_tahun_ini" summary-type="sum" display-format="{0}"
-          column="total_gangguan_informasi_tahun_sebelumnya"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="delta_keluhan" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="delta_keluhan" summary-type="sum" display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="delta_gangguan" :show-in-group-footer="false"
-        <DxGroupItem
+          :align-by-column="true" column="delta_gangguan" summary-type="sum" display-format="{0}"
-          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          show-in-column="total_informasi_tahun_sebelumnya"
+        <DxGroupItem css-class="!text-right" show-in-column="delta_informasi" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="delta_informasi" summary-type="sum" display-format="{0}"
-          :align-by-column="true"
+          :customize-text="(e: any) => formatNumber(e.value)" />
-          column="total_informasi_tahun_sebelumnya"
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_keluhan" :show-in-group-footer="false"
-          summary-type="sum"
+          :align-by-column="true" column="persen_delta_keluhan" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          display-format="{0}"
+    " />
-          :customize-text="(e: any) => formatNumber(e.value)"
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_gangguan" :show-in-group-footer="false"
-        />
+          :align-by-column="true" column="persen_delta_gangguan" summary-type="avg" display-format="{0}"
-        <DxGroupItem
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          css-class="!text-right"
+    " />
-          show-in-column="total_tahun_sebelumnya"
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_informasi" :show-in-group-footer="false"
-          :show-in-group-footer="false"
+          :align-by-column="true" column="persen_delta_informasi" summary-type="avg" display-format="{0}"
-          :align-by-column="true"
+          :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          column="total_tahun_sebelumnya"
+    " />
-          summary-type="sum"
+        <DxGroupItem css-class="!text-right" show-in-column="persen_delta_total" :show-in-group-footer="false"
-          display-format="{0}"
+          :align-by-column="true" column="persen_delta_total" summary-type="avg" display-format="{0}" :customize-text="(e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          :customize-text="(e: any) => formatNumber(e.value)"
+    " />
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_keluhan_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_keluhan_informasi_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_informasi_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_informasi_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_informasi_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_tahun_ini"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="delta_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="delta_keluhan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="delta_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="delta_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="delta_informasi"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="delta_informasi"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_keluhan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_keluhan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_gangguan"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_informasi"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_informasi"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="persen_delta_total"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="persen_delta_total"
-          summary-type="avg"
-          display-format="{0}"
-          :customize-text="
-            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
-          "
-        />
       </DxSummary>
 
       <template #formatNumber="{ data }">

src/utils/api/api.graphql.ts

@@ -143,6 +143,7 @@ export const queries = {
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
+          $media: String!
         ) {
           daftarKeluhanDiselesaikanCC123(
             dateFrom: $dateFrom
@@ -150,22 +151,28 @@ export const queries = {
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
+            media: $media
           ) {
-            alamat_pelapor
-            idpel_nometer
-            jumlah_lapor
-            pembuat_laporan
-            keterangan_pelapor
-            media
-            nama_uid
-            nama_ulp
-            nama_pelapor
             no_laporan
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            status_akhir
+            pembuat_laporan
+            waktu_lapor
+            waktu_recovery
+            jumlah_lapor
+            media
             nama_issuetype
             nama_subissuetype
-            no_telp_pelapor
-            status_akhir
-            waktu_recovery
           }
         }
       `,
@@ -973,6 +980,70 @@ export const queries = {
           }
         }
       `,
+      gangguanKoreksiTransaksiIndividualDetail: gql`
+        query detailGangguanKoreksiTransaksiIndividu(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          detailGangguanKoreksiTransaksiIndividu(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            no_laporan
+            tgl_lapor
+            tgl_lapor_sblm
+            tgl_lapor_sdh
+            tgl_penugasan_sblm
+            tgl_penugasan_sdh
+            tgl_perjalanan_sblm
+            tgl_perjalanan_sdh
+            tgl_pengerjaan_sblm
+            tgl_pengerjaan_sdh
+            tgl_nyala_sementara_sblm
+            tgl_nyala_sementara_sdh
+            tgl_nyala_sblm
+            tgl_nyala_sdh
+            tgl_selesai_sblm
+            tgl_selesai_sdh
+            durasi_response_time_sblm
+            durasi_recovery_time_sblm
+            durasi_response_time_sdh
+            durasi_recovery_time_sdh
+            kelompok_sblm
+            kelompok_sdh
+            sub_kelompok_sblm
+            sub_kelompok_sdh
+            fasilitas_id_sblm
+            fasilitas_id_sdh
+            sub_fasilitas_id_sblm
+            sub_fasilitas_id_sdh
+            equipment_id_sblm
+            equipment_id_sdh
+            event_damage_sblm
+            event_damage_sdh
+            cause_id_sblm
+            cause_id_sdh
+            cause_group_id_sblm
+            cause_group_id_sdh
+            weather_id_sblm
+            weather_id_sdh
+            grup_koreksi
+            alasan
+            idpel_nometer
+            keterangan_pelapor
+            nama_posko
+            tindakan
+            penyebab
+          }
+        }
+      `,
       jenisGangguanSE004: gql`
         query rekapitulasiJenisGangguanSE004(
           $dateFrom: Date!
@@ -1137,6 +1208,60 @@ export const queries = {
           }
         }
       `,
+      gangguanDiselesaikanMobileAPKTDetail: gql`
+        query detailGangguanDiselesaikanMobileApkt(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idRegu: Int!
+        ) {
+          detailGangguanDiselesaikanMobileApkt(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idRegu: $idRegu
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            no_laporan
+            pembuat_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_dispatch_time
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            is_marking
+            referensi_marking
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            jarak_closing
+            dispatch_oleh
+            diselesaikan_oleh
+            penyebab
+            tindakan
+            kode_gangguan
+            jenis_gangguan
+          }
+        }
+      `,
       rekapGangguanAlihPosko: gql`
         query rekapitulasiGangguanCleansingTransaksiTM(
           $dateFrom: Date!

src/utils/texts.ts

@@ -11,13 +11,22 @@ const splitRoutePath = (routePath: string): string[] => {
 
   return routeArray
 }
-const getMonthName = (monthNumber :number)=> {
+const getMonthName = (monthNumber: number) => {
   const months = [
     'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
     'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
   ];
   return months[monthNumber - 1] || '';
-  }
+}
-export {
+const getMonthNameShort = (monthNumber: number) => {
-    splitRoutePath,getMonthName
+  const months = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+    'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
+  ];
+  return months[monthNumber - 1] || '';
+
+
+}
+export {
+  splitRoutePath, getMonthName, getMonthNameShort
 }