From 99afd50f37ea0c58eac0ad050a446941ccf803b2 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 11 Mar 2024 22:42:15 +0700
Subject: [PATCH] Refactor CSS styles and fix formatting issues in
 MonalisaLK_EnergyNotSales.vue

---
 package.json                                  |   2 +-
 src/assets/css/style.css                      |  18 -
 src/components/Pages/Cico/LaporanCICO.vue     | 643 +++++++++++----
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    | 205 ++++-
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  | 767 +++++++++++-------
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      | 205 ++++-
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 280 +++++--
 .../Daftar/DGangguan_RecoveryTime.vue         | 310 +++++--
 .../Daftar/DGangguan_ResponseTime.vue         | 256 ++++--
 .../Pages/Gangguan/Daftar/DGangguan_STIDP.vue | 220 +++--
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 112 +--
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    | 148 +++-
 .../Rekap/RGangguan_BerdasarMedia.vue         | 131 ++-
 .../Rekap/RGangguan_JenisGangguan.vue         | 528 +++++++++---
 .../Rekap/RGangguan_JenisGangguanSE.vue       | 299 +++++--
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     | 659 +++++++++++----
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      | 672 +++++++++++----
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 301 +++++--
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue | 268 ++++--
 .../Pages/Keluhan/Daftar/DKeluhan_DKUL.vue    | 225 +++--
 .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue   | 289 +++++--
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue  | 258 ++++--
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  | 269 ++++--
 .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue   | 261 ++++--
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue     | 238 ++++--
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |  79 +-
 .../Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  |  42 +-
 .../Rekap/RKeluhan_PerFungsiBidang.vue        | 132 +--
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        |  54 +-
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     |  54 +-
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     |  54 +-
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  |  46 +-
 .../Bulanan/MonalisaLB_AgingComplaint.vue     | 143 +++-
 .../Bulanan/MonalisaLB_EnergyNotSales.vue     | 108 ++-
 .../Bulanan/MonalisaLB_KADDalamPelaporan.vue  | 115 ++-
 .../MonalisaLB_PenurunanJumlahKomplain.vue    | 266 ++++--
 .../Kumulatif/MonalisaLK_AgingComplaint.vue   | 155 +++-
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   | 101 ++-
 .../Kumulatif/MonalisaLK_KDADPelaporan.vue    | 127 ++-
 .../MonalisaLK_PenurunanJumlahKomplain.vue    | 276 +++++--
 40 files changed, 6887 insertions(+), 2429 deletions(-)

diff --git a/package.json b/package.json
index 9ad02ad..829cba1 100755
--- a/package.json
+++ b/package.json
@@ -74,4 +74,4 @@
     "vitest": "^1.3.1",
     "vue-tsc": "^2.0.5"
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a9f265c..4784f11 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -6058,10 +6058,6 @@ body {
     width: 2.5rem;
   }
 
-  .lg\:w-2\/6 {
-    width: 33.333333%;
-  }
-
   .lg\:w-80 {
     width: 20rem;
   }
@@ -6074,10 +6070,6 @@ body {
     width: 70%;
   }
 
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-
   .lg\:flex-col {
     flex-direction: column;
   }
@@ -6086,16 +6078,6 @@ body {
     flex-wrap: nowrap;
   }
 
