diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index c7235d8..e743306 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -28,17 +28,17 @@
       <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(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunLalu}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(bulanSekarang)} ${tahunSekarang}`" css-class="custom-table-column" />
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
@@ -127,31 +127,31 @@ const onExporting = (e: any) => {
   }
 }
 
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 
 const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.jumlahKaliGangguan, {
   // regional: 0,
   idUp3: 0,
   idUid: 0,
   idUlp: 0,
-  bulan: bulanSekarang.value,
-  tahun: tahunSekarang.value
+  bulan: currentMonth.value,
+  tahun: currentYear.value
 })
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
-  tahunSekarang.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 0b89cb5..239781d 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -1,133 +1,48 @@
 <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
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn
-          :min-width="170"
-          alignment="center"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          cell-template="cell-left"
-        />
+        <DxColumn :min-width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
+          css-class="custom-table-column" cell-template="cell-left" />
       </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"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="sla_gangguan"
-            data-type="number"
-            caption="SLA (Menit)"
-            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" />
+          <DxColumn :width="150" alignment="center" data-field="sla_gangguan" data-type="number" caption="SLA (Menit)"
+            css-class="custom-table-column" />
         </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"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="sla_keluhan"
-            data-type="number"
-            caption="SLA (Jam)"
-            css-class="custom-table-column"
-          />
+        <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" />
+          <DxColumn :width="150" alignment="center" data-field="sla_keluhan" data-type="number" caption="SLA (Jam)"
+            css-class="custom-table-column" />
         </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="percent"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="aging_complaint_keluhan"
-          data-type="number"
-          caption="K"
-          css-class="custom-table-column"
-          cell-template="percent"
-        />
+        <DxColumn :width="150" alignment="center" data-field="aging_complaint_gangguan" data-type="number" caption="G"
+          css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="aging_complaint_keluhan" data-type="number" caption="K"
+          css-class="custom-table-column" cell-template="percent" />
       </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="percent"
-      />
+      <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="percent" />
 
       <template #percent="{ data }">
         <p>{{ data.text }}%</p>
@@ -169,9 +84,9 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -214,23 +129,23 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0,
     idUid: 0,
     idUlp: 0,
-    bulan: bulanSekarang.value,
-    tahun: tahunSekarang.value
+    bulan: currentMonth.value,
+    tahun: currentYear.value
   }
 )
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
-  tahunSekarang.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index ac4b6fb..716d9bf 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -1,100 +1,38 @@
 <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
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
       <DxColumn alignment="center" caption="Periode: Februari,2020" css-class="custom-table-column">
-        <DxColumn
-          :min-width="170"
-          alignment="center"
-          data-field="nama_ulp"
-          caption="Nama Unit"
-          css-class="custom-table-column"
-          cell-template="cell-left"
-        />
+        <DxColumn :min-width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit"
+          css-class="custom-table-column" cell-template="cell-left" />
       </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"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="tidak_terencana"
-          data-type="number"
-          caption="Tidak Terencana"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="bencana_alam"
-          data-type="number"
-          caption="Bencana Alam"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="tidak_terencana" data-type="number"
+          caption="Tidak Terencana" css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="bencana_alam" data-type="number" caption="Bencana Alam"
+          css-class="custom-table-column" />
       </DxColumn>
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="total"
-        data-type="number"
-        caption="Total"
-        css-class="custom-table-column"
-      />
-      <DxColumn
-        :min-width="170"
-        alignment="center"
-        data-field="kpi_ens"
-        data-type="number"
-        caption="KPI ENS"
-        css-class="custom-table-column"
-      />
+      <DxColumn :width="170" alignment="center" data-field="total" data-type="number" caption="Total"
+        css-class="custom-table-column" />
+      <DxColumn :min-width="170" alignment="center" data-field="kpi_ens" data-type="number" caption="KPI ENS"
+        css-class="custom-table-column" />
 
       <template #cell-left="{ data }">
         <p class="text-left">
@@ -133,9 +71,9 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -178,22 +116,22 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0,
     idUid: 0,
     idUlp: 0,
-    bulan: bulanSekarang.value,
-    tahun: tahunSekarang.value
+    bulan: currentMonth.value,
+    tahun: currentYear.value
   }
 )
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
-  tahunSekarang.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index 4f929f6..8d1eb48 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -1,107 +1,40 @@
 <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
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :min-width="250"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="cell-left"
-      />
-      <DxColumn
-        alignment="center"
-        caption="Kepatuhan dan Akurasi APKT"
-        css-class="custom-table-column"
-      >
+      <DxColumn :min-width="250" alignment="center" data-field="nama_ulp" caption="Nama Unit"
+        css-class="custom-table-column" cell-template="cell-left" />
+      <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"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="gangguan_total"
-            data-type="number"
-            caption="Total Gangguan"
-            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" />
+          <DxColumn :width="150" alignment="center" data-field="gangguan_total" data-type="number"
+            caption="Total Gangguan" css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Keluhan Berulang" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="komplain_pelanggan"
-            data-type="number"
-            caption="Jan 2020"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="keluhan_total"
-            data-type="number"
-            caption="Total Keluhan"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="komplain_pelanggan" data-type="number" caption="Jan 2020"
+            css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="keluhan_total" data-type="number" caption="Total Keluhan"
+            css-class="custom-table-column" />
         </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="percent"
-      />
+      <DxColumn :min-width="150" alignment="center" data-field="komplain_pelanggan" data-type="number"
+        caption="Komplain Pelanggan %" css-class="custom-table-column" cell-template="percent" />
 
       <template #percent="{ data }">
         <p>{{ data.text }}%</p>
@@ -143,9 +76,9 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -188,23 +121,23 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0,
     idUid: 0,
     idUlp: 0,
-    bulan: bulanSekarang.value,
-    tahun: tahunSekarang.value
+    bulan: currentMonth.value,
+    tahun: currentYear.value
   }
 )
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
-  tahunSekarang.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 756c240..8bbe755 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -1,235 +1,79 @@
 <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
-      class="max-h-[calc(100vh-140px)] mb-10"
-      :data-source="data"
-      :show-column-lines="true"
-      :show-row-lines="false"
-      :show-borders="true"
-      :row-alternation-enabled="true"
-      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
-      :column-width="100"
-      @exporting="onExporting"
-      :allow-column-resizing="true"
-      column-resizing-mode="widget"
-      :word-wrap-enabled="true"
-    >
+    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
+      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
+      column-resizing-mode="widget" :word-wrap-enabled="true">
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+        v-if="loading" v-model:visible="loading" :enabled="true" />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport
-        :enabled="true"
-        :formats="['pdf', 'xlsx', 'document']"
-        :allow-export-selected-data="false"
-      />
+      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
-        css-class="custom-table-column"
-        cell-template="cell-left"
-      />
+      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
+        cell-template="cell-left" />
 
-      <DxColumn
-        alignment="center"
-        :caption="`s.d ${getMonthName(bulanSekarang - 1)} ${tahunLalu}`"
-        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 - 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="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(bulanSekarang - 1)} ${tahunSekarang}`"
-        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"
-        />
-        <DxColumn
-          :width="120"
-          alignment="center"
-          data-field="total_gangguan_tahun_ini"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
+      <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" />
+        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_ini" 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_ini"
-            data-type="number"
-            caption="Keluhan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_gangguan_informasi_tahun_ini"
-            data-type="number"
-            caption="Gangguan"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="120"
-            alignment="center"
-            data-field="total_informasi_tahun_ini"
-            data-type="number"
-            caption="Total"
-            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" />
+          <DxColumn :width="120" alignment="center" data-field="total_gangguan_informasi_tahun_ini" data-type="number"
+            caption="Gangguan" css-class="custom-table-column" />
+          <DxColumn :width="120" alignment="center" data-field="total_informasi_tahun_ini" 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_ini"
-          data-type="number"
-        />
+        <DxColumn alignment="center" caption="Total Komplain" css-class="custom-table-column" data-field="total_tahun_ini"
+          data-type="number" />
       </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"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="delta_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="delta_keluhan" data-type="number" caption="Keluhan"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="delta_gangguan" data-type="number" caption="Gangguan"
