From 649d92caa4748361248f2fd5557c7df41d838eb3 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 21 Mar 2024 15:05:09 +0700
Subject: [PATCH 1/9] update jenis Gangguan SE 004

---
 .../Gangguan/Rekap/RGangguan_JenisGangguanSE.vue    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 7c6ddc8..bbd8201 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -49,7 +49,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"
@@ -275,7 +281,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)
     }
   })
 
@@ -926,8 +931,8 @@ const showDetail = () => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

From 0765263c952fb22892e5dc774d7e9152a93793a9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 21 Mar 2024 15:29:45 +0700
Subject: [PATCH 2/9] Refactor RGangguan_ALL.vue component

---
 src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 420b953..ab7b216 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -362,22 +362,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"
@@ -1024,7 +1024,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'
@@ -1036,7 +1035,6 @@ 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'
-import autoTable from 'jspdf-autotable'
 import { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 
 const client = apolloClient()

From b245f233fc8844a76bf9c22da8ead6de30a0af80 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 21 Mar 2024 15:55:22 +0700
Subject: [PATCH 3/9] Refactor data sorting and logging in
 RGangguan_PerPosko.vue

---
 .../Pages/Gangguan/Rekap/RGangguan_PerPosko.vue        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index ec2f91f..da6f0fa 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/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()
   }
-  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) =>
-        a.nama_up3 > b.nama_up3 ? 1 : -1
-      )
+      const result: any[] = [...queryResult.data.rekapitulasiGangguanPerPosko]
+      console.table(result)
+      data.value = result.sort((a: any, b: any) => a?.nama_up3.localeCompare(b?.nama_up3))
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {

From 8c5667de0bda9e7b17abbdbae768d6fea390cc70 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 21 Mar 2024 16:57:01 +0700
Subject: [PATCH 4/9] Fix data loading issue and show detail on data selection

---
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      | 449 +++++++++++++++++-
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   |  10 +-
 2 files changed, 432 insertions(+), 27 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index ddae08d..2e0b7f7 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/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="loading"
+        v-model:visible="loadingData"
         :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 dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  clearSelection()
+
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[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
 })
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 6109a1d..a397552 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/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()
   }
-  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
 
@@ -775,16 +776,13 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanPerTanggal
+      loadingData.value = false
     }
-    console.log(queryResult.data)
   })
 
   onError((error) => {
     console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
+    loadingData.value = false
   })
 }
 

From 381a8672ccd8fe1a6cba965b0230f4fb09a9b2b6 Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Thu, 21 Mar 2024 17:35:56 +0700
Subject: [PATCH 5/9] Monalisa Fix Column Name

---
 .env.development                              |   2 +-
 .../MonalisaGR_DispatchingTimeGangguan.vue    | 211 ++---
 .../Gangguan/Rekap/MonalisaGR_ENSGangguan.vue | 203 ++---
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue | 363 ++------
 .../Rekap/MonalisaGR_JumlahKaliGangguan.vue   | 299 ++-----
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  | 284 ++----
 .../Rekap/MonalisaGR_RecoveryTimeGangguan.vue | 211 ++---
 .../Rekap/MonalisaGR_ResponseTimeGangguan.vue | 211 ++---
 .../Rekap/MonalisaKR_JumlahKaliKeluhan.vue    | 288 ++----
 .../Rekap/MonalisaKR_LaporUlangKeluhan.vue    | 284 ++----
 .../Rekap/MonalisaKR_RecoveryTimeKeluhan.vue  | 311 ++-----
 .../Rekap/MonalisaKR_ResponseTimeKeluhan.vue  | 311 ++-----
 .../Bulanan/MonalisaLB_AgingComplaint.vue     | 624 +++----------
 .../Bulanan/MonalisaLB_EnergyNotSales.vue     | 278 ++----
 .../Bulanan/MonalisaLB_KADDalamPelaporan.vue  | 292 ++----
 .../MonalisaLB_PenurunanJumlahKomplain.vue    |   8 +-
 .../Kumulatif/MonalisaLK_AgingComplaint.vue   | 377 ++------
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   | 278 ++----
 .../Kumulatif/MonalisaLK_KDADPelaporan.vue    | 292 ++----
 .../MonalisaLK_PenurunanJumlahKomplain.vue    | 841 ++++--------------
 src/utils/texts.ts                            |  43 +-
 21 files changed, 1374 insertions(+), 4637 deletions(-)

