From 79e9a2627b4d9e7ca0537137963ebe1240aa2de6 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 8 Mar 2024 10:04:32 +0700
Subject: [PATCH] Update column widths and captions in Vue components

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    |  23 +-
 .../Rekap/RGangguan_JenisGangguan.vue         |   4 +-
 .../Rekap/RGangguan_JenisGangguanSE.vue       |   4 +-
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     |   4 +-
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      |   4 +-
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   |   4 +-
 .../Rekap/RGangguan_RatingPerPosko.vue        |   6 +-
 .../Rekap/RGangguan_RatingPerRegu.vue         |   6 +-
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |   4 +-
 .../Rekap/RKeluhan_PerFungsiBidang.vue        | 371 ++++--------------
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        |   4 +-
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     |   4 +-
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     |   4 +-
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  |   4 +-
 .../Keluhan/Rekap/RKeluhan_RatingPerUnit.vue  |  22 +-
 .../MonalisaGR_DispatchingTimeGangguan.vue    |   4 +-
 .../Gangguan/Rekap/MonalisaGR_ENSGangguan.vue |   4 +-
 .../MonalisaGR_GangguanPerJenisGangguan.vue   |   2 +-
 .../Rekap/MonalisaGR_JumlahKaliGangguan.vue   |   4 +-
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  |   4 +-
 .../Rekap/MonalisaGR_RecoveryTimeGangguan.vue |   4 +-
 .../Rekap/MonalisaGR_ResponseTimeGangguan.vue |   4 +-
 .../MonalisaKR_GangguanPerJenisKeluhan.vue    |   2 +-
 .../Rekap/MonalisaKR_JumlahKaliKeluhan.vue    |   4 +-
 .../Rekap/MonalisaKR_LaporUlangKeluhan.vue    |   4 +-
 .../Rekap/MonalisaKR_RecoveryTimeKeluhan.vue  |   4 +-
 .../Rekap/MonalisaKR_ResponseTimeKeluhan.vue  |   4 +-
 27 files changed, 132 insertions(+), 380 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 116ba70..e20d550 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -25,11 +25,11 @@
         :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
       <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="Selesai" :allow-resizing="false"
         css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+      <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
         :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
       <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="In Progress"
         :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+      <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
         :allow-resizing="false" css-class="custom-table-column" cell-template="cellRight" />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_dispatch" data-type="number"
@@ -143,11 +143,11 @@
             css-class="custom-table-column" cell-template="cellLeft" />
           <DxColumn :width="150" alignment="center" data-field="" caption="Nama Pelapor" :allow-resizing="false"
             css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
+          <DxColumn :width="200" alignment="center" data-field="" caption="Alamat Pelapor" :allow-resizing="false"
             css-class="custom-table-column" cell-template="cellLeft" />
           <DxColumn :width="150" alignment="center" data-field="" caption="No Telp Pelapor" :allow-resizing="false"
             css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
+          <DxColumn :width="200" alignment="center" data-field="" caption="Keterangan Pelapor" :allow-resizing="false"
             css-class="custom-table-column" cell-template="cellLeft" />
           <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" :allow-resizing="false"
             css-class="custom-table-column" cell-template="cellLeft" />
@@ -166,27 +166,12 @@
           <DxColumn :width="150" alignment="center" data-field="" caption="Tindakan" :allow-resizing="false"
             css-class="custom-table-column" cell-template="cellLeft" />
 
-
-          <template #cellCenter="{ data }">
-            <p class="cursor-pointer">
-              {{ data.text }}
-            </p>
-          </template>
-
           <template #cellLeft="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