-  .lg\:justify-between {
-    justify-content: space-between;
-  }
-
-  .lg\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(1rem * var(--tw-space-x-reverse));
-    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .lg\:rounded-t-3xl {
     border-top-left-radius: 1.5rem;
     border-top-right-radius: 1.5rem;
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 46e1625..7ee4a24 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -1,173 +1,534 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @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="onDataSelectionChanged" :column-width="100" @exporting="onExporting"
-      :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="false">
+    <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="onDataSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+      :word-wrap-enabled="false"
+    >
       <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="200" alignment="center" data-field="user_regu" caption="User Regu"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="200" alignment="center" data-field="personil_yantek" caption="Personil Yantek"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="200" alignment="center" data-field="jumlah_wo_gangguan_individual" data-type="number"
-        caption="Jumlah WO Gangguan Individual" css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="200" alignment="center" data-field="avg_durasi_wo_gangguan_individual" data-type="number"
-        caption="Rata-rata Durasi WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="200" alignment="center" data-field="avg_rpt_wo_gangguan_individual" data-type="number"
-        caption="Rata-rata RPT WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="200" alignment="center" data-field="avg_rct_wo_gangguan_individual" data-type="number"
-        caption="Rata-rata RCT WO Gangguan" css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="200" alignment="center" data-field="jumlah_wo_penugasan_khusus" data-type="number"
-        caption="Jumlah Wo Penugasan Khusus" css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="200" alignment="center" data-field="avg_wo_penugasan_khusus" data-type="number"
-        caption="Rata-rata Durasi WO Penugasan" css-class="custom-table-column" cell-template="cellRight" />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="user_regu"
+        caption="User Regu"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="personil_yantek"
+        caption="Personil Yantek"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="jumlah_wo_gangguan_individual"
+        data-type="number"
+        caption="Jumlah WO Gangguan Individual"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_durasi_wo_gangguan_individual"
+        data-type="number"
+        caption="Rata-rata Durasi WO Gangguan"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_rpt_wo_gangguan_individual"
+        data-type="number"
+        caption="Rata-rata RPT WO Gangguan"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_rct_wo_gangguan_individual"
+        data-type="number"
+        caption="Rata-rata RCT WO Gangguan"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="jumlah_wo_penugasan_khusus"
+        data-type="number"
+        caption="Jumlah Wo Penugasan Khusus"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="avg_wo_penugasan_khusus"
+        data-type="number"
+        caption="Rata-rata Durasi WO Penugasan"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="dialogDataSelected" title="Daftar Detail Jumlah WO Gangguan Individu"
-    @on-close="closeDialogDataSelected" :full-width="true">
-
+  <DetailDialog
+    :open="dialogDataSelected"
+    title="Daftar Detail Jumlah WO Gangguan Individu"
+    @on-close="closeDialogDataSelected"
+    :full-width="true"
+  >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="dataSub" :show-column-lines="true"
-          :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-          @selection-changed="onDataSubSelectionChanged" :column-width="100" @exporting="onExporting"
-          :allow-column-resizing="true" column-resizing-mode="widget">
+        <DxDataGrid
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExporting"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
           <DxSelection mode="single" />
           <DxPaging :page-size="5" :enabled="true" />
-          <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-            :show-info="true" :show-navigation-buttons="true" />
-          <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[5, 10, 20]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="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"
+          />
 
-          <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="UID/UIW" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="UP3" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Posko" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Sumber Lapor" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Created By" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Dispatch By" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Dispatch Time"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="User Regu" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Nama Petugas" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Shif" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Check In Petugas"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="No Laporan" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Lapor" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Penugasan Baru"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Dalam Perjalanan"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Pengerjaan"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Nyala Sementara"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Nyala" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tgl Selesai" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi Perjalanan"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Durasi WO" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Check Out Petugas"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="RPT" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="RCT" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Rating" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Jml Pelanggan Padam"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Fasilitas" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Sub Fasilitas"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Peralatan" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Dampak Kerusakan"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Penyebab" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Kelompok Penyebab"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Cuaca" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan Pelapor"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Keterangan" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Penyebab Padam"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Tindakan" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="APKT Status" css-class="custom-table-column"
-            cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="Referensi Marking"
-            css-class="custom-table-column" cell-template="cellLeft" />
-          <DxColumn :width="150" alignment="center" data-field="" caption="BLTH" css-class="custom-table-column"
-            cell-template="cellLeft" />
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="UID/UIW"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="UP3"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Sumber Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Created By"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Dispatch By"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Dispatch Time"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="User Regu"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Regu"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Petugas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Shif"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Check In Petugas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Penugasan Baru"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Dalam Perjalanan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Pengerjaan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala Sementara"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Selesai"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Perjalanan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi WO"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Check Out Petugas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="RPT"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="RCT"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Rating"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Jml Pelanggan Padam"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Fasilitas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Sub Fasilitas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Peralatan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Dampak Kerusakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Kelompok Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Cuaca"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Keterangan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Penyebab Padam"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tindakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="APKT Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="BLTH"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
           </template>
         </DxDataGrid>
       </div>
-
     </div>
     <div class="w-full mb-4 lg:w-[30%] lg:float-right">
       <div class="p-4 space-y-2 bg-white rounded-xl">
@@ -370,10 +731,8 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">BLTH</h3>
           <InputText :readonly="true" :value="dataSubSelected" class-name="flex-1" />
         </div>
-
       </div>
     </div>
-
   </DetailDialog>
 </template>
 
@@ -413,8 +772,8 @@ const dataSubSelected = ref<any>()
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => dialogDataSelected.value = false
-const showDialogDataSelected = () => dialogDataSelected.value = true
+const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const showDialogDataSelected = () => (dialogDataSelected.value = true)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -496,15 +855,15 @@ const filters = ref()
 onMounted(() => {
   data.value = [
     {
-      "user_regu": "11110.REGU1",
-      "personil_yantek": "11110_FAUZI",
-      "jumlah_wo_gangguan_individual": 54,
-      "avg_durasi_wo_gangguan_individual": 70.67,
-      "avg_rpt_wo_gangguan_individual": 40.69,
-      "avg_rct_wo_gangguan_individual": 71.61,
-      "jumlah_wo_penugasan_khusus": 31,
-      "avg_wo_penugasan_khusus": 63.79
+      user_regu: '11110.REGU1',
+      personil_yantek: '11110_FAUZI',
+      jumlah_wo_gangguan_individual: 54,
+      avg_durasi_wo_gangguan_individual: 70.67,
+      avg_rpt_wo_gangguan_individual: 40.69,
+      avg_rct_wo_gangguan_individual: 71.61,
+      jumlah_wo_penugasan_khusus: 31,
+      avg_wo_penugasan_khusus: 63.79
     }
   ]
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 88293e6..6ba3f8f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -1,52 +1,169 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type16 @update:filters="(value) => filters = value" />
+    <Type16 @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="" :column-width="100" @exporting="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <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=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-        caption="Status" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_posko"
-        caption="Sumber Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_media"
-        caption="Tgl Media" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="keterangan_media"
-        caption="Keterangan Media" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Sumber Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="keterangan_media"
+        caption="Keterangan Media"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -54,14 +171,14 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -135,4 +252,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.gangguan.daftar.daftarGangguanBerdasarkanMedia
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 3b47fd3..8c6a34e 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -1,181 +1,342 @@
 <template>
-    <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-        <Type1 @update:filters="(value) => filters = value" />
-    </Filters>
+  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
+    <Type1 @update:filters="(value) => (filters = value)" />
+  </Filters>
 
-    <div id="dataTable">
-        <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :remote-operations="true" :data-source="data"
-            key-expr="no_laporan" :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">
-            <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-            <DxSelection mode="single" />
-            <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
-            <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" />
-            <DxColumn css-class="custom-table-column !text-right" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number"
-                caption="No" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-                caption="No Laporan" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="pembuat_laporan"
-                caption="Pembuat Laporan" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-                caption="Tgl Lapor" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_dialihkan"
-                caption="Tgl Dialihkan" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-                caption="Tgl Response" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-                caption="Tgl Recovery" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-                caption="Durasi Response Time" cell-template="data-waktu" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-                caption="Durasi Recovery Time" cell-template="data-waktu" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-                caption="Posko Asal" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_baru"
-                caption="Posko Tujuan" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-                caption="Status" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-                caption="IDPEL/NO METER" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-                caption="Nama Pelapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-                caption="Alamat Pelapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-                caption="No Telp Pelapor" cell-template="cellCenter" />
-            <DxColumn css-class="custom-table-column" :width="250" alignment="center" data-field="keterangan_pelapor"
-                caption="Keterangan Pelapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-                caption="Sumber Lapor" cell-template="cellLeft" />
-            <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko_lama"
-                caption="Posko" cell-template="cellLeft" />
+  <div id="dataTable">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :remote-operations="true"
+      :data-source="data"
+      key-expr="no_laporan"
+      :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"
+    >
+      <DxPaging :page-size="5" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxSelection mode="single" />
+      <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
+      <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"
+      />
+      <DxColumn
+        css-class="custom-table-column !text-right"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="pembuat_laporan"
+        caption="Pembuat Laporan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_lama"
+        caption="Posko Asal"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_baru"
+        caption="Posko Tujuan"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="250"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko_lama"
+        caption="Posko"
+        cell-template="formatText"
+      />
 
-            <template #cellCenter="{ data }">
-                <p class="cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </p>
-            </template>
+      <template #cellCenter="{ data }">
+        <p class="cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
 
-            <template #cellLeft="{ data }">
-                <p class="text-left cursor-pointer" @click="showData()">
-                    {{ data.text }}
-                </p>
-            </template>
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
 
-            <template #data-waktu="{ data }">
-                <p class="cursor-pointer" @click="showData()">
-                    {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
-                </p>
-            </template>
-        </DxDataGrid>
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
+    </DxDataGrid>
+  </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Dialihkan ke Posko Lain"
+    @on-close="closeDetail"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
+      </div>
     </div>
-
-    <DetailDialog :open="showDetail" title="Daftar Gangguan Dialihkan ke Posko Lain" @on-close="closeDetail">
-        <div class="w-full p-4 space-y-2 bg-white rounded-xl">
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.no_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-                <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Response Time:</h3>
-                <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-        ? formatWaktu(dataDetail?.durasi_response_time)
-        : '-'
-        " class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Durasi Recovery Time:</h3>
-                <InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
-        ? formatWaktu(dataDetail?.durasi_recovery_time)
-        : '-'
-        " />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-                <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-                <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-                <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-                <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
-                <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between w-full">
-                <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
-                <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
-            </div>
-        </div>
-    </DetailDialog>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -183,13 +344,13 @@ import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { onMounted, ref } from 'vue'
@@ -211,146 +372,146 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
-const closeDetail = () => showDetail.value = false
+const closeDetail = () => (showDetail.value = false)
 
 const onExporting = (e: any) => {
-    if (e.format === 'pdf') {
-        const doc = new jsPDF({
-            orientation: 'landscape',
-            unit: 'mm',
-            format: 'F4'
-        })
+  if (e.format === 'pdf') {
+    const doc = new jsPDF({
+      orientation: 'landscape',
+      unit: 'mm',
+      format: 'F4'
+    })
 
-        // Initialize page number
-        const pageNumber = ref(1)
-        autoTable(doc, {
-            head: [
-                [
-                    'No Laporan',
-                    'Pembuat Laporan',
-                    'Tgl Lapor',
-                    'Tgl Dialihkan',
-                    'Tgl Response',
-                    'Tgl Recovery',
-                    'Durasi Response Time',
-                    'Durasi Recovery Time',
-                    'Posko Awal',
-                    'Posko Tujuan',
-                    'Status',
-                    'IDPEL/NO METER',
-                    'Nama Pelapor',
-                    'Alamat Pelapor',
-                    'No Telp Pelapor',
-                    'Keterangan Pelapor',
-                    'Sumber Lapor',
-                    'Posko'
-                ]
-            ],
-            startY: 10,
-            body: data.value.map((item) => [
-                item.no_laporan,
-                item.pembuat_laporan,
-                item.waktu_lapor,
-                item.waktu_dialihkan,
-                item.waktu_response,
-                item.waktu_recovery,
-                item.durasi_response_time,
-                item.durasi_recovery_time,
-                item.nama_posko_lama,
-                item.nama_posko_baru,
-                item.status_akhir,
-                item.idpel_nometer,
-                item.nama_pelapor,
-                item.alamat_pelapor,
-                item.no_telp_pelapor,
-                item.keterangan_pelapor,
-                item.media,
-                item.posko
-            ]),
-            styles: {
-                fontSize: 6,
-                cellWidth: 'wrap'
-            }
-        })
-        doc.setProperties({
-            title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
-            subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
-        })
+    // Initialize page number
+    const pageNumber = ref(1)
+    autoTable(doc, {
+      head: [
+        [
+          'No Laporan',
+          'Pembuat Laporan',
+          'Tgl Lapor',
+          'Tgl Dialihkan',
+          'Tgl Response',
+          'Tgl Recovery',
+          'Durasi Response Time',
+          'Durasi Recovery Time',
+          'Posko Awal',
+          'Posko Tujuan',
+          'Status',
+          'IDPEL/NO METER',
+          'Nama Pelapor',
+          'Alamat Pelapor',
+          'No Telp Pelapor',
+          'Keterangan Pelapor',
+          'Sumber Lapor',
+          'Posko'
+        ]
+      ],
+      startY: 10,
+      body: data.value.map((item) => [
+        item.no_laporan,
+        item.pembuat_laporan,
+        item.waktu_lapor,
+        item.waktu_dialihkan,
+        item.waktu_response,
+        item.waktu_recovery,
+        item.durasi_response_time,
+        item.durasi_recovery_time,
+        item.nama_posko_lama,
+        item.nama_posko_baru,
+        item.status_akhir,
+        item.idpel_nometer,
+        item.nama_pelapor,
+        item.alamat_pelapor,
+        item.no_telp_pelapor,
+        item.keterangan_pelapor,
+        item.media,
+        item.posko
+      ]),
+      styles: {
+        fontSize: 6,
+        cellWidth: 'wrap'
+      }
+    })
+    doc.setProperties({
+      title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain'
+    })
 
-        pageNumber.value++ // Increment the pageNumber
-        doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+    pageNumber.value++ // Increment the pageNumber
+    doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
 
-        // exportToPdf({
-        //   jsPDFDocument: doc,
-        //   component: e.component,
-        // }).then(() => {
-        // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+    // exportToPdf({
+    //   jsPDFDocument: doc,
+    //   component: e.component,
+    // }).then(() => {
+    // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
 
-        // })
-    } else {
-        const workbook = new Workbook()
-        const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
+    // })
+  } else {
+    const workbook = new Workbook()
+    const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
 
-        exportToExcel({
-            component: e.component,
-            worksheet,
-            autoFilterEnabled: true
-        }).then(() => {
-            workbook.xlsx.writeBuffer().then((buffer: any) => {
-                saveAs(
-                    new Blob([buffer], { type: 'application/octet-stream' }),
-                    'DaftarGangguanDialihkanKePoskoLain.xlsx'
-                )
-            })
-        })
+    exportToExcel({
+      component: e.component,
+      worksheet,
+      autoFilterEnabled: true
+    }).then(() => {
+      workbook.xlsx.writeBuffer().then((buffer: any) => {
+        saveAs(
+          new Blob([buffer], { type: 'application/octet-stream' }),
+          'DaftarGangguanDialihkanKePoskoLain.xlsx'
+        )
+      })
+    })
 
-        e.cancel = true
-    }
+    e.cancel = true
+  }
 }
 
 const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0]
-            ? dateValue[0].split('-').reverse().join('-')
-            : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1]
-            ? dateValue[1].split('-').reverse().join('-')
-            : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-        }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
-    })
-    onError((error) => {
-        console.log(error)
-    })
+  const { posko, uid, up3 } = params
+  const dateValue = params.periode.split(' s/d ')
+  refetch({
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0
+  })
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
+    }
+    console.log(queryResult.data)
+    console.log(queryResult.loading)
+    console.log(queryResult.networkStatus)
+  })
+  onError((error) => {
+    console.log(error)
+  })
 }
 const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.daftar.dataDialihkanKePoskoLain,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: 0,