diff --git a/.env.development b/.env.development
index 6bf8543..00649eb 100755
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@ VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
-VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
+VITE_APP_GRAPHQL_ENDPOINT=http://10.8.0.13: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_REST_ENDPOINT=http://10.1.50.173:32181
\ No newline at end of file
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 8fecaa5..01d6c98 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -1,50 +1,21 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
       <!-- <DxColumn
@@ -57,140 +28,57 @@
         :group-index="0"
         name="namaUlp"
       /> -->
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        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" :min-width="170" 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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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
-          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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index c1c7e08..a5b9d9b 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -1,127 +1,55 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn alignment="center" 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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -132,55 +60,21 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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 summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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
-          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)"
-        />
+        <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>
     </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
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 1907d7d..ce46ac5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -1,95 +1,40 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="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
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="formatText"
-      />
+      <DxColumn alignment="center" 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
-          :width="150"
-          alignment="center"
-          data-field="jumlah_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          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 :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
+          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">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -100,228 +45,67 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="jumlah_gangguan"
-          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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="jumlah_gangguan" 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
-    :open="dialogDetail"
-    title="Detail Gangguan Belum Selesai"
-    @on-close="closeDialog"
-    :full-width="true"
-  >
+  <DetailDialog :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
-          :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"
-        >
+        <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"
-          />
+          <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"
-          />
+          <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=""
-            caption="No Laporan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="UID/UIW"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="UP3"
-            :allow-resizing="false"
-            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"
-          />
+          <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="" caption="No Laporan" css-class="custom-table-column"
+            cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" css-class="custom-table-column"
+            cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="UP3" :allow-resizing="false"
+            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)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index b2c15b1..39e9d21 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -1,89 +1,31 @@
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="filterData(filters)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible.sync="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :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
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :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_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" 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_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,174 +37,66 @@
       /> -->
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          :align-by-column="true"
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="mom_bulan_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_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)"
-        />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_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_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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="namaULP"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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
-          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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="namaULP"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 6fd0bc4..1d64293 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -1,137 +1,59 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        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" data-field="nama_ulp" caption="Nama Unit" 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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -142,110 +64,39 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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 summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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
-          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)"
-        />
+        <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)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          display-format="{0}"
-          show-in-column="mom_bulan_kemarin"
-          column="mom_bulan_kemarin"
-          css-class="!text-right"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="mom_bulan_ini"
-          column="mom_bulan_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_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)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
+          show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="mom_bulan_ini" column="mom_bulan_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_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
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 51374f9..c8e666c 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -1,50 +1,21 @@
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
       <!-- <DxColumn
@@ -57,140 +28,57 @@
         :group-index="0"
         name="namaUlp"
       /> -->
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        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" :min-width="170" 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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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
-          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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 410faf4..1d591eb 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -1,50 +1,21 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    :report-button="true"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
       <!-- <DxColumn
@@ -57,140 +28,57 @@
         :group-index="0"
         name="namaUlp"
       /> -->
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        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" :min-width="170" 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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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
-          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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index c24df84..f8ec0d3 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -1,250 +1,91 @@
 <template>
