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] 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