-        idUid: 0,
-        idUp3: 0
-    }
+  queries.gangguan.daftar.dataDialihkanKePoskoLain,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
 )
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-    const data = selectedRowsData[0]
-    dataDetail.value = data
+  const data = selectedRowsData[0]
+  dataDetail.value = data
 }
-const showData = () => showDetail.value = true
+const showData = () => (showDetail.value = true)
 const filters = ref()
 onMounted(() => {
-    data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
+  data.value = dummyData.gangguan.daftar.dialihkanKePoskoLain
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index 90f2347..7189ef0 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -1,52 +1,169 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @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="" :column-width="100" @exporting="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <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=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-        caption="Status" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-        caption="Sumber Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -54,14 +171,14 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -137,4 +254,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.gangguan.daftar.daftarGangguanDiselesaikanMobileAPKT
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 585714f..8e083e9 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -1,53 +1,175 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type6 @update:filters="(value) => filters = value" />
+    <Type6 @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="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <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=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible.sync="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="true"
+      />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible.sync="loading"
+        :enabled="true"
+      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-        cell-template="cellRight" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-        caption="Status" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-        caption="Sumber Lapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellLeft" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -55,27 +177,31 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="showData()">
           {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Melapor Lebih Dari 1 Kali" @on-close="closeDetail">
+  <DetailDialog
+    :open="showDetail"
+    title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
+    @on-close="closeDetail"
+  >
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -104,18 +230,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " />
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -155,7 +291,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1"
+        />
       </div>
     </div>
   </DetailDialog>
@@ -197,19 +338,22 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
 }
 
-const showData = () => showDetail.value = true
+const showData = () => (showDetail.value = true)
 
-const closeDetail = () => showDetail.value = false
+const closeDetail = () => (showDetail.value = false)
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.melaporLebihDariSatuKali, {
-  minJmlLapor: 1,
-  maxJmlLapor: 1,
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.daftar.melaporLebihDariSatuKali,
+  {
+    minJmlLapor: 1,
+    maxJmlLapor: 1,
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const { minJmlLapor, maxJmlLapor, posko, uid, up3 } = params
@@ -243,4 +387,4 @@ const filterData = (params: any) => {
 onMounted(() => {
   data.value = dummyData.gangguan.daftar.melaporLebihDariSatuKali
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 33d971d..a862dc0 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -1,67 +1,193 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type7 @update:filters="(value) => filters = value" :sla-options="[
-    {
-      id: 1,
-      name: 'Dibawah  / Sesuai SLA (<= 3 Jam)',
-      min: '1',
-      max: '180'
-    },
-    {
-      id: 2,
-      name: 'Melebihi SLA (> 3 Jam)',
-      min: '181',
-      max: `${99999 * 60 * 24}`
-    }
-  ]" />
+    <Type7
+      @update:filters="(value) => (filters = value)"
+      :sla-options="[
+        {
+          id: 1,
+          name: 'Dibawah  / Sesuai SLA (<= 3 Jam)',
+          min: '1',
+          max: '180'
+        },
+        {
+          id: 2,
+          name: 'Melebihi SLA (> 3 Jam)',
+          min: '181',
+          max: `${99999 * 60 * 24}`
+        }
+      ]"
+    />
   </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"
-      :column-width="100" @exporting="" :allow-column-resizing="true" @selection-changed="onSelectionChanged"
-      column-resizing-mode="widget">
+    <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"
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      @selection-changed="onSelectionChanged"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-        caption="Status" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
-        caption="Referensi Marking" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-        caption="Sumber Lapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="referensi_marking"
+        caption="Referensi Marking"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -69,14 +195,14 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -107,18 +233,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " />
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -158,17 +294,32 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.penyebab"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.tindakan"
+          class-name="flex-1"
+        />
       </div>
     </div>
   </DetailDialog>
@@ -183,13 +334,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxExport,
-    DxLoadPanel,
-    DxPager,
-    DxPaging,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxExport,
+  DxLoadPanel,
+  DxPager,
+  DxPaging,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
@@ -208,13 +359,13 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
 }
 
-const showData = () => showDetail.value = true
+const showData = () => (showDetail.value = true)
 
-const closeDetail = () => showDetail.value = false
+const closeDetail = () => (showDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
-  console.table(params);
+  console.table(params)
 
   const dateValue = params.periode.split(' s/d ')
   refetch({
@@ -242,7 +393,6 @@ const filterData = (params: any) => {
   })
 }
 
-
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.recoveryTime, {
   dateFrom: new Date().toISOString().slice(0, 10),
   dateTo: new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index cbee901..8784fc6 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -1,53 +1,170 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type7 @update:filters="(value) => filters = value" />
+    <Type7 @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="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <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=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="cellCenter" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="cellCenter"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-        caption="Status" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="referensi_marking"
-        caption="Referensi Marking" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="referensi_marking"
+        caption="Referensi Marking"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -55,14 +172,14 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -93,18 +210,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" class-name="flex-1" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " />
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -144,17 +271,32 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.nama_posko" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.penyebab" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.penyebab"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.tindakan" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.tindakan"
+          class-name="flex-1"
+        />
       </div>
     </div>
   </DetailDialog>
@@ -194,9 +336,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
 }
 
-const showData = () => showDetail.value = true
+const showData = () => (showDetail.value = true)
 
-const closeDetail = () => showDetail.value = false
+const closeDetail = () => (showDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 203eaab..92c3a9a 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -1,52 +1,169 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @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="" :column-width="100" @exporting="" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <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=""
+      :column-width="100"
+      @exporting=""
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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" />
-      <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
 
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_laporan"
-        caption="No Laporan" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_lapor"
-        caption="Tgl Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_response"
-        caption="Tgl Response" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="waktu_recovery"
-        caption="Tgl Recovery" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_response_time"
-        caption="Durasi Response Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="durasi_recovery_time"
-        caption="Durasi Recovery Time" cell-template="data-waktu" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="status_akhir"
-        caption="Status" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="idpel_nometer"
-        caption="IDPEL/NO METER" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="nama_pelapor"
-        caption="Nama Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="alamat_pelapor"
-        caption="Alamat Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="no_telp_pelapor"
-        caption="No Telp Pelapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="keterangan_pelapor"
-        caption="Keterangan Pelapor" cell-template="cellLeft" />
-      <DxColumn css-class="custom-table-column" :width="150" alignment="center" data-field="media"
-        caption="Sumber Lapor" cell-template="cellCenter" />
-      <DxColumn css-class="custom-table-column" :width="170" alignment="center" data-field="nama_posko" caption="Posko"
-        cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        cell-template="formatText"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -54,14 +171,14 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -94,13 +211,16 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.selesaiTanpaIDPelanggan, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.daftar.selesaiTanpaIDPelanggan,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 41504aa..a99bd59 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -61,7 +61,7 @@
         data-field="nama_posko"
         caption="Nama Unit"
         css-class="custom-table-column"
-        cell-template="cellLeft"
+        cell-template="formatText"
       />
 
       <DxColumn
@@ -70,7 +70,7 @@
         data-field="nama_posko"
         caption="Nama Unit"
         css-class="custom-table-column"
-        cell-template="cellLeft"
+        cell-template="formatText"
         name="namaUnit"
         :group-index="0"
       />
@@ -80,7 +80,7 @@
         data-field="nama_regional"
         caption="Regional"
         css-class="custom-table-column"
-        cell-template="cellLeft"
+        cell-template="formatText"
         :group-index="1"
       />
       <DxColumn
@@ -89,7 +89,7 @@
         data-field="nama_uid"
         caption="UID"
         css-class="custom-table-column"
-        cell-template="cellLeft"
+        cell-template="formatText"
         :group-index="2"
       />
       <DxColumn
@@ -98,7 +98,7 @@
         data-field="nama_up3"
         caption="UP3"
         css-class="custom-table-column"
-        cell-template="cellLeft"
+        cell-template="formatText"
         :group-index="3"
       />
 
@@ -110,7 +110,7 @@
         caption="Total"
         :allow-resizing="false"
         css-class="custom-table-column"
-        cell-template="cellRight"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="150"
@@ -119,7 +119,7 @@
         caption="Selesai"
         :allow-resizing="false"
         css-class="custom-table-column"
-        cell-template="cellRight"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="70"
@@ -129,7 +129,7 @@
         caption="%"
         :allow-resizing="false"
         css-class="custom-table-column"
-        cell-template="cellRight"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="150"
@@ -139,7 +139,7 @@
         caption="In Progress"
         :allow-resizing="false"
         css-class="custom-table-column"
-        cell-template="cellRight"
+        cell-template="formatNumber"
       />
       <DxColumn
         :width="70"
@@ -149,7 +149,7 @@
         caption="%"
         :allow-resizing="false"
         css-class="custom-table-column"
-        cell-template="cellRight"
+        cell-template="formatNumber"
       />
       <DxColumn alignment="center" caption="Dispatching Time" css-class="custom-table-column">
         <DxColumn
@@ -160,7 +160,7 @@
           caption="Rata-Rata"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -170,7 +170,7 @@
           caption="Max"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="data-waktu"
+          cell-template="formatTime"
         />
         <DxColumn
           :width="150"
@@ -180,7 +180,7 @@
           caption="Min"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="data-waktu"
+          cell-template="formatTime"
         />
         <DxColumn
           :width="150"
@@ -190,7 +190,7 @@
           caption=">SLA"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -200,7 +200,7 @@
           caption="≤SLA"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
@@ -212,7 +212,7 @@
           caption="Rata-Rata"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -222,7 +222,7 @@
           caption="Max"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="data-waktu"
+          cell-template="formatTime"
         />
         <DxColumn
           :width="150"
@@ -232,7 +232,7 @@
           caption="Min"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="data-waktu"
+          cell-template="formatTime"
         />
         <DxColumn
           :width="150"
@@ -242,7 +242,7 @@
           caption=">SLA"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -252,7 +252,7 @@
           caption="≤SLA"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
@@ -264,7 +264,7 @@
           caption="Rata-Rata"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -274,7 +274,7 @@
           caption="Max"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="data-waktu"
+          cell-template="formatTime"
         />
         <DxColumn
           :width="150"
@@ -284,7 +284,7 @@
           caption="Min"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="data-waktu"
+          cell-template="formatTime"
         />
         <DxColumn
           :width="150"
@@ -294,7 +294,7 @@
           caption=">SLA"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -304,7 +304,7 @@
           caption="≤SLA"
           :allow-resizing="false"
           css-class="custom-table-column"
-          cell-template="cellRight"
+          cell-template="formatNumber"
         />
       </DxColumn>
 
@@ -314,13 +314,13 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
           {{
             isNumber(data.text)
@@ -332,7 +332,7 @@
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
+      <template #formatTime="{ data }">
         <p @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
@@ -560,7 +560,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -568,7 +568,7 @@
             data-field="nama_posko"
             caption="Posko"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -576,7 +576,7 @@
             data-field="no_laporan"
             caption="No Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -584,7 +584,7 @@
             data-field="waktu_lapor"
             caption="Tgl/Jam Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -593,7 +593,7 @@
             caption="Tgl/Jam Datang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -602,7 +602,7 @@
             caption="Tgl/Jam Nyala"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -611,7 +611,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -620,7 +620,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -629,7 +629,7 @@
             caption="Durasi Penugasan Regu"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -638,7 +638,7 @@
             caption="Durasi Perjalanan Regu"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -647,7 +647,7 @@
             caption="Jarak Closing (m)"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -656,7 +656,7 @@
             caption="Dispatch Oleh"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -665,7 +665,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -674,7 +674,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -683,7 +683,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -692,7 +692,7 @@
             caption="No Telp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -701,7 +701,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -710,7 +710,7 @@
             caption="Sumber Lapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -719,7 +719,7 @@
             caption="Diselesaikan Oleh"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -728,7 +728,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -737,7 +737,7 @@
             caption="Referensi Marking"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -746,7 +746,7 @@
             caption="Kode Gangguan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -755,7 +755,7 @@
             caption="Jenis Gangguan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -764,7 +764,7 @@
             caption="Penyebab"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -773,22 +773,22 @@
             caption="Tindakan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 6175d92..68457c9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -1,43 +1,121 @@
 <template>
-  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+  <Filters
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @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 css-class="custom-table-column" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        name="number" cell-template="cellRight" />
-      <DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn alignment="center" :min-width="180" data-field="nama_up3" caption="Nama UP3"
-        css-class="custom-table-column" :group-index="0" />
-      <DxColumn alignment="center" :min-width="180" data-field="nama_posko" caption="Nama Posko"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="180" alignment="center" data-field="posko_in" caption="Posko IN" css-class="custom-table-column"
-        cell-template="cellRight" />
-      <DxColumn :width="180" alignment="center" data-field="posko_out" caption="Posko OUT"
-        css-class="custom-table-column" cell-template="cellRight" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        name="number"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="180"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="180"
+        data-field="nama_up3"
+        caption="Nama UP3"
+        css-class="custom-table-column"
+        :group-index="0"
+      />
+      <DxColumn
+        alignment="center"
+        :min-width="180"
+        data-field="nama_posko"
+        caption="Nama Posko"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="180"
+        alignment="center"
+        data-field="posko_in"
+        caption="Posko IN"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="180"
+        alignment="center"
+        data-field="posko_out"
+        caption="Posko OUT"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
 
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="number" display-format="Total" css-class="!text-left" />
-        <DxGroupItem :show-in-group-footer="true" column="posko_in" summary-type="sum" display-format="{0}"
-          css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="posko_out" summary-type="sum" display-format="{0}"
-          css-class="!text-right" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="number"
+          display-format="Total"
+          css-class="!text-left"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="posko_in"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="posko_out"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="!text-right"
+        />
       </DxSummary>
 
       <template #cellCenter="{ data }">
@@ -46,17 +124,21 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
     </DxDataGrid>
@@ -169,4 +251,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 892fafa..3edaf73 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -1,33 +1,88 @@
 <template>
-  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+  <Filters
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        data-field="no" cell-template="cellRight" />
-      <DxColumn :width="170" data-field="media" caption="Nama Media" alignment="center" cell-template="cellLeft"
-        css-class="custom-table-column" header-cell-template="title-header" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        data-field="no"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="170"
+        data-field="media"
+        caption="Nama Media"
+        alignment="center"
+        cell-template="formatText"
+        css-class="custom-table-column"
+        header-cell-template="title-header"
+      />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
-        <DxColumn v-for="i in 31" :width="100" alignment="center" :data-field="`tgl${i}`" data-type="number"
-          :caption="i" css-class="custom-table-column" cell-template="cellRight" />
+        <DxColumn
+          v-for="i in 31"
+          :width="100"
+          alignment="center"
+          :data-field="`tgl${i}`"
+          data-type="number"
+          :caption="i"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
-      <DxColumn :width="170" alignment="center" data-field="total" caption="Total" css-class="custom-table-column"
-        cell-template="cellRight" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Total"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -35,17 +90,21 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
@@ -56,12 +115,26 @@
       </template>
 
       <DxSummary>
-        <DxTotalItem display-format="Call PLN 123" show-in-column="media" css-class="text-white !text-left" />
-        <DxTotalItem v-for="i in 31" summary-type="sum" display-format="{0}" :column="`tgl${i}`"
+        <DxTotalItem
+          display-format="Call PLN 123"
+          show-in-column="media"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          v-for="i in 31"
+          summary-type="sum"
+          display-format="{0}"
+          :column="`tgl${i}`"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="total" summary-type="sum" display-format="{0}" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
       </DxSummary>
     </DxDataGrid>
   </div>
@@ -174,4 +247,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.gangguan.rekap.rekapitulasiGangguanBerdasarkanMedia
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 39d6f71..c0394ff 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -1,123 +1,383 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan -->
 
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+  <Filters
+    :report-button="true"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @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">
+    <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"
+    >
       <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" />
       <DxGroupPanel :visible="true" />
       <DxGrouping :auto-expand-all="true" />
 
-      <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
-        cell-template="cellRight" />
-      <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
-        cell-template="cellLeft" />
-      <DxColumn :width="120" alignment="center" data-field="sub_kelompok" caption="Kelompok"
-        css-class="custom-table-column" group-index="0" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="jenisGangguan" caption="Jenis Gangguan"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        :width="60"
+        alignment="center"
+        data-field="no"
+        caption="NO"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="sub_kelompok"
+        caption="Kelompok"
+        css-class="custom-table-column"
+        group-index="0"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="jenisGangguan"
+        caption="Jenis Gangguan"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="cellRight" />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <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="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </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="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum" display-format="{0}"
-          cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-          display-format="{0}" cell-template="cellRight" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="no"
+          display-format="Total"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.total"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.persen"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          display-format="{0}"
+          cell-template="formatNumber"
+        />
       </DxSummary>
 
       <template #cellCenter="{ data }">
@@ -126,22 +386,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -244,51 +508,49 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiPerJenisGangguan.map(
-        (item: any, index: number) => {
-          return {
-            no: ++index,
-            sub_kelompok: item.sub_kelompok,
-            kode: item.kode,
-            jenisGangguan: item.tipe_permasalahan,
+      data.value = queryResult.data.rekapitulasiPerJenisGangguan.map((item: any, index: number) => {
+        return {
+          no: ++index,
+          sub_kelompok: item.sub_kelompok,
+          kode: item.kode,
+          jenisGangguan: item.tipe_permasalahan,
+          laporan: {
+            total: item.total,
+            sudahSelesai: {
+              jml: item.total_selesai,
+              persen: item.persen_selesai
+            },
+            belumSelesai: {
+              jml: item.total_inproses,
+              persen: item.persen_inproses
+            }
+          },
+          responseTime: {
+            menit: {
+              total: item.total_durasi_response,
+              rataRata: item.avg_durasi_response,
+              max: item.max_durasi_response,
+              min: item.min_durasi_response
+            },
             laporan: {
-              total: item.total,
-              sudahSelesai: {
-                jml: item.total_selesai,
-                persen: item.persen_selesai
-              },
-              belumSelesai: {
-                jml: item.total_inproses,
-                persen: item.persen_inproses
-              }
+              lebihSla: item.total_diatas_sla_response,
+              kurangSla: item.total_dibawah_sla_response
+            }
+          },
+          recoveryTime: {
+            menit: {
+              total: item.total_durasi_recovery,
+              rataRata: item.avg_durasi_recovery,
+              max: item.max_durasi_recovery,
+              min: item.min_durasi_recovery
             },
-            responseTime: {
-              menit: {
-                total: item.total_durasi_response,
-                rataRata: item.avg_durasi_response,
-                max: item.max_durasi_response,
-                min: item.min_durasi_response
-              },
-              laporan: {
-                lebihSla: item.total_diatas_sla_response,
-                kurangSla: item.total_dibawah_sla_response
-              }
-            },
-            recoveryTime: {
-              menit: {
-                total: item.total_durasi_recovery,
-                rataRata: item.avg_durasi_recovery,
-                max: item.max_durasi_recovery,
-                min: item.min_durasi_recovery
-              },
-              laporan: {
-                lebihSla: item.total_diatas_sla_recovery,
-                kurangSla: item.total_dibawah_sla_recovery
-              }
+            laporan: {
+              lebihSla: item.total_diatas_sla_recovery,
+              kurangSla: item.total_dibawah_sla_recovery
             }
           }
         }
-      )
+      })
     }
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index e376841..40ebb55 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -1,81 +1,245 @@
 <!-- Rekapitulasi Gangguan/Jenis Gangguan SE 004 -->
 
 <template>
-  <Filters @reset-form="data = []" :report-button="true" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+  <Filters
+    @reset-form="data = []"
+    :report-button="true"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type1 @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="60" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="cellRight" />
-      <DxColumn :width="120" alignment="center" data-field="kode" caption="Kode" css-class="custom-table-column"
-        cell-template="cellCenter" />
-      <DxColumn :width="150" alignment="center" data-field="sub_kelompok" caption="Sub Kelompok (Equipment)"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="60"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode"
+        caption="Kode"
+        css-class="custom-table-column"
+        cell-template="cellCenter"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="sub_kelompok"
+        caption="Sub Kelompok (Equipment)"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="cellRight" />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <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="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </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="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
@@ -85,22 +249,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -169,13 +337,16 @@ const onExporting = (e: any) => {
   }
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.jenisGangguanSE004, {
-  dateFrom: new Date().toISOString().slice(0, 10),
-  dateTo: new Date().toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.rekap.jenisGangguanSE004,
+  {
+    dateFrom: new Date().toISOString().slice(0, 10),
+    dateTo: new Date().toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index f6bf771..4cd847e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -1,156 +1,485 @@
 <!-- Rekapitulasi Gangguan Per Posko -->
 
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type8 @update:filters="(value) => filters = value" />
+  <Filters
+    :report-button="true"
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    class="mb-4"
+  >
+    <Type8 @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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
-        cell-template="cellRight" />
-      <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
-        css-class="custom-table-column" :group-index="0" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column"
-        cell-template="cellLeft" />
+      <DxColumn
+        :width="60"
+        alignment="center"
+        data-field="no"
+        caption="NO"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="150"
+        name="poskoGroup"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        css-class="custom-table-column"
+        :group-index="0"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Posko"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="cellRight" />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <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="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </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="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="no"
+          display-format="Total"
+          css-class="!text-left"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.total"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.persen"
+          summary-type="avg"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.persen"
+          summary-type="avg"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.total"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="avg"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="avg"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="avg"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
 
-        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white !text-right" />
-        <DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        />
+        <DxTotalItem
+          summary-type="sum"
+          show-in-column="laporan.total"
+          column="laporan.total"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.persen"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.persen"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.menit.total"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.menit.rataRata"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.menit.max"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="responseTime.menit.min"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.rataRata"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.max"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.min"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
       </DxSummary>
 
       <template #cellCenter="{ data }">
@@ -159,22 +488,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -328,46 +661,48 @@ const filterData = (params: any) => {
 
 const filters = ref()
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map((item: any, index: number) => {
-    return {
-      no: ++index,
-      nama_posko: item.nama_posko,
-      laporan: {
-        total: item.total,
-        sudahSelesai: {
-          jml: item.total_selesai,
-          persen: item.persen_selesai
-        },
-        belumSelesai: {
-          jml: item.total_inproses,
-          persen: item.persen_inproses
-        }
-      },
-      responseTime: {
-        menit: {
-          total: item.total_durasi_response,
-          rataRata: item.avg_durasi_response,
-          max: item.max_durasi_response,
-          min: item.min_durasi_response
-        },
+  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
+    (item: any, index: number) => {
+      return {
+        no: ++index,
+        nama_posko: item.nama_posko,
         laporan: {
-          lebihSla: item.total_diatas_sla_response,
-          kurangSla: item.total_dibawah_sla_response
-        }
-      },
-      recoveryTime: {
-        menit: {
-          total: item.total_durasi_recovery,
-          rataRata: item.avg_durasi_recovery,
-          max: item.max_durasi_recovery,
-          min: item.min_durasi_recovery
+          total: item.total,
+          sudahSelesai: {
+            jml: item.total_selesai,
+            persen: item.persen_selesai
+          },
+          belumSelesai: {
+            jml: item.total_inproses,
+            persen: item.persen_inproses
+          }
         },
-        laporan: {
-          lebihSla: item.total_diatas_sla_recovery,
-          kurangSla: item.total_dibawah_sla_recovery
+        responseTime: {
+          menit: {
+            total: item.total_durasi_response,
+            rataRata: item.avg_durasi_response,
+            max: item.max_durasi_response,
+            min: item.min_durasi_response
+          },
+          laporan: {
+            lebihSla: item.total_diatas_sla_response,
+            kurangSla: item.total_dibawah_sla_response
+          }
+        },
+        recoveryTime: {
+          menit: {
+            total: item.total_durasi_recovery,
+            rataRata: item.avg_durasi_recovery,
+            max: item.max_durasi_recovery,
+            min: item.min_durasi_recovery
+          },
+          laporan: {
+            lebihSla: item.total_diatas_sla_recovery,
+            kurangSla: item.total_dibawah_sla_recovery
+          }
         }
       }
     }
-  })
+  )
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 65559b4..449f0b0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -1,156 +1,490 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type9 @update:filters="(value) => filters = value" />
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
+    <Type9 @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="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column"
-        cell-template="cellRight" />
-      <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
-        group-index="0" v-if="filters.groupBy" />
-      <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="Kode" css-class="custom-table-column"
-        cell-template="cellLeft" />
-      <DxColumn :width="200" alignment="center" data-field="nama_regu" caption="Nama Regu"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        :width="60"
+        alignment="center"
+        data-field="no"
+        caption="NO"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="kode_regu"
+        caption="Kode"
+        css-class="custom-table-column"
+        group-index="0"
+        v-if="filters.groupBy"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="kode_regu"
+        caption="Kode"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="nama_regu"
+        caption="Nama Regu"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="cellRight" />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="laporan.total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <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="70" alignment="center" data-field="laporan.sudahSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.sudahSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="laporan.sudahSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </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="70" alignment="center" data-field="laporan.belumSelesai.persen" data-type="number"
-            caption="%" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="laporan.belumSelesai.jml"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="laporan.belumSelesai.persen"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.max" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.menit.min" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="responseTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="responseTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.total" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.rataRata" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.max" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.menit.min" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.total"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.rataRata"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.max"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.menit.min"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.lebihSla" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="recoveryTime.laporan.kurangSla" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.lebihSla"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="recoveryTime.laporan.kurangSla"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxSummary>
-        <DxGroupItem :show-in-group-footer="true" column="no" display-format="Total" css-class="!text-left" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.total" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.jml" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.sudahSelesai.persen" summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.jml" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="laporan.belumSelesai.persen" summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.total" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.rataRata" summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.max" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.menit.min" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.lebihSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="responseTime.laporan.kurangSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.total" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.rataRata" summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.max" summary-type="avg"
-          css-class="!text-right" :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.menit.min" summary-type="avg"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.lebihSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
-        <DxGroupItem :show-in-group-footer="true" column="recoveryTime.laporan.kurangSla" summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" css-class="!text-right" />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="no"
+          display-format="Total"
+          css-class="!text-left"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.total"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.sudahSelesai.persen"
+          summary-type="avg"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="laporan.belumSelesai.persen"
+          summary-type="avg"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.total"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.rataRata"
+          summary-type="avg"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.max"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.menit.min"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.rataRata"
+          summary-type="avg"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.max"
+          summary-type="avg"
+          css-class="!text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.menit.min"
+          summary-type="avg"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="true"
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          css-class="!text-right"
+        />
 
-        <DxTotalItem summary-type="sum" display-format="Total" show-in-column="no" css-class="text-white !text-right" />
-        <DxTotalItem summary-type="sum" show-in-column="laporan.total" column="laporan.total"
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="no"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.sudahSelesai.jml" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.sudahSelesai.persen" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.belumSelesai.jml" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="laporan.belumSelesai.persen" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.total" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.menit.max" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="responseTime.menit.min" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="responseTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="responseTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.total" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.rataRata" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.menit.max" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="recoveryTime.menit.min" summary-type="avg" css-class="text-white !text-right"
-          :customize-text="(e: any) => parseInt(e.value) ? formatWaktu(e.value) : '-'" />
-        <DxTotalItem column="recoveryTime.laporan.lebihSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
-        <DxTotalItem column="recoveryTime.laporan.kurangSla" summary-type="sum" css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))" />
+        />
+        <DxTotalItem
+          summary-type="sum"
+          show-in-column="laporan.total"
+          column="laporan.total"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.jml"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.sudahSelesai.persen"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.jml"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="laporan.belumSelesai.persen"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.menit.total"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.menit.rataRata"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.menit.max"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="responseTime.menit.min"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.lebihSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="responseTime.laporan.kurangSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.total"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.rataRata"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.max"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="recoveryTime.menit.min"
+          summary-type="avg"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.lebihSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="recoveryTime.laporan.kurangSla"
+          summary-type="sum"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
       </DxSummary>
 
       <template #cellCenter="{ data }">
@@ -159,22 +493,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -331,47 +669,49 @@ const filters = ref({
 })
 
 onMounted(() => {
-  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map((item: any, index: number) => {
-    return {
-      no: ++index,
-      kode_regu: item.kode_regu,
-      nama_regu: item.nama_regu,
-      laporan: {
-        total: item.total,
-        sudahSelesai: {
-          jml: item.total_selesai,
-          persen: item.persen_selesai
-        },
-        belumSelesai: {
-          jml: item.total_inproses,
-          persen: item.persen_inproses
-        }
-      },
-      responseTime: {
-        menit: {
-          total: item.total_durasi_response,
-          rataRata: item.avg_durasi_response,
-          max: item.max_durasi_response,
-          min: item.min_durasi_response
-        },
+  data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
+    (item: any, index: number) => {
+      return {
+        no: ++index,
+        kode_regu: item.kode_regu,
+        nama_regu: item.nama_regu,
         laporan: {
-          lebihSla: item.total_diatas_sla_response,
-          kurangSla: item.total_dibawah_sla_response
-        }
-      },
-      recoveryTime: {
-        menit: {
-          total: item.total_durasi_recovery,
-          rataRata: item.avg_durasi_recovery,
-          max: item.max_durasi_recovery,
-          min: item.min_durasi_recovery
+          total: item.total,
+          sudahSelesai: {
+            jml: item.total_selesai,
+            persen: item.persen_selesai
+          },
+          belumSelesai: {
+            jml: item.total_inproses,
+            persen: item.persen_inproses
+          }
         },
-        laporan: {
-          lebihSla: item.total_diatas_sla_recovery,
-          kurangSla: item.total_dibawah_sla_recovery
+        responseTime: {
+          menit: {
+            total: item.total_durasi_response,
+            rataRata: item.avg_durasi_response,
+            max: item.max_durasi_response,
+            min: item.min_durasi_response
+          },
+          laporan: {
+            lebihSla: item.total_diatas_sla_response,
+            kurangSla: item.total_dibawah_sla_response
+          }
+        },
+        recoveryTime: {
+          menit: {
+            total: item.total_durasi_recovery,
+            rataRata: item.avg_durasi_recovery,
+            max: item.max_durasi_recovery,
+            min: item.min_durasi_recovery
+          },
+          laporan: {
+            lebihSla: item.total_diatas_sla_recovery,
+            kurangSla: item.total_dibawah_sla_recovery
+          }
         }
       }
     }
-  })
+  )
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index b610124..c67e3d9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -1,80 +1,244 @@
 <template>
-  <Filters @reset-form="data = []" @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type9 @update:filters="(value) => filters = value" />
+  <Filters
+    @reset-form="data = []"
+    @run-search="() => filterData(filters)"
+    :report-button="true"
+    class="mb-4"
+  >
+    <Type9 @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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="cellRight" />
-      <DxColumn :width="120" alignment="center" data-field="nama_uid" caption="Nama UID" css-class="custom-table-column"
-        group-index="0" v-if="filters.groupBy" />
-      <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
-        css-class="custom-table-column" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="nama_uid"
+        caption="Nama UID"
+        css-class="custom-table-column"
+        group-index="0"
+        v-if="filters.groupBy"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="tanggal"
+        caption="Tanggal Lapor"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" cell-template="cellRight" />
+        <DxColumn
+          :width="120"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <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="70" alignment="center" data-field="persen_selesai" data-type="number" caption="%"
-            css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </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="70" alignment="center" data-field="persen_inproses" data-type="number" caption="%"
-            css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_durasi_response" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_durasi_response"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_response"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_response"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="min_durasi_response"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_diatas_sla_response"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_response"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_durasi_recovery" data-type="number"
-            caption="Total" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
-            caption="Rata-Rata" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-            css-class="custom-table-column" cell-template="data-waktu" />
-          <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-            css-class="custom-table-column" cell-template="data-waktu" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_durasi_recovery"
+            data-type="number"
+            caption="Total"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="avg_durasi_recovery"
+            data-type="number"
+            caption="Rata-Rata"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="max_durasi_recovery"
+            data-type="number"
+            caption="Max"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="min_durasi_recovery"
+            data-type="number"
+            caption="Min"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-          <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
-            caption=">SLA" css-class="custom-table-column" cell-template="cellRight" />
-          <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
-            caption="≤SLA" css-class="custom-table-column" cell-template="cellRight" />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_diatas_sla_recovery"
+            data-type="number"
+            caption=">SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="total_dibawah_sla_recovery"
+            data-type="number"
+            caption="≤SLA"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
@@ -84,22 +248,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -173,13 +341,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerTanggal, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.rekap.gangguanPerTanggal,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
@@ -211,4 +382,4 @@ const filters = ref({ groupBy: false })
 onMounted(() => {
   data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerTanggal
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 3832e5f..8f43533 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -1,64 +1,182 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @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="false">
+    <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="false"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="durasi_response_time" caption="Response Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="150" alignment="center" data-field="durasi_recovery_time" caption="Recovery Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="waktu_media" caption="Tgl Media"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_media" caption="Keterangan Media"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Response Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Recovery Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="waktu_media"
+        caption="Tgl Media"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_media"
+        caption="Keterangan Media"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -84,12 +202,22 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -114,18 +242,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -140,7 +278,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_media" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_media"
+          class-name="flex-1"
+        />
       </div>
     </div>
   </DetailDialog>
@@ -224,13 +367,16 @@ const onExporting = (e: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanBerdasarkanMedia, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.keluhan.daftar.keluhanBerdasarkanMedia,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index d9b34d3..4971a6a 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -1,56 +1,175 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @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 :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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 !align-top" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No"
-        cell-template="cellRight" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column !align-top" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-        css-class="custom-table-column !align-top" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column !align-top" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column !align-top" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column !align-top" cell-template="data-waktu" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column !align-top" cell-template="data-waktu" />
-      <DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column !align-top" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column !align-top"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="pembuat_laporan"
+        caption="Pembuat Laporan"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column !align-top"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_dialihkan"
+        caption="Tgl Dialihkan"
+        css-class="custom-table-column !align-top"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column !align-top"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column !align-top"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column !align-top"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column !align-top"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_unit_lama"
+        caption="Unit Asal"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column !align-top"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
@@ -58,22 +177,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p>
+      <template #formatTime="{ data }">
+        <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -192,4 +315,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.keluhan.daftar.daftarKeluhanDialihkanKeUnitLain
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index bc0f25a..276a6bd 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -1,55 +1,179 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type10 @update:filters="(value) => filters = value" />
+    <Type10 @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="false">
+    <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="false"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-        css-class="custom-table-column" cell-template="cellRight" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Jml Lapor"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -57,22 +181,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="showData()">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -108,18 +236,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -139,7 +277,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -149,7 +292,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -244,15 +392,18 @@ const onExporting = (e: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali, {
-  minJmlLapor: 1,
-  maxJmlLapor: 100,
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.keluhan.daftar.keluhanMelaporLebihDariSatuKali,
+  {
+    minJmlLapor: 1,
+    maxJmlLapor: 100,
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -289,4 +440,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.keluhan.daftar.daftarKeluhanMelaporLebihDariSatuKali
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 72e531a..fabbe85 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -1,62 +1,173 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type11 @update:filters="(value) => filters = value" />
+    <Type11 @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="false">
+    <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="false"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="cellLeft" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -87,18 +198,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -118,7 +239,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -128,7 +254,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -222,15 +353,18 @@ const onExporting = (e: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanRecoveryTime, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  minDurasiRecoveryTime: 0,
-  maxDurasiRecoveryTime: 0,
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.keluhan.daftar.keluhanRecoveryTime,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    minDurasiRecoveryTime: 0,
+    maxDurasiRecoveryTime: 0,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -265,4 +399,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.keluhan.daftar.daftarKeluhanRecoveryTime
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 61a399a..b46ee15 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -1,52 +1,164 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type11 @update:filters="(value) => filters = value" />
+    <Type11 @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="false">
+    <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="false"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="cellLeft" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer" @click="showData()">
@@ -54,22 +166,26 @@
         </p>
       </template>
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #cellRight="{ data }">
+      <template #formatNumber="{ data }">
         <p class="text-right cursor-pointer" @click="showData()">
-          {{ isNumber(data.text) ? data.column.caption == '%' ? formatPercentage(data.text) :
-    formatNumber(data.text) :
-    data.text }}
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -100,18 +216,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -131,7 +257,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -141,7 +272,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -236,15 +372,18 @@ const onExporting = (e: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanResponseTime, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  minDurasiResponseTime: 0,
-  maxDurasiResponseTime: 0,
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.keluhan.daftar.keluhanResponseTime,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    minDurasiResponseTime: 0,
+    maxDurasiResponseTime: 0,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -280,4 +419,4 @@ const filters = ref()
 onMounted(() => {
   data.value = dummyData.keluhan.daftar.daftarKeluhanResponseTime
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index df5a181..ab385d5 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -1,62 +1,180 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @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="false">
+    <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="false"
+    >
       <DxSelection mode="single" />
       <DxPaging :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
-        css-class="custom-table-column" cell-template="data-waktu" />
-      <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Telp Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="nama_ulp" caption="Nama ULP" css-class="custom-table-column"
-        cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_lapor"
+        caption="Tgl Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_response"
+        caption="Tgl Response"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Recovery"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_response_time"
+        caption="Durasi Response Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="durasi_recovery_time"
+        caption="Durasi Recovery Time"
+        css-class="custom-table-column"
+        cell-template="formatTime"
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field="status_akhir"
+        caption="Status"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Telp Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer" @click="showData()">
           {{ data.text }}
         </p>
       </template>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showData()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -87,18 +205,28 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_response_time)
-    ? formatWaktu(dataDetail?.durasi_response_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
-        <InputText :readonly="true" :value="parseInt(dataDetail?.durasi_recovery_time)
-    ? formatWaktu(dataDetail?.durasi_recovery_time)
-    : '-'
-    " class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -118,7 +246,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.alamat_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -128,7 +261,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" type="textarea" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_pelapor"
+          class-name="flex-1"
+        />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -222,13 +360,16 @@ const onExporting = (e: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.keluhan.daftar.keluhanSelesaiTanpaIDPelanggan,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index eff9e92..b362467 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -1,61 +1,190 @@
 <template>
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type3 @update:filters="(value) => filters = value" />
+    <Type3 @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 :page-size="5" :enabled="true" />
-      <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
-        :show-info="true" :show-navigation-buttons="true" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxPager
+        :visible="true"
+        :allowed-page-sizes="[5, 10, 20]"
+        display-mode="full"
+        :show-page-size-selector="true"
+        :show-info="true"
+        :show-navigation-buttons="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 !align-top" :width="50" alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-      <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="Contact Center"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_uid" caption="UI Dist."
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_ulp" caption="ULP"
-        css-class="custom-table-column !align-top" />
-      <DxColumn :width="170" alignment="center" data-field="idpel_nometer" caption="IDPEL/NO METER"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_pelapor" caption="Nama Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
+      <DxColumn
+        css-class="custom-table-column !align-top"
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        data-type="number"
+        caption="No"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_laporan"
+        caption="No Laporan"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Contact Center"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_uid"
+        caption="UI Dist."
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="ULP"
+        css-class="custom-table-column !align-top"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="idpel_nometer"
+        caption="IDPEL/NO METER"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Nama Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="alamat_pelapor" caption="Alamat Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="alamat_pelapor"
+        caption="Alamat Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
 
-      <DxColumn :width="170" alignment="center" data-field="no_telp_pelapor" caption="No Tlp Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="status_akhir" caption="APKT Status"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="150" alignment="center" data-field="nama_pelapor" caption="Created By"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Penyelesaian"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="jumlah_lapor" caption="Lapor Ulang"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="media" caption="Sumber Lapor"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_issuetype" caption="Issue Type"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
-      <DxColumn :width="170" alignment="center" data-field="nama_subissuetype" caption="Sub Issue Type"
-        css-class="custom-table-column !align-top" cell-template="cellLeft" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="no_telp_pelapor"
+        caption="No Tlp Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="keterangan_pelapor"
+        caption="Keterangan Pelapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="status_akhir"
+        caption="APKT Status"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_pelapor"
+        caption="Created By"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="waktu_recovery"
+        caption="Tgl Penyelesaian"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="jumlah_lapor"
+        caption="Lapor Ulang"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_issuetype"
+        caption="Issue Type"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_subissuetype"
+        caption="Sub Issue Type"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
 
-      <template #cellLeft="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -128,13 +257,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 
 const data = ref<any[]>([])
 
-const { onResult, onError, loading, refetch } = useQuery(queries.keluhan.daftar.keluhanDiselesaikanCC123, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.keluhan.daftar.keluhanDiselesaikanCC123,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 const filters = ref()
 
 const filterData = (params: any) => {
@@ -169,4 +301,4 @@ const filterData = (params: any) => {
 onMounted(() => {
   data.value = dummyData.keluhan.daftar.daftarKeluhanDiselesaikanCC123
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 4d9b15c..f48de31 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -63,7 +63,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -72,7 +72,7 @@
           data-type="number"
           caption="Selesai"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="70"
@@ -81,7 +81,7 @@
           data-type="number"
           caption="%"
           css-class="custom-table-column"
-          cell-template="percent"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -90,7 +90,7 @@
           data-type="number"
           caption="InProgress"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="70"
@@ -99,7 +99,7 @@
           data-type="number"
           caption="%"
           css-class="custom-table-column"
-          cell-template="percent"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -108,7 +108,7 @@
           data-type="number"
           caption="Rata-Rata"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -135,7 +135,7 @@
           data-type="number"
           caption="> SLA"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -144,7 +144,7 @@
           data-type="number"
           caption="≤ SLA"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Penyelesaian" css-class="custom-table-column">
@@ -155,7 +155,7 @@
           data-type="number"
           caption="Rata-Rata"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -182,7 +182,7 @@
           data-type="number"
           caption="> SLA"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
         <DxColumn
           :width="150"
@@ -191,22 +191,30 @@
           data-type="number"
           caption="≤ SLA"
           css-class="custom-table-column"
-          cell-template="defaults"
+          cell-template="formatNumber"
         />
       </DxColumn>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
-      <template #percent="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
       </template>
 
-      <template #defaults="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+      <template #formatText="{ data }">
+        <p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -269,7 +277,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -277,7 +285,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -285,7 +293,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -294,7 +302,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -303,7 +311,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -312,7 +320,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -321,7 +329,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -330,7 +338,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -339,7 +347,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -348,7 +356,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -357,7 +365,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -366,7 +374,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -375,7 +383,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -384,7 +392,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -393,7 +401,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -402,22 +410,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
@@ -581,6 +589,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 085dae1..6ac5bde 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -58,7 +58,7 @@
         data-field="media"
         caption="Nama Media"
         css-class="custom-table-column"
-        cell-template="cell-left"
+        cell-template="formatText"
       />
       <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
         <DxColumn
@@ -94,7 +94,7 @@
         />
       </DxSummary>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
@@ -158,7 +158,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -166,7 +166,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -174,7 +174,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -183,7 +183,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -192,7 +192,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -201,7 +201,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -210,7 +210,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -219,7 +219,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -228,7 +228,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -237,7 +237,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -246,7 +246,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -255,7 +255,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -264,7 +264,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -273,7 +273,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -282,7 +282,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -291,22 +291,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 7dfe348..b0d2a68 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -51,6 +51,7 @@
         data-type="number"
         data-field="no"
         caption="No"
+        cell-template="formatNumber"
       />
       <!-- <DxColumn
         :width="120"
@@ -68,7 +69,7 @@
         data-field="fungsi_bidang"
         caption="Fungsi Bidang"
         css-class="custom-table-column"
-        cell-template="cell-left"
+        cell-template="formatText"
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -78,6 +79,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -87,6 +89,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="70"
@@ -95,7 +98,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
-            cell-template="percent"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
@@ -106,6 +109,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="70"
@@ -114,7 +118,7 @@
             data-type="number"
             caption="%"
             css-class="custom-table-column"
-            cell-template="percent"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -127,6 +131,7 @@
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -135,6 +140,7 @@
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -143,7 +149,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -152,7 +158,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -163,6 +169,7 @@
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -171,6 +178,7 @@
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -183,6 +191,7 @@
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -191,6 +200,7 @@
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -199,7 +209,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -208,7 +218,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -219,6 +229,7 @@
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -227,6 +238,7 @@
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -236,122 +248,137 @@
           summary-type="sum"
           display-format="Total"
           show-in-column="no"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white"
+          css-class="text-white !text-right"
         />
       </DxSummary>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
-      <template #percent="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
       </template>
-      <template #cell-left="{ data }">
-        <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
+
+      <template #formatText="{ data }">
+        <p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
       </template>
@@ -414,7 +441,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -422,7 +449,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -430,7 +457,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -439,7 +466,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -448,7 +475,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -457,7 +484,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -466,7 +493,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -475,7 +502,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -484,7 +511,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -493,7 +520,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -502,7 +529,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -511,7 +538,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -520,7 +547,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -529,7 +556,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -538,7 +565,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -547,22 +574,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
@@ -728,6 +755,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
+import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 6f56a07..d7d00f9 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -58,7 +58,7 @@
         data-field="tipe_keluhan"
         caption="Jenis Keluhan"
         css-class="custom-table-column"
-        cell-template="cell-left"
+        cell-template="formatText"
       />
       <!-- <DxColumn
         :width="170"
@@ -142,7 +142,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -151,7 +151,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -198,7 +198,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -207,7 +207,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -468,8 +468,8 @@
         />
       </DxSummary>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -478,7 +478,7 @@
         <p @click="showDialogDataSelected()" class="cursor-pointer">{{ data.text }}%</p>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
@@ -542,7 +542,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -550,7 +550,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -558,7 +558,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -567,7 +567,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -576,7 +576,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -585,7 +585,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -594,7 +594,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -603,7 +603,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -612,7 +612,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -621,7 +621,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -630,7 +630,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -639,7 +639,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -648,7 +648,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -657,7 +657,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -666,7 +666,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -675,22 +675,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 3d52a5d..7d13528 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -68,7 +68,7 @@
         data-field="kelompok"
         caption="Kelompok Keluhan"
         css-class="custom-table-column"
-        cell-template="cell-left"
+        cell-template="formatText"
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -143,7 +143,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -152,7 +152,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -199,7 +199,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -208,7 +208,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -342,8 +342,8 @@
         />
       </DxSummary>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -352,7 +352,7 @@
         <p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
@@ -416,7 +416,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -424,7 +424,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -432,7 +432,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -441,7 +441,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -450,7 +450,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -459,7 +459,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -468,7 +468,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -477,7 +477,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -486,7 +486,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -495,7 +495,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -504,7 +504,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -513,7 +513,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -522,7 +522,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -531,7 +531,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -540,7 +540,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -549,22 +549,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index c06eda6..9771964 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -58,7 +58,7 @@
         data-field="tanggal_lapor"
         caption="Tanggal Lapor"
         css-class="custom-table-column"
-        cell-template="cell-left"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -142,7 +142,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -151,7 +151,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -198,7 +198,7 @@
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -207,7 +207,7 @@
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -341,8 +341,8 @@
         />
       </DxSummary>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -351,7 +351,7 @@
         <p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
@@ -415,7 +415,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -423,7 +423,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -431,7 +431,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -440,7 +440,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -449,7 +449,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -458,7 +458,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -467,7 +467,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -476,7 +476,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -485,7 +485,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -494,7 +494,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -503,7 +503,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -512,7 +512,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -521,7 +521,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -530,7 +530,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -539,7 +539,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -548,22 +548,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 79494a4..b95b6dc 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -68,7 +68,7 @@
         data-field="nama_ulp"
         caption="Unit"
         css-class="custom-table-column"
-        cell-template="cell-left"
+        cell-template="formatText"
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
@@ -469,8 +469,8 @@
         />
       </DxSummary>
 
-      <template #data-waktu="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">
+      <template #formatTime="{ data }">
+        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -479,7 +479,7 @@
         <p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="cursor-pointer text-left" @click="showDialogDataSelected()">
           {{ data.text }}
         </p>
@@ -543,7 +543,7 @@
             "
             data-type="number"
             caption="No"
-            cell-template="cellRight"
+            cell-template="formatNumber"
           />
           <DxColumn
             :width="150"
@@ -551,7 +551,7 @@
             data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -559,7 +559,7 @@
             data-field="waktu_lapor"
             caption="Tgl Lapor"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -568,7 +568,7 @@
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -577,7 +577,7 @@
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -586,7 +586,7 @@
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -595,7 +595,7 @@
             caption="Durasi Recovery Time"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -604,7 +604,7 @@
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -613,7 +613,7 @@
             caption="IDPEL/NO METER"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="data-waktu"
+            cell-template="formatTime"
           />
           <DxColumn
             :width="150"
@@ -622,7 +622,7 @@
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -631,7 +631,7 @@
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -640,7 +640,7 @@
             caption="No Tlp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="200"
@@ -649,7 +649,7 @@
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -658,7 +658,7 @@
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -667,7 +667,7 @@
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
           <DxColumn
             :width="150"
@@ -676,22 +676,22 @@
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
-            cell-template="cellLeft"
+            cell-template="formatText"
           />
 
-          <template #cellLeft="{ data }">
+          <template #formatText="{ data }">
             <p class="text-left cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #cellRight="{ data }">
+          <template #formatNumber="{ data }">
             <p class="text-right cursor-pointer">
               {{ data.text }}
             </p>
           </template>
 
-          <template #data-waktu="{ data }">
+          <template #formatTime="{ data }">
             <p>
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index c143aef..fd87029 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -1,54 +1,139 @@
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+  <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="formatText"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <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>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -162,4 +247,4 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index 0056d2b..80cdc42 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -1,40 +1,102 @@
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+  <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="formatText"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
-          css-class="custom-table-column" />
-        <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 }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -146,4 +208,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index 74796e7..a85490f 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -1,46 +1,113 @@
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+  <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="formatText"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Kepatuhan dan Akurasi APKT"
+        css-class="custom-table-column"
+      >
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number" caption="Jan 2020"
-            css-class="custom-table-column" />
-          <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>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -160,4 +227,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 20a64fd..fd72632 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -1,86 +1,242 @@
 <template>
-  <Filters :report-button="true" @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+  <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="formatText"
+      />
 
-      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
-        css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
-          caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
-        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
-          caption="Gangguan" css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        :caption="`s.d ${getMonthName(currentMonth - 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(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="`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 }">
         <p>{{ data.text }}%</p>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -197,4 +353,4 @@ const filterData = (params: any) => {
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 942fecb..257fe2d 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -1,53 +1,133 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <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="formatText"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Aging Complains" css-class="custom-table-column">
-        <DxColumn alignment="center" caption="Rata-Rata RCT Gangguan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="avg_durasi_recovery_gangguan" data-type="number"
-            caption="Feb 2020" css-class="custom-table-column" />
-          <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>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -122,14 +202,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.agingComplaintKumulatif, {
-  regional: '',
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.laporan.kumulatif.agingComplaintKumulatif,
+  {
+    regional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+  }
+)
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentYear.value = tahun.id
@@ -155,4 +238,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 77eba88..3bd1b86 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -1,39 +1,96 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <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="formatText"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="ENS (Distribusi)" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="terencana" data-type="number" caption="Terencana"
-          css-class="custom-table-column" />
-        <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 }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -141,4 +198,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index 4ae73e2..1daeed4 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -1,45 +1,107 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <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="formatText"
+      />
+      <DxColumn
+        alignment="center"
+        caption="Kepatuhan dan Akurasi APKT"
+        css-class="custom-table-column"
+      >
         <DxColumn alignment="center" caption="Gangguan Berulang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="gangguan_berulang" data-type="number" caption="Jan 2020"
-            css-class="custom-table-column" />
-          <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>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -112,14 +174,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(data)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif, {
-  regional: '',
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.laporan.kumulatif.kepatuhandanAkurasiDalamPelaporanKumulatif,
+  {
+    regional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+  }
+)
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
 
@@ -144,4 +209,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 9b13102..5139e88 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -1,85 +1,236 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <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="formatText"
+      />
 
-      <DxColumn alignment="center" :caption="`s.d ${getMonthName(currentMonth - 1)} ${lastYear}`"
-        css-class="custom-table-column">
-        <DxColumn :width="120" alignment="center" data-field="total_keluhan_tahun_sebelumnya" data-type="number"
-          caption="Keluhan" css-class="custom-table-column" name="keluhanBulanLalu" />
-        <DxColumn :width="120" alignment="center" data-field="total_gangguan_tahun_sebelumnya" data-type="number"
-          caption="Gangguan" css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        :caption="`s.d ${getMonthName(currentMonth - 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(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="`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 }">
         <p>{{ data.text }}%</p>
       </template>
 
-      <template #cell-left="{ data }">
+      <template #formatText="{ data }">
         <p class="text-left">
           {{ data.text }}
         </p>
@@ -155,14 +306,17 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif, {
-  regional: '',
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.laporan.kumulatif.penurunanJumlahKomplainKumulatif,
+  {
+    regional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+  }
+)
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentYear.value = tahun.id