From 071ec7510dcf8388f771716a94aaebad9e0159dc Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 19 Mar 2024 14:18:17 +0700
Subject: [PATCH] Refactor code for improved performance and readability

---
 .../Anomali/Gangguan/Anomali_LAPPGP_LPP.vue   |   1 +
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   |   1 +
 .../Anomali/Gangguan/Anomali_LAPPGU_LPP.vue   |   1 +
 .../Anomali/Gangguan/Anomali_LAPPGU_LPT.vue   |   1 +
 .../Anomali/Keluhan/Anomali_LAPPKU_LPP.vue    | 118 ++--
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    | 191 +++++--
 src/components/Pages/Cico/LaporanCICO.vue     |   2 +
 .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue    | 130 ++++-
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    |  31 +-
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  |   1 +
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      |   1 +
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue |   1 +
 .../Daftar/DGangguan_RecoveryTime.vue         |   1 +
 .../Daftar/DGangguan_ResponseTime.vue         |   1 +
 .../Pages/Gangguan/Daftar/DGangguan_STIDP.vue |   1 +
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    |   2 +
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    |   2 +
 .../Rekap/RGangguan_BerdasarMedia.vue         |   2 +
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   |   1 +
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |   2 +
 .../Rekap/RGangguan_JenisGangguan.vue         |   1 +
 .../Rekap/RGangguan_JenisGangguanSE.vue       |   2 +
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    |   2 +
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     |   2 +
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      |   1 +
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   |   2 +
 .../Rekap/RGangguan_RatingPerPosko.vue        |   2 +
 .../Rekap/RGangguan_RatingPerRegu.vue         |   2 +
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue |   1 +
 .../Pages/Keluhan/Daftar/DKeluhan_DKUL.vue    |   1 +
 .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue   |   1 +
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue  |   1 +
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  |   1 +
 .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue   |   1 +
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue     |   1 +
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |   2 +
 .../Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  |   2 +
 .../Rekap/RKeluhan_PerFungsiBidang.vue        | 520 +++++++++---------
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        |   4 +-
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     |   2 +
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     |   2 +
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  |   2 +
 .../Keluhan/Rekap/RKeluhan_RatingPerUnit.vue  |   1 +
 .../Pages/Material/Daftar/Material_DGMYG.vue  |  17 +-
 .../Pages/Material/Rekap/Material_RPM.vue     |  17 +-
 .../MonalisaGR_DispatchingTimeGangguan.vue    |   1 +
 .../Gangguan/Rekap/MonalisaGR_ENSGangguan.vue |   1 +
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue |   2 +
 .../MonalisaGR_GangguanPerJenisGangguan.vue   |   1 +
 .../MonalisaGR_JumlahDDRPTRCTGangguan.vue     |   1 +
 .../Rekap/MonalisaGR_JumlahKaliGangguan.vue   |   1 +
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  |   1 +
 .../Rekap/MonalisaGR_RecoveryTimeGangguan.vue |   1 +
 .../Rekap/MonalisaGR_ResponseTimeGangguan.vue |   1 +
 .../MonalisaKR_GangguanPerJenisKeluhan.vue    |   1 +
 .../MonalisaKR_JumlahDDRPTRCTKeluhan.vue      |   1 +
 .../Rekap/MonalisaKR_JumlahKaliKeluhan.vue    |   1 +
 .../Rekap/MonalisaKR_KeluhanBelumSelesai.vue  |   1 +
 .../Rekap/MonalisaKR_LaporUlangKeluhan.vue    |   1 +
 .../Rekap/MonalisaKR_RecoveryTimeKeluhan.vue  |   1 +
 .../Rekap/MonalisaKR_ResponseTimeKeluhan.vue  |   1 +
 .../Bulanan/MonalisaLB_AgingComplaint.vue     |   2 +
 .../Bulanan/MonalisaLB_EnergyNotSales.vue     |   1 +
 .../Bulanan/MonalisaLB_KADDalamPelaporan.vue  |   1 +
 .../MonalisaLB_PenurunanJumlahKomplain.vue    |   4 +-
 .../Kumulatif/MonalisaLK_AgingComplaint.vue   |   1 +
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   |   1 +
 .../Kumulatif/MonalisaLK_KDADPelaporan.vue    |   1 +
 .../MonalisaLK_PenurunanJumlahKomplain.vue    |   1 +
 .../Pages/PencarianData/PencarianData.vue     |   1 +
 src/components/Pages/Transaksi/Transaksi.vue  |  19 +-
 71 files changed, 730 insertions(+), 400 deletions(-)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 338e0e3..581f551 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
     :show-column-lines="true"
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index aefb558..187a810 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
     :show-row-lines="false"
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
index 3284716..e00bf83 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
     :show-column-lines="true"
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index be3ed4e..af5182c 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
     :show-column-lines="true"
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
index 1c0085b..0cb2677 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
@@ -1,55 +1,112 @@
 <template>
   <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">