-  <Filters
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    @reset-form="data = []"
-    class="mb-4"
-  >
+  <Filters @run-search="() => filterData(filters)" :report-button="true" @reset-form="data = []" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :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="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" :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="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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          :align-by-column="true"
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="mom_bulan_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_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)"
-        />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_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_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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="namaULP"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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
-          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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="namaULP"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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 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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 4d2e245..cc03e29 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -1,244 +1,95 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        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" data-field="nama_ulp" caption="Nama Unit" 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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          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 summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          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
-          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)"
-        />
+        <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)" />
 
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          display-format="{0}"
-          show-in-column="mom_bulan_kemarin"
-          column="mom_bulan_kemarin"
-          css-class="!text-right"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="mom_bulan_ini"
-          column="mom_bulan_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_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)"
-        />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum" display-format="{0}"
+          show-in-column="mom_bulan_kemarin" column="mom_bulan_kemarin" css-class="!text-right" />
+        <DxGroupItem :show-in-group-footer="false" :align-by-column="true" summary-type="sum"
+          show-in-column="mom_bulan_ini" column="mom_bulan_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_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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index ad86070..e1597c5 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -1,269 +1,93 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Nama Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <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" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
+        css-class="custom-table-column" :group-index="0" />
+      <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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          :align-by-column="true"
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="mom_bulan_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_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)"
-        />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_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_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
-          summary-type="sum"
-          display-format="RATA-RATA"
-          show-in-column="namaULP"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="mom_bulan_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="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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA" show-in-column="namaULP"
+          css-class="text-white !text-left" />
+        <DxTotalItem :align-by-column="true" column="mom_bulan_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="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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index 0567ec7..8701c3b 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -1,269 +1,93 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Nama Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <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" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
+        css-class="custom-table-column" :group-index="0" />
+      <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
-            :width="150"
-            alignment="center"
-            data-field="mom_bulan_kemarin"
-            data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
+            :caption="`${getMonthName(lastMonth)} ${lastYearMoM}`" 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
-            :width="150"
-            alignment="center"
-            data-field="yoy_tahun_kemarin"
-            data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
-            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 :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" 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
-          :align-by-column="true"
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          :align-by-column="true"
-          column="mom_bulan_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_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)"
-        />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_kemarin" summary-type="sum" display-format="{0}"
+          css-class="!text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem :align-by-column="true" column="mom_bulan_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_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
-          summary-type="sum"
-          display-format="RATA-RATA"
-          show-in-column="namaULP"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          :align-by-column="true"
-          column="mom_bulan_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="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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA" show-in-column="namaULP"
+          css-class="text-white !text-left" />
+        <DxTotalItem :align-by-column="true" column="mom_bulan_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="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 }">
         <p class="text-right">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 8e6539b..aeb6d57 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -1,320 +1,114 @@
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onDataSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="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
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-model:visible="loadingData" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_regional"
-          caption="Nama Regional"
-          css-class="custom-table-column"
-          :group-index="0"
-        />
-        <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="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
+        <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="na  ma_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
-          alignment="center"
-          caption="Rata-Rata RCT Gangguan"
-          css-class="custom-table-column"
-        >
-          <DxColumn
-            :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 alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
+            :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`" 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
-          alignment="center"
-          caption="Rata-Rata RCT Keluhan"
-          css-class="custom-table-column"
-        >
-          <DxColumn
-            :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 alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
+            :caption="`${getMonthNameShort(currentMonth)} ${currentYear}`" 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
-          :width="150"
-          alignment="center"
-          data-field="aging_complaint_gangguan"
-          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 :width="150" alignment="center" data-field="aging_complaint_gangguan" 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
-        :min-width="170"
-        alignment="center"
-        data-field="avg_aging_complaint"
-        data-type="number"
-        caption="% Rata-Rata Aging Complains"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
+      <DxColumn :min-width="170" 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
-          summary-type="sum"
-          display-format="RATA-RATA NASIONAL"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="sla_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :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%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA NASIONAL" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="sla_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :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
-          css-class="!text-right"
-          show-in-column="avg_durasi_recovery_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="sla_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="sla_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          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%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_gangguan" :show-in-group-footer="false"
+          :align-by-column="true" column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="sla_gangguan" :show-in-group-footer="false"
+          :align-by-column="true" column="sla_gangguan" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" 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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -332,212 +126,68 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Detail (Monalisa) Aging Complaint"
-    @on-close="closedialogDetail"
-    :full-width="true"
-  >
+  <DetailDialog :open="dialogDetail" 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
-          :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"
-        >
+        <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"
-          />
+          <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"
-          />
+          <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"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="UID/UIW"
-            :allow-resizing="false"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
-            caption="UP3"
-            :allow-resizing="false"
-            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"
-          />
+          <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" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" :allow-resizing="false"
+            css-class="custom-table-column" cell-template="formatText" />
+          <DxColumn :width="150" alignment="center" data-field="" caption="UP3" :allow-resizing="false"
+            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">
               {{
-                isNumber(data.text)
-                  ? data.column.caption == '%'
-                    ? formatPercentage(data.text)
-                    : formatNumber(data.text)
-                  : data.text
-              }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
             </p>
           </template>
 
@@ -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'
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index d366fa6..14293d3 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -1,243 +1,87 @@
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_regional"
-          caption="Nama Regional"
-          css-class="custom-table-column"
-          :group-index="0"
-        />
-        <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="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
+        <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
-          :width="150"
-          alignment="center"
-          data-field="terencana"
-          data-type="number"
-          caption="Terencana"
-          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 :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
+          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
-        :width="170"
-        alignment="center"
-        data-field="total"
-        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"
-      />
+      <DxColumn :width="170" alignment="center" data-field="total" 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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :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
-          css-class="!text-right"
-          show-in-column="terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="tidak_terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          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)"
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
+          :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
+          :align-by-column="true" 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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index 25263cb..88026a8 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -1,253 +1,91 @@
 <template>
-  <Filters
-    :report-button="true"
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    class="mb-4"
-  >
+  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Nama Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <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" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
+        css-class="custom-table-column" :group-index="0" />
+      <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
-            :width="150"
-            alignment="center"
-            data-field="gangguan_berulang"
-            data-type="number"
-            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 :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
+            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" 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
-            :width="150"
-            alignment="center"
-            data-field="keluhan_berulang"
-            data-type="number"
-            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 :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
+            :caption="`${getMonthNameShort(currentMonth)}, ${currentYear}`" 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
-        :min-width="150"
-        alignment="center"
-        data-field="komplain_pelanggan"
-        data-type="number"
-        caption="Komplain Pelanggan %"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
+      <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="gangguan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <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%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <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
-          css-class="!text-right"
-          show-in-column="gangguan_berulang"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="gangguan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="gangguan_total"
-          :show-in-group-footer="false"
-          :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%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
+          :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
+          :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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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 = [
       {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 194351d..b2d5419 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/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 = [
       {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 53a52cb..b6808eb 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -1,321 +1,114 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_regional"
-          caption="Nama Regional"
-          css-class="custom-table-column"
-          :group-index="0"
-        />
-        <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="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
+        <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
-          alignment="center"
-          caption="Rata-Rata RCT Gangguan"
-          css-class="custom-table-column"
-        >
-          <DxColumn
-            :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 alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
+            :caption="`Periode: ${getMonthNameShort(currentMonth)}, ${currentYear}`" 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
-          alignment="center"
-          caption="Rata-Rata RCT Keluhan"
-          css-class="custom-table-column"
-        >
-          <DxColumn
-            :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 alignment="center" caption="Rata-Rata RCT Keluhan" css-class="custom-table-column">
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_keluhan" data-type="number"
+            :caption="`Periode: ${getMonthNameShort(currentMonth)}, ${currentYear}`" 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
-          :width="150"
-          alignment="center"
-          data-field="aging_complaint_gangguan"
-          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 :width="150" alignment="center" data-field="aging_complaint_gangguan" 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
-        :min-width="170"
-        alignment="center"
-        data-field="avg_aging_complaint"
-        data-type="number"
-        caption="% Rata-Rata Aging Complains"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
+      <DxColumn :min-width="170" 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
-          summary-type="sum"
-          display-format="RATA-RATA NASIONAL"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="sla_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :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%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="RATA-RATA NASIONAL" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="sla_gangguan" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :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
-          css-class="!text-right"
-          show-in-column="avg_durasi_recovery_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="avg_durasi_recovery_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="sla_gangguan"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="sla_gangguan"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          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%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="avg_durasi_recovery_gangguan" :show-in-group-footer="false"
+          :align-by-column="true" column="avg_durasi_recovery_gangguan" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="sla_gangguan" :show-in-group-footer="false"
+          :align-by-column="true" column="sla_gangguan" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" 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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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' }
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index b763ef7..bdf1e2a 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -1,243 +1,87 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn
-          alignment="center"
-          :min-width="170"
-          data-type="text"
-          data-field="nama_regional"
-          caption="Nama Regional"
-          css-class="custom-table-column"
-          :group-index="0"
-        />
-        <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="`Periode: ${getMonthName(currentMonth)}, ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn alignment="center" :min-width="170" data-type="text" data-field="nama_regional"
+          caption="Nama Regional" css-class="custom-table-column" :group-index="0" />
+        <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
-          :width="150"
-          alignment="center"
-          data-field="terencana"
-          data-type="number"
-          caption="Terencana"
-          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 :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
+          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
-        :width="170"
-        alignment="center"
-        data-field="total"
-        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"
-      />
+      <DxColumn :width="170" alignment="center" data-field="total" 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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :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)"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="terencana" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
+          :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
-          css-class="!text-right"
-          show-in-column="terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="terencana"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="tidak_terencana"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          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)"
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="terencana" :show-in-group-footer="false"
+          :align-by-column="true" column="terencana" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="tidak_terencana" :show-in-group-footer="false"
+          :align-by-column="true" 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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index 7ba9dc2..d3657aa 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -1,253 +1,91 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Nama Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <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" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
+        css-class="custom-table-column" :group-index="0" />
+      <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
-            :width="150"
-            alignment="center"
-            data-field="gangguan_berulang"
-            data-type="number"
-            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 :width="150" alignment="center" data-field="gangguan_berulang" data-type="number"
+            :caption="`s.d ${getMonthNameShort(currentMonth)} ${lastYear}`" 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
-            :width="150"
-            alignment="center"
-            data-field="keluhan_berulang"
-            data-type="number"
-            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 :width="150" alignment="center" data-field="keluhan_berulang" data-type="number"
+            :caption="` s.d ${getMonthNameShort(currentMonth)} ${currentYear}`" 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
-        :min-width="150"
-        alignment="center"
-        data-field="komplain_pelanggan"
-        data-type="number"
-        caption="Komplain Pelanggan %"
-        css-class="custom-table-column"
-        cell-template="formatPercentage"
-      />
+      <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="formatPercentage" />
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="gangguan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <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%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="gangguan_berulang" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <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
-          css-class="!text-right"
-          show-in-column="gangguan_berulang"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="gangguan_berulang"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="gangguan_total"
-          :show-in-group-footer="false"
-          :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%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_berulang" :show-in-group-footer="false"
+          :align-by-column="true" column="gangguan_berulang" summary-type="sum" display-format="{0}"
+          :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="gangguan_total" :show-in-group-footer="false"
+          :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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
@@ -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 = [
       {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index c172a58..ecd0678 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -1,700 +1,223 @@
 <template>
-  <Filters
-    @reset-form="data = []"
-    @run-search="() => filterData(filters)"
-    :report-button="true"
-    class="mb-4"
-  >
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
     <Type2 @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
-    <DxDataGrid
-      ref="dataGridRef"
-      :allow-column-reordering="true"
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid ref="dataGridRef" :allow-column-reordering="true" class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+      :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
+      :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
+      :word-wrap-enabled="true">
       <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel shading-color="rgba(0,0,0,0.4)" :position="position" :show-indicator="showIndicator"
+        :show-pane="showPane" :shading="shading" v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        alignment="center"
-        :min-width="170"
-        data-type="text"
-        data-field="nama_regional"
-        caption="Nama Regional"
-        css-class="custom-table-column"
-        :group-index="0"
-      />
-      <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" :min-width="170" data-type="text" data-field="nama_regional" caption="Nama Regional"
+        css-class="custom-table-column" :group-index="0" />
+      <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="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :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="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+        css-class="custom-table-column">
+        <DxColumn :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
-            :width="120"
-            alignment="center"
-            data-field="total_keluhan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Keluhan"
-            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 :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
+            data-type="number" caption="Keluhan" 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
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_sebelumnya"
-          data-type="number"
-        />
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_tahun_sebelumnya" data-type="number" />
       </DxColumn>
 
-      <DxColumn
-        alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :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="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+        css-class="custom-table-column">
+        <DxColumn :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
-            :width="120"
-            alignment="center"
-            data-field="total_keluhan_informasi_tahun_sebelumnya"
-            data-type="number"
-            caption="Keluhan"
-            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 :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_sebelumnya"
+            data-type="number" caption="Keluhan" 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
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_sebelumnya"
-          data-type="number"
-          cell-template="formatNumber"
-        />
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column"
+          data-field="total_tahun_sebelumnya" data-type="number" cell-template="formatNumber" />
       </DxColumn>
 
-      <DxColumn
-        alignment="center"
-        :caption="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
-        css-class="custom-table-column"
-      >
-        <DxColumn
-          :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="`s.d ${getMonthName(currentMonth - 1)} ${currentYear}`"
+        css-class="custom-table-column">
+        <DxColumn :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
-            :width="120"
-            alignment="center"
-            data-field="total_keluhan_informasi_tahun_ini"
-            data-type="number"
-            caption="Keluhan"
-            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 :width="120" alignment="center" data-field="total_keluhan_informasi_tahun_ini" data-type="number"
+            caption="Keluhan" 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
-          alignment="center"
-          caption="Total Komplain"
-          css-class="custom-table-column"
-          data-field="total_tahun_ini"
-          data-type="number"
-          cell-template="formatNumber"
-        />
+        <DxColumn alignment="center" 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
-          :width="150"
-          alignment="center"
-          data-field="delta_keluhan"
-          data-type="number"
-          caption="Keluhan"
-          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 :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
+          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
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_keluhan"
-          data-type="number"
-          caption="Keluhan"
-          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 :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
+          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
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxTotalItem
-          column="total_keluhan_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <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
-          column="total_keluhan_informasi_tahun_sebelumnya"
-          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_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxTotalItem
-          column="total_tahun_sebelumnya"
-          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%')
-          "
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="nama_ulp"
+          css-class="text-white !text-left" />
+        <DxTotalItem column="total_keluhan_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <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 column="total_keluhan_informasi_tahun_sebelumnya" 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_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_informasi_tahun_sebelumnya" summary-type="sum" display-format="{0}"
+          css-class="text-white !text-right" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxTotalItem column="total_tahun_sebelumnya" 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
-          css-class="!text-right"
-          show-in-column="total_keluhan_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_gangguan_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_tahun_sebelumnya"
-          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_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_keluhan_informasi_tahun_sebelumnya"
-          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"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_gangguan_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_informasi_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_informasi_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{0}"
-          :customize-text="(e: any) => formatNumber(e.value)"
-        />
-        <DxGroupItem
-          css-class="!text-right"
-          show-in-column="total_tahun_sebelumnya"
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          column="total_tahun_sebelumnya"
-          summary-type="sum"
-          display-format="{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%')
-          "
-        />
+        <DxGroupItem css-class="!text-right" show-in-column="total_keluhan_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_gangguan_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_tahun_sebelumnya"
+          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_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_keluhan_informasi_tahun_sebelumnya"
+          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"
+          :show-in-group-footer="false" :align-by-column="true" column="total_gangguan_informasi_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_informasi_tahun_sebelumnya"
+          :show-in-group-footer="false" :align-by-column="true" column="total_informasi_tahun_sebelumnya"
+          summary-type="sum" display-format="{0}" :customize-text="(e: any) => formatNumber(e.value)" />
+        <DxGroupItem css-class="!text-right" show-in-column="total_tahun_sebelumnya" :show-in-group-footer="false"
+          :align-by-column="true" column="total_tahun_sebelumnya" summary-type="sum" display-format="{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 }">
         <p class="text-right cursor-pointer">
           {{
-            isNumber(data.text)
-              ? data.column.caption == '%'
-                ? formatPercentage(data.text)
-                : formatNumber(data.text)
-              : data.text
-          }}
+    isNumber(data.text)
+      ? data.column.caption == '%'
+        ? formatPercentage(data.text)
+        : formatNumber(data.text)
+      : data.text
+  }}
         </p>
       </template>
 
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
index 9f3036f..b6bc719 100755
--- a/src/utils/texts.ts
+++ b/src/utils/texts.ts
@@ -1,23 +1,32 @@
 const splitRoutePath = (routePath: string): string[] => {
-    const routeParts = routePath.split('/').filter((part) => part !== '')
+  const routeParts = routePath.split('/').filter((part) => part !== '')
 
-    const routeArray: string[] = []
-    let currentRoute = ''
+  const routeArray: string[] = []
+  let currentRoute = ''
 
-    for (const part of routeParts) {
-        currentRoute += `/${part}`
-        routeArray.push(currentRoute)
-    }
-
-    return routeArray
-}
-const getMonthName = (monthNumber :number)=> {
-    const months = [
-      'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
-      'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
-    ];
-    return months[monthNumber - 1] || '';
+  for (const part of routeParts) {
+    currentRoute += `/${part}`
+    routeArray.push(currentRoute)
   }
+
+  return routeArray
+}
+const getMonthName = (monthNumber: number) => {
+  const months = [
+    'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+    'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+  ];
+  return months[monthNumber - 1] || '';
+}
+const getMonthNameShort = (monthNumber: number) => {
+  const months = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+    'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'
+  ];
+  return months[monthNumber - 1] || '';
+
+
+}
 export {
-    splitRoutePath,getMonthName
+  splitRoutePath, getMonthName, getMonthNameShort
 }