-            <p class="text-right cursor-pointer">
-              {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
-            </p>
-          </template>
-
           <template #data-waktu="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 8496896..39d6f71 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -35,13 +35,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
             caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+          <DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
             caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
             caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+          <DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
             caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 9e31081..e376841 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -32,13 +32,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 8d6784f..f6bf771 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -31,13 +31,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
             caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+          <DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
             caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
             caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+          <DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
             caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 2aedae4..0bc185d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -31,13 +31,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.jml" data-type="number"
             caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
+          <DxColumn :width="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
             caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.jml" data-type="number"
             caption="Jml" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
+          <DxColumn :width="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
             caption="%" css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 3a9fc5c..b610124 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -31,13 +31,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="120" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="cellRight" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 296df1e..32a91f0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -27,13 +27,13 @@
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
@@ -59,7 +59,7 @@
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+        <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
           css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index aec1e6c..6b0c0dc 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -27,13 +27,13 @@
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
@@ -59,7 +59,7 @@
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
           css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="%"
+        <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
           css-class="custom-table-column" />
       </DxColumn>
     </DxDataGrid>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index a7e335e..56403df 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -28,11 +28,11 @@
           css-class="custom-table-column" cell-template="defaults" />
         <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Selesai"
           css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+        <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
           css-class="custom-table-column" cell-template="percent" />
         <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="InProgress"
           css-class="custom-table-column" cell-template="defaults" />
-        <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+        <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
           css-class="custom-table-column" cell-template="percent" />
         <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
           caption="Rata-Rata" css-class="custom-table-column" cell-template="defaults" />
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 14d9bc9..588c0c2 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -1,58 +1,25 @@
 <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">
     <Type13 @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
-        css-class="custom-table-column"
-        :width="100"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        data-field="no"
-        caption="No"
-      />
+      <DxColumn css-class="custom-table-column" :width="100" alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" data-field="no"
+        caption="No" />
       <!-- <DxColumn
         :width="120"
         alignment="center"
@@ -63,284 +30,84 @@
         name="NamaUID"
         v-if="filters.groupBy"
       /> -->
-      <DxColumn
-        :width="170"
-        alignment="center"
-        data-field="fungsi_bidang"
-        caption="Fungsi Bidang"
-        css-class="custom-table-column"
-        cell-template="cell-left"
-      />
+      <DxColumn :width="170" alignment="center" data-field="fungsi_bidang" caption="Fungsi Bidang"
+        css-class="custom-table-column" cell-template="cell-left" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn
-          :width="150"
-          alignment="center"
-          data-field="total"
-          data-type="number"
-          caption="Total"
-          css-class="custom-table-column"
-        />
+        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
+          css-class="custom-table-column" />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_selesai"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_selesai"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="percent"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_inproses"
-            data-type="number"
-            caption="Jml"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="persen_inproses"
-            data-type="number"
-            caption="%"
-            css-class="custom-table-column"
-            cell-template="percent"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
+            css-class="custom-table-column" />
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+            css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_durasi_response"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_response"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="min_durasi_response"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="max_durasi_response"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_durasi_response" data-type="number"
+            caption="Total" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_response" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_response" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_response" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="data-waktu" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_diatas_sla_response"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_dibawah_sla_response"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Hari" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_durasi_recovery"
-            data-type="number"
-            caption="Total"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="avg_durasi_recovery"
-            data-type="number"
-            caption="Rata-Rata"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="max_durasi_recovery"
-            data-type="number"
-            caption="Max"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="min_durasi_recovery"
-            data-type="number"
-            caption="Min"
-            css-class="custom-table-column"
-            cell-template="data-waktu"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_durasi_recovery" data-type="number"
+            caption="Total" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+            caption="Rata-Rata" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
+            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn :width="150" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
+            css-class="custom-table-column" cell-template="data-waktu" />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_diatas_sla_recovery"
-            data-type="number"
-            caption=">SLA"
-            css-class="custom-table-column"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="total_dibawah_sla_recovery"
-            data-type="number"
-            caption="≤SLA"
-            css-class="custom-table-column"
-          />
+          <DxColumn :width="150" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+            caption=">SLA" css-class="custom-table-column" />
+          <DxColumn :width="150" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+            caption="≤SLA" css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="no"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_selesai"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}%"
-          column="persen_selesai"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_inproses"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}%"
-          column="persen_inproses"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_durasi_response"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="avg_durasi_response"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="min_durasi_response"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="max_durasi_response"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_diatas_sla_response"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_dibawah_sla_response"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_durasi_recovery"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="avg_durasi_recovery"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="min_durasi_recovery"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="max_durasi_recovery"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_diatas_sla_recovery"
-          css-class="text-white"
-        />
-        <DxTotalItem
-          summary-type="sum"
-          display-format="{0}"
-          column="total_dibawah_sla_recovery"
-          css-class="text-white"
-        />
+        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_selesai" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}%" column="persen_selesai" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_inproses" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}%" column="persen_inproses" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_response" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="avg_durasi_response" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="min_durasi_response" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="max_durasi_response" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_response"
+          css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_response"
+          css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_durasi_recovery" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="avg_durasi_recovery" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="min_durasi_recovery" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="max_durasi_recovery" css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_diatas_sla_recovery"
+          css-class="text-white" />
+        <DxTotalItem summary-type="sum" display-format="{0}" column="total_dibawah_sla_recovery"
+          css-class="text-white" />
       </DxSummary>
 
       <template #data-waktu="{ data }">
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index bd850a9..782781e 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -37,13 +37,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 91edbd5..481cb9f 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -38,13 +38,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 6595fb3..1e30b1d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -30,13 +30,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 6e9a872..ae7533f 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -38,13 +38,13 @@
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" cell-templete="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="total_inproses" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
             css-class="custom-table-column" cell-templete="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 6889714..7ce3bd8 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -27,13 +27,13 @@
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="in_process" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_in_process" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="selesai" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
@@ -41,7 +41,7 @@
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
           <DxColumn :width="150" alignment="center" data-field="jumlah_rating" data-type="number" caption="Jml"
             css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_rating" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_rating" data-type="number" caption="%"
             css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="rating_1" data-type="number" caption="1"
             css-class="custom-table-column" />
@@ -73,14 +73,14 @@ import Type8 from '@/components/Form/FiltersType/Type8.vue'
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 0be916f..e591482 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -27,7 +27,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" 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">
@@ -35,7 +35,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index e8b654d..2535804 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -23,7 +23,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -31,7 +31,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 75f452b..f68ed7c 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -23,7 +23,7 @@
       <DxColumn alignment="center" data-field="nama_jenis_gangguan" caption="Jenis Gangguan"
         css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
-      <DxColumn :width="120" alignment="center" data-field="persen" caption="%" css-class="custom-table-column"
+      <DxColumn :width="70" alignment="center" data-field="persen" caption="%" css-class="custom-table-column"
         data-type="number" cell-template="percent" />
 
       <template #percent="{ data }">
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 0c3b697..926e48b 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -31,7 +31,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" 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">
@@ -39,7 +39,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 0b177c0..ca883ed 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -23,7 +23,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -31,7 +31,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index f5a33ed..afad295 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -27,7 +27,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" 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">
@@ -35,7 +35,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 8cddb36..6b55388 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -27,7 +27,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" 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">
@@ -35,7 +35,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 39c5f3c..251a852 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -22,7 +22,7 @@
       <DxColumn alignment="center" data-field="nama_jenis_keluhan" caption="Jenis Keluhan"
         css-class="custom-table-column" />
       <DxColumn :width="170" alignment="center" data-field="jumlah" caption="Jumlah" css-class="custom-table-column" />
-      <DxColumn :width="120" alignment="center" data-field="persen" caption="%" css-class="custom-table-column"
+      <DxColumn :width="70" alignment="center" data-field="persen" caption="%" css-class="custom-table-column"
         cell-template="percent" />
       <template #percent="{ data }">
         {{ data.text }}%
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index 4958c4b..f7b0a24 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -23,7 +23,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -31,7 +31,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index fc28468..97f0b09 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -23,7 +23,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -31,7 +31,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 913aaa7..5552fbe 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -23,7 +23,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -31,7 +31,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index 31f3407..13c117b 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -23,7 +23,7 @@
             :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
           <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
             :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_mom" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
@@ -31,7 +31,7 @@
             :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(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
+          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
             css-class="custom-table-column" cell-template="percent" />
         </DxColumn>
       </DxColumn>