-      Laporan Pengaduan PLN Mobile
-    </h1>
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
-  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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
+    :allow-column-reordering="true"
+    class="max-h-[calc(100vh-140px)] mb-10"
+    :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" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
-      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="a"
-        css-class="custom-table-column" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="a"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column">
-      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="b"
-        css-class="custom-table-column" />
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="b"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
-      <DxColumn :width="170" alignment="center" data-field="" data-type="number" caption="c=b/a"
-        css-class="custom-table-column" />
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        data-type="number"
+        caption="c=b/a"
+        css-class="custom-table-column"
+      />
     </DxColumn>
-
   </DxDataGrid>
 </template>
 
 <script setup lang="ts">
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { computed, ref } from 'vue'
-const position = { of: '#data' };
-const showIndicator = ref(true);
-const shading = ref(true);
-const showPane = ref(true);
+const position = { of: '#data' }
+const showIndicator = ref(true)
+const shading = ref(true)
+const showPane = ref(true)
 const props = defineProps({
-  data: Array as () => any[],
+  data: Array as () => any[]
 })
 const data = computed(() => props.data)
 const loading = ref(false)
@@ -61,7 +118,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -72,7 +129,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -87,5 +144,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 590e097..d8e885d 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -1,83 +1,190 @@
 <template>
   <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">
-      Laporan Pengaduan Total
-    </h1>
+    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
-  <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :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
+    :allow-column-reordering="true"
+    class="max-h-[calc(100vh-140px)] mb-10"
+    :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="" caption="Nama Unit" css-class="custom-table-column" />
+    <DxColumn
+      :width="170"
+      alignment="center"
+      data-field=""
+      caption="Nama Unit"
+      css-class="custom-table-column"
+    />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="a"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="a"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="b"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="b"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="c"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="c"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="d"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="d"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="e=a+b+c+d"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="e=a+b+c+d"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-    <DxColumn alignment="center" caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
-      css-class="custom-table-column">
+    <DxColumn
+      alignment="center"
+      caption="Total Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="f"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="f"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="g"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="g"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="h=f+g"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="h=f+g"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
 
-    <DxColumn alignment="center" caption="% Pengaduan Yang Diselesaikan Secara Anomali" css-class="custom-table-column">
+    <DxColumn
+      alignment="center"
+      caption="% Pengaduan Yang Diselesaikan Secara Anomali"
+      css-class="custom-table-column"
+    >
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="i=f/e"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="i=f/e"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="j=g/e"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="j=g/e"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="k=i+j"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field=""
+          data-type="number"
+          caption="k=i+j"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxColumn>
-
   </DxDataGrid>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
-import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
+import {
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
+} from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -89,7 +196,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const loading = ref(false)
 const props = defineProps({
-  data: Array as () => any[],
+  data: Array as () => any[]
 })
 const data = computed(() => props.data)
 