\ No newline at end of file

From af4955ecac2eca2c36f8f846b17062c6bf0d4be0 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 21 Mar 2024 17:40:32 +0700
Subject: [PATCH 6/9] Fix data selection bug and add console logs for debugging

---
 .../Gangguan/Rekap/RGangguan_BerdasarMedia.vue     |  4 +---
 .../Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue  | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index de2cdec..a9626eb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/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()
   }
-  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) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index a397552..9abaa52 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -776,13 +776,25 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiGangguanPerTanggal
+    }
+
+    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 = false
+  })
+
+  loadingData.value = loading.value
+
+  watch(loading, (value) => {
+    // loadingData.value = value
   })
 }
 

From efc80dcc28d577bf6c6164d99f110ef093b04d7a Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Thu, 21 Mar 2024 17:41:01 +0700
Subject: [PATCH 7/9] Update GraphQL endpoint in .env.development file

---
 .env.development | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.env.development b/.env.development
index 6bf8543..31db523 100755
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,8 @@ VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
-VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
+# 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://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
\ No newline at end of file

From 0b466985e9e093a1ca7e1da809594845edef40eb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 22 Mar 2024 14:30:26 +0700
Subject: [PATCH 8/9] Refactor data sorting and add number field to tables

---
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    |  30 +-
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |  17 +-
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 319 ++++++++++++------
 .../Rekap/RGangguan_RatingPerPosko.vue        |  24 +-
 .../Rekap/RGangguan_RatingPerRegu.vue         |  32 +-
 src/utils/api/api.graphql.ts                  | 118 +++++++
 6 files changed, 415 insertions(+), 125 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index af63713..50605bf 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/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-type="number"
+        data-field="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()
   }
-  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>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index a58c134..47418d5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/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,
-    idUid: ref.id_uid,
-    idUp3: ref.id_up3
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    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()
   }
-  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSubSelected.value = selectedRowsData[0]
   }
-  console.log(data)
 }
 
 const filterData = (params: any) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index a724b57..777400b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/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,
-    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 : ''
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0
   }
 
   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()
   }
-  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) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index bef40e8..c179ab9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/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>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 9bb3304..00d90c7 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/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>
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 63c172a..50fece3 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -973,6 +973,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 +1201,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!

From a59565679f242d052307063074081aa9c533f845 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 22 Mar 2024 15:40:27 +0700
Subject: [PATCH 9/9] Refactor DKeluhan_ResponseTime.vue and api.graphql.ts

---
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  |   2 +-
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue     | 140 ++++++++++++++++--
 src/utils/api/api.graphql.ts                  |  31 ++--
 3 files changed, 147 insertions(+), 26 deletions(-)

diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index a62e052..e6f36d7 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/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()
   }
-  showDetail()
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 1df66f5..ddbdb43 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/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) => {
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 50fece3..214e4f8 100755
--- a/src/utils/api/api.graphql.ts
+++ b/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
           }
         }
       `,