+          css-class="custom-table-column" />
+        <DxColumn :width="150" alignment="center" data-field="delta_informasi" data-type="number" caption="Informasi"
+          css-class="custom-table-column" />
       </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="percent"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_gangguan"
-          data-type="number"
-          caption="Gangguan"
-          css-class="custom-table-column"
-          cell-template="percent"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_informasi"
-          data-type="number"
-          caption="Informasi"
-          css-class="custom-table-column"
-          cell-template="percent"
-        />
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="persen_delta_total"
-          data-type="number"
-          caption="% Total"
-          css-class="custom-table-column"
-          cell-template="percent"
-        />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_keluhan" data-type="number" caption="Keluhan"
+          css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_gangguan" data-type="number" caption="Gangguan"
+          css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_informasi" data-type="number"
+          caption="Informasi" css-class="custom-table-column" cell-template="percent" />
+        <DxColumn :width="150" alignment="center" data-field="persen_delta_total" data-type="number" caption="% Total"
+          css-class="custom-table-column" cell-template="percent" />
       </DxColumn>
 
       <template #percent="{ data }">
@@ -273,9 +117,9 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -318,23 +162,23 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0,
     idUid: 0,
     idUlp: 0,
-    bulan: bulanSekarang.value,
-    tahun: tahunSekarang.value
+    bulan: currentMonth.value,
+    tahun: currentYear.value
   }
 )
 
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  bulanSekarang.value = bulan.id
-  tahunSekarang.value = tahun.id
-  tahunLalu.value = tahun.id - 1
+  currentMonth.value = bulan.id
+  currentYear.value = tahun.id
+  lastYear.value = tahun.id - 1
   refetch({
     // regional: regional,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,
-    bulan: bulan ? bulan.id : bulanSekarang.value,
-    tahun: bulan ? tahun.id : tahunSekarang.value
+    bulan: bulan ? bulan.id : currentMonth.value,
+    tahun: bulan ? tahun.id : currentYear.value
   })
 
   onResult((queryResult) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index f8a8db4..ee5b6e5 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -19,7 +19,7 @@
       <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Nama Unit" css-class="custom-table-column"
         cell-template="cell-left" />
 
-      <DxColumn alignment="center" :caption="`s.d ${getMonthName(bulanSekarang - 1)} ${tahunLalu}`"
+      <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" />
@@ -37,7 +37,7 @@
           data-field="total_tahun_sebelumnya" data-type="number" />
       </DxColumn>
 
-      <DxColumn alignment="center" :caption="`s.d ${getMonthName(bulanSekarang - 1)} ${tahunSekarang}`"
+      <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" />
@@ -118,9 +118,9 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const tahunSekarang = ref(new Date().getFullYear())
-const bulanSekarang = ref(new Date().getMonth())
-const tahunLalu = ref(tahunSekarang.value - 1)
+const currentYear = ref(new Date().getFullYear())
+const currentMonth = ref(new Date().getMonth())
+const lastYear = ref(currentYear.value - 1)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -165,9 +165,9 @@ const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.lapora
 })
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
-  tahunSekarang.value = tahun.id
-  bulanSekarang.value = bulan.id
-  tahunLalu.value = tahun.id - 1
+  currentYear.value = tahun.id
+  currentMonth.value = bulan.id
+  lastYear.value = tahun.id - 1
 
   refetch({
     regional: regional,