@@ -100,7 +207,7 @@ const onExporting = (e: any) => {
     exportToPdf({
       jsPDFDocument: doc,
       component: e.component,
-      indent: 5,
+      indent: 5
     }).then(() => {
       doc.save(`.pdf`)
     })
@@ -111,7 +218,7 @@ const onExporting = (e: any) => {
     exportToExcel({
       component: e.component,
       worksheet,
-      autoFilterEnabled: true,
+      autoFilterEnabled: true
     }).then(() => {
       workbook.xlsx.writeBuffer().then((buffer: any) => {
         saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
@@ -126,4 +233,4 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   console.log(data)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 0bb3ae2..dd214cc 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -188,6 +189,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index ab78a53..932d3ef 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -1,57 +1,135 @@
 <template>
   <Filters @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" :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
+      :allow-column-reordering="true"
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :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" data-field="nama_posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
         <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_cc123" data-type="number" caption="a"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_cc123"
+            data-type="number"
+            caption="a"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_pln_mobile" data-type="number" caption="b"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_pln_mobile"
+            data-type="number"
+            caption="b"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_comcen" data-type="number" caption="c"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_comcen"
+            data-type="number"
+            caption="c"
+            css-class="custom-table-column"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo" data-type="number" caption="d=b+c"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo"
+            data-type="number"
+            caption="d=b+c"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rekomendasi sistem" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Mendatangkan Petugas" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="rekomendasi_sistem_mendatangkan_petugas"
-            data-type="number" caption="e" css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="rekomendasi_sistem_mendatangkan_petugas"
+            data-type="number"
+            caption="e"
+            css-class="custom-table-column"
+          />
         </DxColumn>
-        <DxColumn alignment="center" caption="Diberikan ke Pelanggan" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_wo_loket" data-type="number" caption="f"
-            css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          caption="Diberikan ke Pelanggan"
+          css-class="custom-table-column"
+        >
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_wo_loket"
+            data-type="number"
+            caption="f"
+            css-class="custom-table-column"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="DLPD" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="dlpd" data-type="number" caption="g"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="dlpd"
+          data-type="number"
+          caption="g"
+          css-class="custom-table-column"
+        />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="history_p2ti" data-type="number" caption="h"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="history_p2ti"
+          data-type="number"
+          caption="h"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxDataGrid>
   </div>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index e61c88f..553ee14 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -58,7 +59,7 @@
         alignment="center"
         data-field="no_laporan"
         caption="No Laporan"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -68,6 +69,14 @@
         caption="Nama 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="formatText"
+      />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
@@ -76,14 +85,6 @@
         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"
@@ -98,7 +99,7 @@
         alignment="center"
         data-field="status_akhir"
         caption="Status"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -106,7 +107,7 @@
         alignment="center"
         data-field="waktu_lapor"
         caption="Tgl Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -114,7 +115,7 @@
         alignment="center"
         data-field="waktu_response"
         caption="Tgl Response"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -122,7 +123,7 @@
         alignment="center"
         data-field="waktu_recovery"
         caption="Tgl Recovery"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -146,7 +147,7 @@
         alignment="center"
         data-field="nama_posko"
         caption="Sumber Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -154,7 +155,7 @@
         alignment="center"
         data-field="waktu_media"
         caption="Tgl Media"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 2e94060..a62f095 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -5,6 +5,7 @@
 
   <div id="dataTable">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :remote-operations="true"
       :data-source="data"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index e511c79..4293075 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index e4ca451..ef27623 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 165e63d..0ffd1b2 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index c5a6643..b38035f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index dd39211..8463394 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 6566616..6d1f10a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -517,6 +518,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 9be9585..9f2cb9b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -147,6 +148,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 78cc3ac..b776ae5 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -141,6 +142,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 070ac87..4dc28ae 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 9164681..b1dbbcf 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -421,6 +422,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 2ed87a9..01a096c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 46f63cd..50d5149 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -432,6 +433,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 7001ae8..55b1b05 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -311,6 +312,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index f31a9f9..b2ed3eb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -517,6 +518,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 74bf73d..aeb7408 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index da1f8f3..16f8a88 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -276,6 +277,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index fdcfbf0..60e68b8 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -238,6 +239,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index b57aa50..a2bf2a7 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -230,6 +231,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index ad49917..bec32a6 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index 4c12d29..3ef44c5 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 3bd14d0..782a978 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 4f844c6..28b7830 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 501139a..5f856ba 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 9e68fab..dcb1fe3 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 0b45b10..5ec3c3a 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 105b842..2ddf17b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -428,6 +429,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index eb475f6..a817bfe 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -127,6 +128,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
           :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index e0241d2..ab97df9 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -394,6 +395,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
           :show-column-lines="true"
@@ -876,265 +878,265 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
       {
-                "id": 0,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13105,
-                "nama_ulp": "ULP LUBUK ALUNG",
-                "fungsi_bidang": "Proses PD/TD, belum ada realisasinya ",
-                "total": 1,
-                "total_selesai": 1,
-                "persen_selesai": 100,
-                "total_inproses": 0,
-                "persen_inproses": 0,
-                "avg_durasi_response": 983,
-                "min_durasi_response": 983,
-                "max_durasi_response": 983,
-                "total_dibawah_sla_response": 1,
-                "total_diatas_sla_response": 0,
-                "avg_durasi_recovery": 1373,
-                "min_durasi_recovery": 1373,
-                "max_durasi_recovery": 1373,
-                "total_dibawah_sla_recovery": 1,
-                "total_diatas_sla_recovery": 0
-            },
-            {
-                "id": 1,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13107,
-                "nama_ulp": "ULP PAINAN",
-                "fungsi_bidang": "Drop Tegangan ",
-                "total": 1,
-                "total_selesai": 1,
-                "persen_selesai": 100,
-                "total_inproses": 0,
-                "persen_inproses": 0,
-                "avg_durasi_response": 2228,
-                "min_durasi_response": 2228,
-                "max_durasi_response": 2228,
-                "total_dibawah_sla_response": 0,
-                "total_diatas_sla_response": 1,
-                "avg_durasi_recovery": 2347,
-                "min_durasi_recovery": 2347,
-                "max_durasi_recovery": 2347,
-                "total_dibawah_sla_recovery": 1,
-                "total_diatas_sla_recovery": 0
-            },
-            {
-                "id": 2,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13104,
-                "nama_ulp": "ULP PARIAMAN",
-                "fungsi_bidang": "Kondisi Jaringan Listrik ",
-                "total": 4,
-                "total_selesai": 3,
-                "persen_selesai": 75,
-                "total_inproses": 1,
-                "persen_inproses": 25,
-                "avg_durasi_response": 772.6666666666666,
-                "min_durasi_response": 171,
-                "max_durasi_response": 1701,
-                "total_dibawah_sla_response": 2,
-                "total_diatas_sla_response": 1,
-                "avg_durasi_recovery": 3476,
-                "min_durasi_recovery": 2824,
-                "max_durasi_recovery": 3968,
-                "total_dibawah_sla_recovery": 4,
-                "total_diatas_sla_recovery": 0
-            },
-            {
-                "id": 3,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13103,
-                "nama_ulp": "ULP INDARUNG",
-                "fungsi_bidang": "Alat Pembatas  tidak berfungsi ",
-                "total": 25,
-                "total_selesai": 15,
-                "persen_selesai": 60,
-                "total_inproses": 10,
-                "persen_inproses": 40,
-                "avg_durasi_response": 1419,
-                "min_durasi_response": 109,
-                "max_durasi_response": 4384,
-                "total_dibawah_sla_response": 10,
-                "total_diatas_sla_response": 5,
-                "avg_durasi_recovery": 4791.6,
-                "min_durasi_recovery": 10,
-                "max_durasi_recovery": 21118,
-                "total_dibawah_sla_recovery": 17,
-                "total_diatas_sla_recovery": 8
-            },
-            {
-                "id": 4,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13105,
-                "nama_ulp": "ULP LUBUK ALUNG",
-                "fungsi_bidang": "PD",
-                "total": 2,
-                "total_selesai": 2,
-                "persen_selesai": 100,
-                "total_inproses": 0,
-                "persen_inproses": 0,
-                "avg_durasi_response": 8920.5,
-                "min_durasi_response": 790,
-                "max_durasi_response": 17051,
-                "total_dibawah_sla_response": 1,
-                "total_diatas_sla_response": 1,
-                "avg_durasi_recovery": 13781.5,
-                "min_durasi_recovery": 6068,
-                "max_durasi_recovery": 21495,
-                "total_dibawah_sla_recovery": 0,
-                "total_diatas_sla_recovery": 2
-            },
-            {
-                "id": 5,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13106,
-                "nama_ulp": "ULP SICINCIN",
-                "fungsi_bidang": "Alat Pembatas  tidak berfungsi ",
-                "total": 11,
-                "total_selesai": 0,
-                "persen_selesai": 0,
-                "total_inproses": 11,
-                "persen_inproses": 100,
-                "avg_durasi_response": 828.25,
-                "min_durasi_response": 387,
-                "max_durasi_response": 1237,
-                "total_dibawah_sla_response": 4,
-                "total_diatas_sla_response": 0,
-                "avg_durasi_recovery": 2622.181818181818,
-                "min_durasi_recovery": 480,
-                "max_durasi_recovery": 15205,
-                "total_dibawah_sla_recovery": 10,
-                "total_diatas_sla_recovery": 1
-            },
-            {
-                "id": 6,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13103,
-                "nama_ulp": "ULP INDARUNG",
-                "fungsi_bidang": "Tidak bisa beli Token ",
-                "total": 1,
-                "total_selesai": 1,
-                "persen_selesai": 100,
-                "total_inproses": 0,
-                "persen_inproses": 0,
-                "avg_durasi_response": 5442,
-                "min_durasi_response": 5442,
-                "max_durasi_response": 5442,
-                "total_dibawah_sla_response": 0,
-                "total_diatas_sla_response": 1,
-                "avg_durasi_recovery": 9759,
-                "min_durasi_recovery": 9759,
-                "max_durasi_recovery": 9759,
-                "total_dibawah_sla_recovery": 0,
-                "total_diatas_sla_recovery": 1
-            },
-            {
-                "id": 7,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13102,
-                "nama_ulp": "ULP TABING",
-                "fungsi_bidang": "Kondisi Jaringan Listrik ",
-                "total": 13,
-                "total_selesai": 4,
-                "persen_selesai": 30.76923076923077,
-                "total_inproses": 9,
-                "persen_inproses": 69.23076923076923,
-                "avg_durasi_response": 5249.461538461538,
-                "min_durasi_response": 300,
-                "max_durasi_response": 22739,
-                "total_dibawah_sla_response": 5,
-                "total_diatas_sla_response": 8,
-                "avg_durasi_recovery": 7872.384615384615,
-                "min_durasi_recovery": 594,
-                "max_durasi_recovery": 32933,
-                "total_dibawah_sla_recovery": 7,
-                "total_diatas_sla_recovery": 6
-            },
-            {
-                "id": 8,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13102,
-                "nama_ulp": "ULP TABING",
-                "fungsi_bidang": "PTL Sering Padam ",
-                "total": 1,
-                "total_selesai": 0,
-                "persen_selesai": 0,
-                "total_inproses": 1,
-                "persen_inproses": 100,
-                "avg_durasi_response": 28613,
-                "min_durasi_response": 28613,
-                "max_durasi_response": 28613,
-                "total_dibawah_sla_response": 0,
-                "total_diatas_sla_response": 1,
-                "avg_durasi_recovery": 37937,
-                "min_durasi_recovery": 37937,
-                "max_durasi_recovery": 37937,
-                "total_dibawah_sla_recovery": 0,
-                "total_diatas_sla_recovery": 1
-            },
-            {
-                "id": 9,
-                "nama_regional": "REGIONAL SUMKAL",
-                "id_uid": 131,
-                "nama_uid": "WILAYAH SUMATERA BARAT",
-                "id_up3": 13100,
-                "nama_up3": "UP3 PADANG",
-                "id_ulp": 13112,
-                "nama_ulp": "ULP KURANJI",
-                "fungsi_bidang": "Alat Ukur Paskabayar tidak berfungsi ",
-                "total": 1,
-                "total_selesai": 1,
-                "persen_selesai": 100,
-                "total_inproses": 0,
-                "persen_inproses": 0,
-                "avg_durasi_response": 2264,
-                "min_durasi_response": 2264,
-                "max_durasi_response": 2264,
-                "total_dibawah_sla_response": 0,
-                "total_diatas_sla_response": 1,
-                "avg_durasi_recovery": 3300,
-                "min_durasi_recovery": 3300,
-                "max_durasi_recovery": 3300,
-                "total_dibawah_sla_recovery": 1,
-                "total_diatas_sla_recovery": 0
-            },
+        id: 0,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        fungsi_bidang: 'Proses PD/TD, belum ada realisasinya ',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        avg_durasi_response: 983,
+        min_durasi_response: 983,
+        max_durasi_response: 983,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        avg_durasi_recovery: 1373,
+        min_durasi_recovery: 1373,
+        max_durasi_recovery: 1373,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13107,
+        nama_ulp: 'ULP PAINAN',
+        fungsi_bidang: 'Drop Tegangan ',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        avg_durasi_response: 2228,
+        min_durasi_response: 2228,
+        max_durasi_response: 2228,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 2347,
+        min_durasi_recovery: 2347,
+        max_durasi_recovery: 2347,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13104,
+        nama_ulp: 'ULP PARIAMAN',
+        fungsi_bidang: 'Kondisi Jaringan Listrik ',
+        total: 4,
+        total_selesai: 3,
+        persen_selesai: 75,
+        total_inproses: 1,
+        persen_inproses: 25,
+        avg_durasi_response: 772.6666666666666,
+        min_durasi_response: 171,
+        max_durasi_response: 1701,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 3476,
+        min_durasi_recovery: 2824,
+        max_durasi_recovery: 3968,
+        total_dibawah_sla_recovery: 4,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13103,
+        nama_ulp: 'ULP INDARUNG',
+        fungsi_bidang: 'Alat Pembatas  tidak berfungsi ',
+        total: 25,
+        total_selesai: 15,
+        persen_selesai: 60,
+        total_inproses: 10,
+        persen_inproses: 40,
+        avg_durasi_response: 1419,
+        min_durasi_response: 109,
+        max_durasi_response: 4384,
+        total_dibawah_sla_response: 10,
+        total_diatas_sla_response: 5,
+        avg_durasi_recovery: 4791.6,
+        min_durasi_recovery: 10,
+        max_durasi_recovery: 21118,
+        total_dibawah_sla_recovery: 17,
+        total_diatas_sla_recovery: 8
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        fungsi_bidang: 'PD',
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        avg_durasi_response: 8920.5,
+        min_durasi_response: 790,
+        max_durasi_response: 17051,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 13781.5,
+        min_durasi_recovery: 6068,
+        max_durasi_recovery: 21495,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 2
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13106,
+        nama_ulp: 'ULP SICINCIN',
+        fungsi_bidang: 'Alat Pembatas  tidak berfungsi ',
+        total: 11,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 11,
+        persen_inproses: 100,
+        avg_durasi_response: 828.25,
+        min_durasi_response: 387,
+        max_durasi_response: 1237,
+        total_dibawah_sla_response: 4,
+        total_diatas_sla_response: 0,
+        avg_durasi_recovery: 2622.181818181818,
+        min_durasi_recovery: 480,
+        max_durasi_recovery: 15205,
+        total_dibawah_sla_recovery: 10,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13103,
+        nama_ulp: 'ULP INDARUNG',
+        fungsi_bidang: 'Tidak bisa beli Token ',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        avg_durasi_response: 5442,
+        min_durasi_response: 5442,
+        max_durasi_response: 5442,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 9759,
+        min_durasi_recovery: 9759,
+        max_durasi_recovery: 9759,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13102,
+        nama_ulp: 'ULP TABING',
+        fungsi_bidang: 'Kondisi Jaringan Listrik ',
+        total: 13,
+        total_selesai: 4,
+        persen_selesai: 30.76923076923077,
+        total_inproses: 9,
+        persen_inproses: 69.23076923076923,
+        avg_durasi_response: 5249.461538461538,
+        min_durasi_response: 300,
+        max_durasi_response: 22739,
+        total_dibawah_sla_response: 5,
+        total_diatas_sla_response: 8,
+        avg_durasi_recovery: 7872.384615384615,
+        min_durasi_recovery: 594,
+        max_durasi_recovery: 32933,
+        total_dibawah_sla_recovery: 7,
+        total_diatas_sla_recovery: 6
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13102,
+        nama_ulp: 'ULP TABING',
+        fungsi_bidang: 'PTL Sering Padam ',
+        total: 1,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 1,
+        persen_inproses: 100,
+        avg_durasi_response: 28613,
+        min_durasi_response: 28613,
+        max_durasi_response: 28613,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 37937,
+        min_durasi_recovery: 37937,
+        max_durasi_recovery: 37937,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13112,
+        nama_ulp: 'ULP KURANJI',
+        fungsi_bidang: 'Alat Ukur Paskabayar tidak berfungsi ',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        avg_durasi_response: 2264,
+        min_durasi_response: 2264,
+        max_durasi_response: 2264,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        avg_durasi_recovery: 3300,
+        min_durasi_recovery: 3300,
+        max_durasi_recovery: 3300,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0
+      }
     ]
   }
 })
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index dc69a71..a9fbc8d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -549,6 +550,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
@@ -1025,5 +1027,5 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
   }
-}) 
+})
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 2fc71c9..ff8fc60 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -406,6 +407,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
           :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 9cccbef..c62e1ca 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -409,6 +410,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
           :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index f93d02f..1e1c270 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -548,6 +549,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index b22ccea..801d59a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index a914574..3f9d4fe 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -1,9 +1,10 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type14 @update:filters="(value) => filters = value" />
+    <Type14 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -137,13 +138,13 @@
 import { 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 Filters from '@/components/Form/Filters.vue'
 import { Type14 } from '@/components/Form/FiltersType'
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 80213f5..3c740da 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -1,9 +1,10 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type14 @update:filters="(value) => filters = value" />
+    <Type14 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -97,13 +98,13 @@
 import { 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 { Type14 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index e06c867..9fcbd78 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 64a279f..21ff047 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index a577698..8fb0985 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -137,6 +138,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index d01beaa..9160630 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index b68a62a..93e158f 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index e52d71f..10ccf06 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 98dce24..1d87432 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 0c56323..3752c3e 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index a4ce743..7c2b2c1 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 96b2a99..0b78c06 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index db4c887..3399981 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index 348ed16..8b03561 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index ba7bf0a..e2656c8 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 23cff8f..63cbc55 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index de6908e..96444f9 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index 1068d39..81a826c 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index c31cd1f..2b9d95d 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -355,6 +356,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index 5b53a18..c3ff754 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index c145612..c9edfc0 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 970ed86..9ab2a5b 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
@@ -683,6 +684,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
           :show-column-lines="true"
@@ -982,7 +984,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
 import { DxDataGrid } from 'devextreme-vue'
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 2e55c74..881533c 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 48b9a21..4003fba 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index c3f1509..0060890 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 6b6c57d..4c6fbb0 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
       :show-column-lines="true"
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 19b3cda..16ea407 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
       :show-row-lines="false"
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index cf76e28..a3045fd 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -1,9 +1,10 @@
 <template>
   <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type17 @update:filters="(value) => filters = value" />
+    <Type17 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
     <DxDataGrid
+      :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
       :show-row-lines="false"
@@ -130,14 +131,14 @@
 import { ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
-    DxColumn,
-    DxColumnFixing,
-    DxExport,
-    DxLoadPanel,
-    DxPaging,
-    DxScrolling,
-    DxSearchPanel,
-    DxSelection
+  DxColumn,
+  DxColumnFixing,
+  DxExport,
+  DxLoadPanel,
+  DxPaging,
+  DxScrolling,
+  DxSearchPanel,
+  DxSelection
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'