From abc285c5015160604faa4437142e6cf059eb5467 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 1 Apr 2024 16:38:05 +0700
Subject: [PATCH 01/13] Refactor data assignment in Anomali_LAPPKU.vue

---
 .../Pages/Anomali/Keluhan/Anomali_LAPPKU.vue  |   7 +-
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    | 206 +++---------------
 2 files changed, 36 insertions(+), 177 deletions(-)

diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
index 5ad45bb..d88a802 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -71,12 +71,11 @@ const filterData = async (params: any) => {
     .then((result) => {
       if (result.data.data != undefined) {
         if (jenisLaporan.name == 'Laporan Berulang Unit') {
-          data.value = result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitBerulang
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitBerulang
         } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-          data.value =
-            result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
         } else {
-          data.value = result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
         }
       } else {
         data.value = []
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 0773656..6abc2ef 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -467,7 +467,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="no_laporan_referensi"
+            data-field="referensi_marking"
             caption="No Laporan Referensi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -476,7 +476,7 @@
             :width="150"
             alignment="center"
             data-field="waktu_lapor"
-            caption="Tgl/Jam Lapor"
+            caption="Tgl Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -484,7 +484,7 @@
             :width="150"
             alignment="center"
             data-field="waktu_response"
-            caption="Tgl/Jam Datang"
+            caption="Dalam Proses Bidang"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -492,7 +492,7 @@
             :width="150"
             alignment="center"
             data-field="waktu_recovery"
-            caption="Tgl/Jam Nyala"
+            caption="Selesai Bidang Unit"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -515,35 +515,11 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="durasi_dispatch_time"
-            caption="Durasi Penugasan Regu"
+            data-field="status_akhir"
+            caption="Status"
             css-class="custom-table-column"
             cell-template="formatTime"
           />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="durasi_perjalanan"
-            caption="Durasi Perjalanan Regu"
-            css-class="custom-table-column"
-            cell-template="formatTime"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="distance"
-            caption="Jarak Closing"
-            css-class="custom-table-column"
-            cell-template="formatNumber"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="dispatch_by"
-            caption="Dispacth Oleh"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
           <DxColumn
             :width="150"
             alignment="center"
@@ -587,72 +563,16 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="media"
-            caption="Sumber Lapor"
+            data-field="uraian"
+            caption="Uraian"
             css-class="custom-table-column"
             cell-template="formatText"
           />
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="diselesaikan_oleh"
-            caption="Diselesaikan Oleh"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_akhir"
-            caption="Status"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="status_induk"
-            caption="Status Induk"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="referensi_marking_induk"
-            caption="Referensi Marking Induk"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="kode_gangguan"
-            caption="Kode Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="jenis_gangguan"
-            caption="Jenis Gangguan"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="penyebab"
-            caption="Penyebab"
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field="tindakan"
-            caption="Tindaan"
+            data-field="respon_pelanggan"
+            caption="Response Pelanggan"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -689,6 +609,11 @@
           <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
         </div>
 
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
+        </div>
+
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
@@ -698,18 +623,18 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.no_laporan_referensi"
+            :value="dataSubSelected?.referensi_marking"
             class-name="flex-1"
           />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
             :value="dataSubSelected?.waktu_response"
@@ -718,7 +643,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
             :value="dataSubSelected?.waktu_recovery"
@@ -753,39 +678,8 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
-          <InputText
-            :readonly="true"
-            class-name="flex-1"
-            :value="
-              parseInt(dataSubSelected?.durasi_recovery_time)
-                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
-                : '-'
-            "
-          />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
-          <InputText
-            :readonly="true"
-            :value="
-              parseInt(dataSubSelected?.durasi_dispatch_time)
-                ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
-                : '-'
-            "
-            class-name="flex-1"
-          />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jarak Closing (m):</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.jarak_closing" class-name="flex-1" />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.dispatch_oleh" class-name="flex-1" />
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -828,61 +722,24 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.media" class-name="flex-1" />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Uraian:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.diselesaikan_oleh"
+            type="textarea"
+            :value="dataSubSelected?.uraian"
             class-name="flex-1"
           />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status Induk:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.status_induk" class-name="flex-1" />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking Induk:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Response Pelanggan:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.referensi_marking_induk"
+            type="textarea"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
-          <InputText
-            :readonly="true"
-            :value="dataSubSelected?.jenis_gangguan"
-            class-name="flex-1"
-          />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
-        </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
-        </div>
       </div>
     </div>
   </DetailDialog>
@@ -989,11 +846,14 @@ const getDetail = async () => {
     .then((result) => {
       if (result.data.data != undefined) {
         if (jenisLaporan.name == 'Laporan Berulang Unit') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanKeluhanUnitBerulang
+          dataSub.value =
+            result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitBerulang
         } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanKeluhanUnitRatingNegatif
+          dataSub.value =
+            result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
         } else {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanKeluhanUnitSkipStep
+          dataSub.value =
+            result.data.data.detailAnomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
         }
       } else {
         dataSub.value = []

From 402f77a7710ced55f3ebbb08fc652bc1f8810ac2 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Mon, 1 Apr 2024 17:01:25 +0700
Subject: [PATCH 02/13] fix: load pane in rekapitulasi gangguan

---
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 20 +++++++++----------
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    | 16 +++++++++------
 .../Rekap/RGangguan_BerdasarMedia.vue         | 17 ++++++++++------
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   | 16 +++++++++------
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue | 14 ++++++++-----
 .../Rekap/RGangguan_JenisGangguan.vue         |  7 +++++--
 .../Rekap/RGangguan_JenisGangguanSE.vue       | 16 +++++++++------
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 17 ++++++++++------
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     | 14 ++++++++-----
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      | 16 +++++++++------
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 14 ++++++++-----
 .../Rekap/RGangguan_RatingPerPosko.vue        | 14 ++++++++-----
 .../Rekap/RGangguan_RatingPerRegu.vue         | 15 +++++++++-----
 src/report/Gangguan/Rekap/RGangguan_ALL.ts    | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_AlihPosko.ts     | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_BerdasarMedia.ts | 10 ++++++++--
 src/report/Gangguan/Rekap/RGangguan_CTTM.ts   | 10 ++++++++--
 src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_JenisGangguan.ts |  5 ++++-
 .../Rekap/RGangguan_JenisGangguanSE.ts        | 10 ++++++++--
 src/report/Gangguan/Rekap/RGangguan_KTI.ts    | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_PerPosko.ts      | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_PerRegu.ts       | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_PerTanggal.ts    | 10 ++++++++--
 .../Rekap/RGangguan_RatingPerPosko.ts         | 10 ++++++++--
 .../Gangguan/Rekap/RGangguan_RatingPerRegu.ts | 10 ++++++++--
 26 files changed, 223 insertions(+), 98 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 7f14155..a097516 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -28,7 +28,7 @@
     >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -36,7 +36,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -593,7 +593,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -601,7 +601,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -1045,6 +1045,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1064,11 +1066,7 @@ import {
   DxGroupItem,
   DxGrouping
 } from 'devextreme-vue/data-grid'
-import { onMounted, ref, watch } from 'vue'
-import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
-import { saveAs } from 'file-saver'
-import { Workbook } from 'exceljs'
-import { useQuery } from '@vue/apollo-composable'
+import { onMounted, ref } from 'vue'
 import { requestGraphQl, queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1082,6 +1080,7 @@ import {
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_ALL'
 import { getDataRowGroup } from '@/utils/helper'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1326,6 +1325,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1341,7 +1341,7 @@ const showDetail = () => {
   if (agreeToShowDialog.value) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 3e6c49c..5a7f7fc 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -174,7 +174,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -182,7 +182,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -481,12 +481,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -515,6 +517,7 @@ import {
   exportDetailToXLSX,
   exportDetailToPDF
 } from '@/report/Gangguan/Rekap/RGangguan_AlihPosko'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -566,6 +569,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -578,7 +582,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
+  // dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 4ab61a7..06f2291 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -8,6 +8,7 @@
   >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -29,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -37,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -169,7 +170,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -177,7 +178,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -467,12 +468,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -500,6 +503,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_BerdasarMedia'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -560,6 +564,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -573,7 +578,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (date.value != '') {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 964ac3f..7936e61 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -29,7 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -37,7 +37,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -207,7 +207,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -215,7 +215,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -414,6 +414,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -421,7 +423,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -445,6 +447,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_CTTM'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -544,6 +547,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -556,7 +560,7 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 97f6263..e45682e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -29,7 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -37,7 +37,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -455,7 +455,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -463,7 +463,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -753,6 +753,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -786,6 +788,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_DMAPKT'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -839,6 +842,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -851,7 +855,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
+  // dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index daae909..b872828 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -426,6 +426,8 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -453,6 +455,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 3c4da13..92301ac 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -33,7 +33,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -41,7 +41,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -495,7 +495,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -503,7 +503,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -797,12 +797,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -831,6 +833,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguanSE'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -956,6 +959,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -969,7 +973,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 4d3bc71..094c943 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -345,7 +345,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -353,7 +353,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -1099,12 +1099,14 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type18 from '@/components/Form/FiltersType/Type18.vue'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -1135,6 +1137,8 @@ import {
 } from '@/report/Gangguan/Rekap/RGangguan_KTI'
 import { getMonthNumber } from '@/utils/texts'
 import { getDataRowGroup } from '@/utils/helper'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+
 const client = apolloClient()
 provideApolloClient(client)
 const position = { of: '#data' }
@@ -1219,6 +1223,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -1232,7 +1237,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 9a47067..eceeb5f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -33,7 +33,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -41,7 +41,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -582,7 +582,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -590,7 +590,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -880,6 +880,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -915,6 +917,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_PerPosko'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -978,6 +981,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -991,7 +995,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index b97b1c6..b09f520 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -592,7 +592,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -600,7 +600,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -890,13 +890,15 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -923,6 +925,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_PerRegu'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -989,6 +992,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -1002,7 +1006,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index f3f23b4..4107cac 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -340,7 +340,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -348,7 +348,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -642,6 +642,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -673,6 +675,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_PerTanggal'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -740,6 +743,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -753,7 +757,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 9dbbdba..f36c5de 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -30,7 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -38,7 +38,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -309,7 +309,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -317,7 +317,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -643,6 +643,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -676,6 +678,7 @@ import {
   exportDetailToPDF,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_RatingPerPosko'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -741,6 +744,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -754,7 +758,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 5aae0ea..72a6f2d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -8,6 +8,7 @@
   >
     <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
+
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
@@ -27,7 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
+      <!-- <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
@@ -35,7 +36,7 @@
         :shading="shading"
         v-model:visible="loadingData"
         :enabled="true"
-      />
+      /> -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -299,7 +300,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
+          <!-- <DxLoadPanel
             shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
@@ -307,7 +308,7 @@
             :shading="shading"
             v-model:visible="loadingSubData"
             :enabled="true"
-          />
+          /> -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
@@ -633,6 +634,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -665,6 +668,7 @@ import {
   exportToXLSX,
   exportDetailToXLSX
 } from '@/report/Gangguan/Rekap/RGangguan_RatingPerRegu'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -734,6 +738,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -747,7 +752,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
+    // dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/report/Gangguan/Rekap/RGangguan_ALL.ts b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
index dfdadda..7295879 100644
--- a/src/report/Gangguan/Rekap/RGangguan_ALL.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_ALL.ts
@@ -687,7 +687,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -719,7 +722,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
index 925c71e..cd24071 100644
--- a/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_AlihPosko.ts
@@ -440,7 +440,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -472,7 +475,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
index c54fec1..4bb6f11 100644
--- a/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_BerdasarMedia.ts
@@ -444,7 +444,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -476,7 +479,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
index d41e232..313cf40 100644
--- a/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_CTTM.ts
@@ -455,7 +455,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -487,7 +490,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
index b8fa217..e233b7a 100644
--- a/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_DMAPKT.ts
@@ -602,7 +602,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -634,7 +637,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
index 90073a2..3b62883 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguan.ts
@@ -538,7 +538,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
diff --git a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
index 3313ebb..1e1e63e 100644
--- a/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_JenisGangguanSE.ts
@@ -655,7 +655,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -687,7 +690,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_KTI.ts b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
index 9755f51..70be78a 100644
--- a/src/report/Gangguan/Rekap/RGangguan_KTI.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_KTI.ts
@@ -521,7 +521,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -553,7 +556,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
index 54f98d0..695a363 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerPosko.ts
@@ -635,7 +635,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -667,7 +670,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
index 96ff2ae..e9b8ca1 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerRegu.ts
@@ -706,7 +706,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -738,7 +741,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
index 8a0dbd2..937205a 100644
--- a/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_PerTanggal.ts
@@ -700,7 +700,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -732,7 +735,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
index de5118a..fb6b4bf 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerPosko.ts
@@ -451,7 +451,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 8, column: 1 }
+    topLeftCell: { row: 8, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -483,7 +486,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(
diff --git a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
index 065f6d6..7a6a9df 100644
--- a/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
+++ b/src/report/Gangguan/Rekap/RGangguan_RatingPerRegu.ts
@@ -440,7 +440,10 @@ const exportToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 10, column: 1 }
+    topLeftCell: { row: 10, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(new Blob([buffer], { type: 'application/octet-stream' }), `Laporan ${reportName}.xlsx`)
@@ -472,7 +475,10 @@ const exportDetailToXLSX = (reportMeta: any, e: any) => {
     component: e.component,
     worksheet,
     autoFilterEnabled: true,
-    topLeftCell: { row: 6, column: 1 }
+    topLeftCell: { row: 6, column: 1 },
+    loadPanel: {
+      enabled: false
+    }
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer: any) => {
       saveAs(

From 375da8c9d50d591df7bb597380e650127ecb1bd4 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 1 Apr 2024 22:46:45 +0700
Subject: [PATCH 03/13] Refactor RGangguan_AlihPosko.vue and api.graphql.ts

---
 src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue | 5 +++--
 src/utils/api/api.graphql.ts                                | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 5a7f7fc..a97c844 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -551,9 +551,10 @@ const getDetail = async () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko_lama != ref.id_posko_baru ? ref.id_posko_baru : ref.id_posko_lama,
     idUid: ref.id_uid,
-    idUp3: ref.id_up3
+    idUp3: ref.id_up3,
+    idPoskoLama: ref.id_posko_lama,
+    idPoskoBaru: ref.id_posko_baru
   }
 
   await requestGraphQl(queries.gangguan.rekap.gangguanAlihPoskoDetail, query)
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index c6a333d..666698b 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -1651,16 +1651,18 @@ export const queries = {
         query detailGangguanAlihPosko(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: Int!
           $idUid: Int!
           $idUp3: Int!
+          $idPoskoLama: Int!
+          $idPoskoBaru: Int!
         ) {
           detailGangguanAlihPosko(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            posko: $posko
             idUid: $idUid
             idUp3: $idUp3
+            idPoskoLama: $idPoskoLama
+            idPoskoBaru: $idPoskoBaru
           ) {
             id
             nama_regional

From 350a0662e4c102067c229058aeff8c0b4dc93d2a Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 1 Apr 2024 23:45:06 +0700
Subject: [PATCH 04/13] Add DxPager component to
 MonalisaLB_PenurunanJumlahKomplain.vue

---
 .../MonalisaGR_DispatchingTimeGangguan.vue    | 439 +++++++++++++++++-
 .../MonalisaLB_PenurunanJumlahKomplain.vue    |   3 +-
 2 files changed, 440 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 9ad071d..7318ce8 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -278,6 +278,431 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Dispatching Time Gangguan"
+    @on-close="closedialogDetail"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="true"
+          />
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="ULP"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl/Jam Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl/Jam Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl/Jam Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Penugasan Regu"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Perjalanan Regu"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Dispatch Oleh"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Tlp Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Sumber Lapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Diselesaikan Oleh"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Referensi Marking"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Kode Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Janis Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Tindakan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Dispatch Oleh:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Diselesaikan Oleh:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Janis Gangguan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -292,6 +717,7 @@ import {
   DxGroupItem,
   DxGrouping,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -310,6 +736,9 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import InputText from '@/components/InputText.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -413,7 +842,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: selected?.media ? selected?.media : '',
+    isSelesai: 0,
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -456,6 +891,8 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
+const onExportingDetail = (e: any) => {}
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 7473af8..5771a71 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -985,7 +985,8 @@ import {
   DxSummary,
   DxTotalItem,
   DxGroupItem,
-  DxGrouping
+  DxGrouping,
+  DxPager
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'

From b12bcc3d60856633ca2ea0a96b03536994ab5193 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 00:39:36 +0700
Subject: [PATCH 05/13] Finish Detail Monalisa Gangguan Belum Selesai

---
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue | 89 ++++++++++++-------
 1 file changed, 58 insertions(+), 31 deletions(-)

diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 37b829f..3eb0e25 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -261,7 +261,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_uid"
             caption="UID/UIW"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -269,7 +269,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_up3"
             caption="UP3"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -278,7 +278,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="ULP"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -287,7 +287,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="id_pelanggan"
             caption="ID Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -296,7 +296,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="nama_pelapor"
             caption="Nama Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -305,7 +305,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="alamat_pelapor"
             caption="Alamat Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -314,7 +314,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_telp_pelapor"
             caption="No Telp Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -323,7 +323,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="keterangan_pelapor"
             caption="Keterangan Pelapor"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -332,7 +332,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="penyebab"
             caption="Penyebab"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -341,7 +341,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="kode_gangguan"
             caption="Kode Gangguan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -359,7 +359,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="durasi_response_time"
             caption="Durasi Response Time"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -368,8 +368,8 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
-            caption="Durasi Recoery Time:"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time:"
             :allow-resizing="false"
             css-class="custom-table-column"
             cell-template="formatTime"
@@ -414,78 +414,105 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UID/UIW:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">UP3:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">ULP:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">ID Pelanggan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.id_pengguna" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Kode Gangguan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.kode_gangguan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Jenis Gangguan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_jenis_gangguan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recoery Time:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
           <InputText :readonly="true" value="" class-name="flex-1" />
         </div>
-
-        <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Selesai:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
-        </div>
       </div>
     </div>
   </DetailDialog>

From 00ce6be00b0ea5eb5f16b6814100471e40db3c76 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 01:26:33 +0700
Subject: [PATCH 06/13] Refactor CSS styles for better readability and
 organization

---
 src/assets/css/style.css                |  17 ++-
 src/components/Dialogs/DetailDialog.vue | 159 ++++++++++++++----------
 2 files changed, 103 insertions(+), 73 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index d9ccae9..7e3d44c 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -2252,10 +2252,6 @@ body {
   overflow-y: auto;
 }
 
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -5549,6 +5545,10 @@ body {
     grid-column-start: 2;
   }
 
+  .sm\:m-8 {
+    margin: 2rem;
+  }
+
   .sm\:mx-0 {
     margin-left: 0px;
     margin-right: 0px;
@@ -5926,6 +5926,15 @@ body {
 }
 
 @media (min-width: 768px) {
+  .md\:m-8 {
+    margin: 2rem;
+  }
+
+  .md\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
   .md\:ml-6 {
     margin-left: 1.5rem;
   }
diff --git a/src/components/Dialogs/DetailDialog.vue b/src/components/Dialogs/DetailDialog.vue
index 89ff697..084d831 100755
--- a/src/components/Dialogs/DetailDialog.vue
+++ b/src/components/Dialogs/DetailDialog.vue
@@ -1,81 +1,102 @@
 <script setup lang="ts">
-import {
-    Dialog,
-    DialogPanel,
-    DialogTitle,
-    TransitionChild,
-    TransitionRoot
-} from '@headlessui/vue';
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
 defineProps({
-    open: {
-        type: Boolean,
-        required: true,
-    },
-    title: {
-        type: String,
-        required: true,
-    },
-    fullWidth: {
-        type: Boolean,
-        default: false,
-    },
+  open: {
+    type: Boolean,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false
+  }
 })
 const emit = defineEmits(['onClose'])
 const handleOnClose = () => {
-    emit('onClose')
+  emit('onClose')
 }
 </script>
 
 <template>
-    <TransitionRoot as="template" :show="open">
-        <Dialog as="div" class="relative z-20" @close="handleOnClose">
-            <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
-                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
-            </TransitionChild>
+  <TransitionRoot as="template" :show="open">
+    <Dialog as="div" class="relative z-20" @close="handleOnClose">
+      <TransitionChild
+        as="template"
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+      </TransitionChild>
 
-            <div class="fixed inset-0 z-10 overflow-y-auto">
-                <div class="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
-                    <TransitionChild as="template" enter="ease-out duration-300"
-                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
-                        leave-from="opacity-100 translate-y-0 sm:scale-100"
-                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-                        <DialogPanel
-                            :class="[fullWidth ? 'sm:max-w-full' : 'sm:max-w-lg sm:my-8', 'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:w-full']">
-                            <!-- Body Section -->
-                            <div class="px-4 py-4 bg-gray-50">
-                                <div class="items-start">
-                                    <div class="flex items-start justify-between w-full">
-                                        <DialogTitle as="h3"
-                                            class="flex-1 text-2xl font-semibold leading-6 text-gray-900">
-                                            {{ title }}
-                                        </DialogTitle>
-                                        <div class="flex items-center ml-3 h-7">
-                                            <button type="button"
-                                                class="rounded-full focus:outline-none focus:ring-0 focus:ring-offset-0"
-                                                @click="handleOnClose">
-                                                <span class="sr-only">Close panel</span>
-                                                <svg width="24" height="25" viewBox="0 0 24 25" fill="none"
-                                                    xmlns="http://www.w3.org/2000/svg">
-                                                    <path
-                                                        d="M12 2.75C10.0716 2.75 8.18657 3.32183 6.58319 4.39317C4.97982 5.46451 3.73013 6.98726 2.99218 8.76884C2.25422 10.5504 2.06114 12.5108 2.43735 14.4021C2.81355 16.2934 3.74215 18.0307 5.10571 19.3943C6.46928 20.7579 8.20656 21.6865 10.0979 22.0627C11.9892 22.4389 13.9496 22.2458 15.7312 21.5078C17.5127 20.7699 19.0355 19.5202 20.1068 17.9168C21.1782 16.3134 21.75 14.4284 21.75 12.5C21.7473 9.91498 20.7192 7.43661 18.8913 5.60872C17.0634 3.78084 14.585 2.75273 12 2.75ZM15.5306 14.9694C15.6003 15.0391 15.6556 15.1218 15.6933 15.2128C15.731 15.3039 15.7504 15.4015 15.7504 15.5C15.7504 15.5985 15.731 15.6961 15.6933 15.7872C15.6556 15.8782 15.6003 15.9609 15.5306 16.0306C15.4609 16.1003 15.3782 16.1556 15.2872 16.1933C15.1961 16.231 15.0986 16.2504 15 16.2504C14.9015 16.2504 14.8039 16.231 14.7128 16.1933C14.6218 16.1556 14.5391 16.1003 14.4694 16.0306L12 13.5603L9.53063 16.0306C9.46095 16.1003 9.37822 16.1556 9.28718 16.1933C9.19613 16.231 9.09855 16.2504 9 16.2504C8.90146 16.2504 8.80388 16.231 8.71283 16.1933C8.62179 16.1556 8.53906 16.1003 8.46938 16.0306C8.3997 15.9609 8.34442 15.8782 8.30671 15.7872C8.269 15.6961 8.24959 15.5985 8.24959 15.5C8.24959 15.4015 8.269 15.3039 8.30671 15.2128C8.34442 15.1218 8.3997 15.0391 8.46938 14.9694L10.9397 12.5L8.46938 10.0306C8.32865 9.88989 8.24959 9.69902 8.24959 9.5C8.24959 9.30098 8.32865 9.11011 8.46938 8.96937C8.61011 8.82864 8.80098 8.74958 9 8.74958C9.19903 8.74958 9.3899 8.82864 9.53063 8.96937L12 11.4397L14.4694 8.96937C14.5391 8.89969 14.6218 8.84442 14.7128 8.8067C14.8039 8.76899 14.9015 8.74958 15 8.74958C15.0986 8.74958 15.1961 8.76899 15.2872 8.8067C15.3782 8.84442 15.4609 8.89969 15.5306 8.96937C15.6003 9.03906 15.6556 9.12178 15.6933 9.21283C15.731 9.30387 15.7504 9.40145 15.7504 9.5C15.7504 9.59855 15.731 9.69613 15.6933 9.78717C15.6556 9.87822 15.6003 9.96094 15.5306 10.0306L13.0603 12.5L15.5306 14.9694Z"
-                                                        fill="#343330" />
-                                                </svg>
+      <div class="fixed inset-0 z-10 overflow-y-auto">
+        <div
+          class="flex justify-center min-h-full p-4 text-center sm:p-0"
+          :class="[fullWidth ? 'items-start' : 'items-center']"
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <DialogPanel
+              :class="[
+                fullWidth ? 'sm:max-w-full md:m-8' : 'sm:max-w-lg md:my-8',
+                'relative overflow-hidden text-left transition-all transform bg-gray-50 rounded-2xl sm:w-full'
+              ]"
+            >
+              <!-- Body Section -->
+              <div class="px-4 py-4 bg-gray-50">
+                <div class="items-start">
+                  <div class="flex items-start justify-between w-full">
+                    <DialogTitle
+                      as="h3"
+                      class="flex-1 text-2xl font-semibold leading-6 text-gray-900"
+                    >
+                      {{ title }}
+                    </DialogTitle>
+                    <div class="flex items-center ml-3 h-7">
+                      <button
+                        type="button"
+                        class="rounded-full focus:outline-none focus:ring-0 focus:ring-offset-0"
+                        @click="handleOnClose"
+                      >
+                        <span class="sr-only">Close panel</span>
+                        <svg
+                          width="24"
+                          height="25"
+                          viewBox="0 0 24 25"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M12 2.75C10.0716 2.75 8.18657 3.32183 6.58319 4.39317C4.97982 5.46451 3.73013 6.98726 2.99218 8.76884C2.25422 10.5504 2.06114 12.5108 2.43735 14.4021C2.81355 16.2934 3.74215 18.0307 5.10571 19.3943C6.46928 20.7579 8.20656 21.6865 10.0979 22.0627C11.9892 22.4389 13.9496 22.2458 15.7312 21.5078C17.5127 20.7699 19.0355 19.5202 20.1068 17.9168C21.1782 16.3134 21.75 14.4284 21.75 12.5C21.7473 9.91498 20.7192 7.43661 18.8913 5.60872C17.0634 3.78084 14.585 2.75273 12 2.75ZM15.5306 14.9694C15.6003 15.0391 15.6556 15.1218 15.6933 15.2128C15.731 15.3039 15.7504 15.4015 15.7504 15.5C15.7504 15.5985 15.731 15.6961 15.6933 15.7872C15.6556 15.8782 15.6003 15.9609 15.5306 16.0306C15.4609 16.1003 15.3782 16.1556 15.2872 16.1933C15.1961 16.231 15.0986 16.2504 15 16.2504C14.9015 16.2504 14.8039 16.231 14.7128 16.1933C14.6218 16.1556 14.5391 16.1003 14.4694 16.0306L12 13.5603L9.53063 16.0306C9.46095 16.1003 9.37822 16.1556 9.28718 16.1933C9.19613 16.231 9.09855 16.2504 9 16.2504C8.90146 16.2504 8.80388 16.231 8.71283 16.1933C8.62179 16.1556 8.53906 16.1003 8.46938 16.0306C8.3997 15.9609 8.34442 15.8782 8.30671 15.7872C8.269 15.6961 8.24959 15.5985 8.24959 15.5C8.24959 15.4015 8.269 15.3039 8.30671 15.2128C8.34442 15.1218 8.3997 15.0391 8.46938 14.9694L10.9397 12.5L8.46938 10.0306C8.32865 9.88989 8.24959 9.69902 8.24959 9.5C8.24959 9.30098 8.32865 9.11011 8.46938 8.96937C8.61011 8.82864 8.80098 8.74958 9 8.74958C9.19903 8.74958 9.3899 8.82864 9.53063 8.96937L12 11.4397L14.4694 8.96937C14.5391 8.89969 14.6218 8.84442 14.7128 8.8067C14.8039 8.76899 14.9015 8.74958 15 8.74958C15.0986 8.74958 15.1961 8.76899 15.2872 8.8067C15.3782 8.84442 15.4609 8.89969 15.5306 8.96937C15.6003 9.03906 15.6556 9.12178 15.6933 9.21283C15.731 9.30387 15.7504 9.40145 15.7504 9.5C15.7504 9.59855 15.731 9.69613 15.6933 9.78717C15.6556 9.87822 15.6003 9.96094 15.5306 10.0306L13.0603 12.5L15.5306 14.9694Z"
+                            fill="#343330"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
 
-                                            </button>
-                                        </div>
-                                    </div>
-
-                                    <div class="w-full mt-6">
-                                        <slot></slot>
-                                    </div>
-                                </div>
-                            </div>
-                        </DialogPanel>
-                    </TransitionChild>
+                  <div class="w-full mt-6">
+                    <slot></slot>
+                  </div>
                 </div>
-            </div>
-        </Dialog>
-    </TransitionRoot>
-</template>
\ No newline at end of file
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>

From b25943dfe129f21f7c607a1eda5ec2b1abc04442 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 02:14:38 +0700
Subject: [PATCH 07/13] Add BufferDialog component to various Vue files

---
 src/components/Pages/Cico/LaporanCICO.vue                      | 2 ++
 src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue | 2 ++
 src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue          | 2 ++
 src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue         | 2 ++
 src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue  | 2 ++
 src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue  | 1 +
 src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue         | 2 ++
 src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue     | 2 ++
 src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue            | 2 ++
 src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  | 2 ++
 .../Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue           | 2 ++
 .../Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue           | 2 ++
 .../Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue        | 3 +++
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue     | 3 +++
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue        | 2 ++
 .../Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue      | 2 ++
 .../Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue         | 2 ++
 .../Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue     | 2 ++
 .../Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue     | 2 ++
 src/components/Pages/PencarianData/PencarianData.vue           | 2 ++
 20 files changed, 41 insertions(+)

diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 1a78abc..1b792f9 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -865,6 +865,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -898,6 +899,7 @@ import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 661755a..0727515 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -290,6 +290,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -316,6 +317,7 @@ import {
   exportToXLSX,
   exportToDOCX
 } from '@/report/Keluhan/Daftar/DKeluhan_BerdasarMedia'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index e05d0e7..f93693e 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -325,6 +325,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -348,6 +349,7 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_DKUL'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 3ca4a46..a4c5c3c 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -430,6 +430,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -453,6 +454,7 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_PLD1K'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index adeea77..b27f784 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -292,6 +292,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -318,6 +319,7 @@ import {
   exportToDOCX,
   exportToXLSX
 } from '@/report/Keluhan/Daftar/DKeluhan_RecoveryTime'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 225a84c..c95e324 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -310,6 +310,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index db4d80f..53365be 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -283,6 +283,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -305,6 +306,7 @@ import {
 } from 'devextreme-vue/data-grid'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_STIDP'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 9cd6af8..0d00075 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -303,6 +303,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -325,6 +326,7 @@ import {
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Keluhan/Daftar/DKeluhan_SelesaiCC'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 6f8f97a..145c573 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -739,6 +739,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -768,6 +769,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { exportToPDF, exportDetailToPDF } from '@/report/Keluhan/Rekap/RKeluhan_ALL'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 1e3f485..b6d6116 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -460,6 +460,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -493,6 +494,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index b1d889e..9bdbb79 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -779,6 +779,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -813,6 +814,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index e823f39..1fbe345 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -922,6 +922,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -957,6 +958,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, isNumber, formatPercentage } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index e91666f..d4ce6d4 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -785,6 +785,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -819,6 +821,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index c8da184..bed9f62 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -787,6 +787,8 @@
       </div>
     </div>
   </DetailDialog>
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -822,6 +824,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { reformatDate } from '@/utils/texts'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 7513dcd..793c7a6 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -918,6 +918,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -953,6 +954,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 7318ce8..4de2852 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -703,6 +703,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -739,6 +740,7 @@ import { provideApolloClient } from '@vue/apollo-composable'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import InputText from '@/components/InputText.vue'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 3eb0e25..cd7587c 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -516,6 +516,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -551,6 +552,7 @@ import InputText from '@/components/InputText.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 0514642..0afc52f 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -642,6 +642,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -676,6 +677,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 5771a71..381fbfb 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -966,6 +966,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1001,6 +1002,7 @@ import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 4801b43..0ed58ac 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -234,6 +234,7 @@
       </div>
     </div>
   </DetailDialog>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -258,6 +259,7 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)

From 419d94ec5e2cba2b1d9931aa24e942f7c314a40e Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 03:05:19 +0700
Subject: [PATCH 08/13] Add BufferDialog component to multiple Vue files

---
 src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue           | 2 ++
 src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue   | 2 ++
 src/components/Pages/Material/Daftar/Material_DGMYG.vue         | 2 ++
 src/components/Pages/Material/Rekap/Material_RPM.vue            | 2 ++
 .../Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue    | 2 ++
 .../Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue      | 2 ++
 .../Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue        | 2 ++
 .../Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue   | 2 ++
 .../Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue     | 2 ++
 .../Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue | 2 ++
 .../Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue | 2 ++
 .../Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue        | 2 ++
 .../Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue | 2 ++
 .../Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue     | 2 ++
 .../Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue   | 2 ++
 .../Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue     | 2 ++
 .../Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue   | 2 ++
 .../Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue   | 2 ++
 .../Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue      | 2 ++
 .../Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue   | 2 ++
 .../Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue    | 2 ++
 .../Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue    | 2 ++
 .../Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue     | 2 ++
 .../Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue    | 2 ++
 src/components/Pages/Transaksi/Transaksi.vue                    | 2 ++
 25 files changed, 50 insertions(+)

diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 15a7393..c2c9ad9 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -163,6 +163,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -191,6 +192,7 @@ import gql from 'graphql-tag'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 312937a..36e6667 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -196,6 +196,7 @@
       </DxColumn>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -222,6 +223,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index a81876d..29fabea 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -134,6 +134,7 @@
       </DxColumn>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -153,6 +154,7 @@ import { Type14 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index ef08f98..d46ae7e 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -94,6 +94,7 @@
       </DxColumn>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -113,6 +114,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 14d9e18..16c4577 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -271,6 +271,7 @@
       </DxSummary>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -303,6 +304,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 816c77d..4f463e2 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -140,6 +140,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -169,6 +170,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index c59cc83..817db59 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -366,6 +366,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -397,6 +398,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 228df70..174d247 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -272,6 +272,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -304,6 +305,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 6de86b8..20c5aca 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -273,6 +273,7 @@
       </DxSummary>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -305,6 +306,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 262eb49..bb91242 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -278,6 +278,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -310,6 +311,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index fb6f97b..98aae4a 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -278,6 +278,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -310,6 +311,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 14b6d68..4437c9d 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -126,6 +126,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -155,6 +156,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index e09a375..7e1f422 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -368,6 +368,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -399,6 +400,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index dd93cb7..ed7f990 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -268,6 +268,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -300,6 +301,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index 5deeccf..312e84d 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -201,6 +201,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -231,6 +232,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 40bb560..9004df6 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -273,6 +273,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -305,6 +306,7 @@ import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 5c39e42..0e9b205 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -278,6 +278,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -310,6 +311,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index f416151..7806a2c 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -278,6 +278,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -308,6 +309,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index fbd9042..d2e6717 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -256,6 +256,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -288,6 +289,7 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { getMonthName } from '@/utils/texts'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index ddbeb73..5e33f66 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -268,6 +268,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -300,6 +301,7 @@ import { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index ce0c607..c62b68e 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -340,6 +340,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -370,6 +371,7 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { getMonthName, getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index c7a58ef..73e0f43 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -256,6 +256,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -288,6 +289,7 @@ import { getMonthName } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index c331ca2..aa232a4 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -268,6 +268,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -300,6 +301,7 @@ import { getMonthNameShort } from '@/utils/texts'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index a97660a..9a641ee 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -715,6 +715,7 @@
       </template>
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -747,6 +748,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index ec01250..bf556b9 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -127,6 +127,7 @@
       />
     </DxDataGrid>
   </div>
+  <BufferDialog v-if="loading" />
 </template>
 
 <script setup lang="ts">
@@ -149,6 +150,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)

From f8aa3844065819f9c7de6a597978db5478f09219 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 03:12:15 +0700
Subject: [PATCH 09/13] Add dialogDetail.value assignment in getDetail function

---
 src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue     | 1 +
 src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue     | 1 +
 src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue      | 1 +
 src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue              | 1 +
 src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue    | 1 +
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue  | 1 +
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue  | 1 +
 .../Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue          | 1 +
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue       | 1 +
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue          | 1 +
 10 files changed, 10 insertions(+)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index bfc1f49..9e49b7a 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -566,6 +566,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
       emit('update:loadingSubData', loadingSubData.value)
     })
 }
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 3ec0358..d12abba 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -1160,6 +1160,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 6abc2ef..fda9bb7 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -864,6 +864,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 145c573..5dfc3ee 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -977,6 +977,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index b6d6116..94ec615 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -599,6 +599,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 9bdbb79..7e0e3f5 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -927,6 +927,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 1fbe345..c81816a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -1064,6 +1064,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index d4ce6d4..fb87e02 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -929,6 +929,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index bed9f62..7c3190e 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -927,6 +927,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 793c7a6..0792233 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -1059,6 +1059,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 

From 6b1b0981e2cab5f60035329167c3c5b5b5bf5a69 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 03:15:02 +0700
Subject: [PATCH 10/13] Remove unnecessary dialogDetail assignments

---
 src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   | 1 -
 src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue   | 1 -
 src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    | 1 -
 src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue          | 3 +--
 .../Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue           | 3 +--
 src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue         | 3 +--
 .../Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue         | 3 +--
 src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue          | 3 +--
 src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue     | 3 +--
 src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue      | 3 +--
 src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue   | 3 +--
 .../Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue          | 3 +--
 .../Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue           | 3 +--
 src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue            | 1 -
 src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  | 1 -
 .../Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue           | 1 -
 .../Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue           | 1 -
 .../Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue        | 1 -
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue     | 1 -
 src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue        | 1 -
 20 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 9e49b7a..0e92fda 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -582,7 +582,6 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index d12abba..b6691fc 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -1178,7 +1178,6 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index fda9bb7..5e745bb 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -911,7 +911,6 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index a097516..8464941 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -1341,8 +1341,7 @@ const showDetail = () => {
   if (agreeToShowDialog.value) {
     dataSub.value = []
     dataSubSelected.value = null
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 06f2291..31e9103 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -578,8 +578,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (date.value != '') {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 7936e61..d6a5e89 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -560,8 +560,7 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 92301ac..3b5a369 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -973,8 +973,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 094c943..7ac833b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1237,8 +1237,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index eceeb5f..d234887 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -995,8 +995,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index b09f520..35ea470 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -1006,8 +1006,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 4107cac..0fcb46c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -757,8 +757,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index f36c5de..8536838 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -758,8 +758,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 const closeDialog = () => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 72a6f2d..4da8067 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -752,8 +752,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    // dialogDetail.value = true
-    getDetail()
+    //     getDetail()
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 5dfc3ee..a80a5a6 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -994,7 +994,6 @@ const showDetail = () => {
   if (agreeToShowDialog.value) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 94ec615..dde253d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -612,7 +612,6 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (date.value != '') {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 7e0e3f5..4f2bf60 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -940,7 +940,6 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index c81816a..57be335 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -1077,7 +1077,6 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index fb87e02..cccabe0 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -942,7 +942,6 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 7c3190e..f86ed7b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -940,7 +940,6 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 0792233..0b0b762 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -1072,7 +1072,6 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    dialogDetail.value = true
     getDetail()
   }
 }

From bf2425a5f12e5c8988fad9638797601aa971a63c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 03:26:36 +0700
Subject: [PATCH 11/13] Fix showDetail function in multiple components

---
 src/components/Pages/Cico/LaporanCICO.vue                       | 2 +-
 .../Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue          | 2 +-
 src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue           | 2 +-
 src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue      | 2 +-
 src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue       | 2 +-
 src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue    | 2 +-
 .../Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue           | 2 +-
 src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue | 2 +-
 src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue          | 2 +-
 src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue   | 2 +-
 .../Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue       | 2 +-
 .../Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue    | 2 +-
 .../Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue | 2 +-
 .../Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue      | 2 +-
 .../Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue        | 2 +-
 .../Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue   | 2 +-
 .../Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue     | 2 +-
 .../Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue | 2 +-
 .../Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue | 2 +-
 .../Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue        | 2 +-
 .../Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue | 2 +-
 .../Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue     | 2 +-
 .../Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue   | 2 +-
 .../Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue     | 2 +-
 .../Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue   | 2 +-
 .../Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue   | 2 +-
 .../Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue      | 2 +-
 .../Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue      | 2 +-
 .../Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue      | 2 +-
 .../Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue    | 2 +-
 .../Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue    | 2 +-
 .../Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue     | 2 +-
 .../Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue    | 2 +-
 33 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 1b792f9..20b14e1 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -949,6 +949,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -961,7 +962,6 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 3b5a369..f940f20 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -973,7 +973,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 7ac833b..a0b5d43 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1237,7 +1237,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (monthSelected.value != null) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index d234887..5ced8c0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -995,7 +995,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 35ea470..641800c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -1006,7 +1006,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 0fcb46c..f262a4b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -757,7 +757,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 8536838..f1243e9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -758,7 +758,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    //     getDetail()
+    getDetail()
   }
 }
 const closeDialog = () => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 4da8067..aec83cb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -752,7 +752,7 @@ const showDetail = () => {
   dataSub.value = []
   dataSubSelected.value = null
   if (agreeToShowDialog.value) {
-    //     getDetail()
+    getDetail()
   }
 }
 
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index a4c5c3c..1c13757 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -510,6 +510,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -521,7 +522,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   if (detailType.value == 'table') {
     getDetail()
   }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 36e6667..7b6c41c 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -309,6 +309,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -320,7 +321,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 4de2852..b595289 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -867,6 +867,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -878,7 +879,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 16c4577..25df44a 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -427,6 +427,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -438,7 +439,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index cd7587c..a6710cd 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -672,6 +672,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -683,7 +684,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 4f463e2..445cd68 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -282,6 +282,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -293,7 +294,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index 817db59..b1df976 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -511,6 +511,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -522,7 +523,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 174d247..5ef7a7f 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -428,6 +428,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -439,7 +440,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 20c5aca..4cc73ea 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -433,6 +433,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -444,7 +445,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index bb91242..db4ebd8 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -433,6 +433,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -444,7 +445,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 98aae4a..1f156f8 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -433,6 +433,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -444,7 +445,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 4437c9d..7d53ae9 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -236,6 +236,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -247,7 +248,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index 7e1f422..0826aca 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -478,6 +478,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -489,7 +490,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index ed7f990..3beefed 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -424,6 +424,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -435,7 +436,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index 312e84d..ab7be30 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -311,6 +311,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -322,7 +323,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 9004df6..b89aeb0 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -389,6 +389,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -400,7 +401,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 0e9b205..4ed9b2d 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -434,6 +434,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -445,7 +446,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index 7806a2c..cbeb65d 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -431,6 +431,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -442,7 +443,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 0afc52f..ecc9715 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -757,6 +757,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -768,7 +769,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index d2e6717..891a8c0 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -368,6 +368,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -379,7 +380,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 381fbfb..0ef70c8 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -1082,6 +1082,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -1093,7 +1094,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index c62b68e..6d1ab20 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -446,6 +446,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -457,7 +458,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 73e0f43..35b8e95 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -368,6 +368,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -379,7 +380,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index aa232a4..3f34738 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -380,6 +380,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -391,7 +392,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 9a641ee..ff80372 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -827,6 +827,7 @@ const getDetail = async () => {
     })
     .finally(() => {
       loadingSubData.value = false
+      dialogDetail.value = true
     })
 }
 
@@ -838,7 +839,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 

From 0da20c2e95101606824577c35c260a8eaa39f4bb Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 04:23:26 +0700
Subject: [PATCH 12/13] Refactor DatePicker.vue component

---
 src/components/DatePicker.vue | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index a906023..1821a2f 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -3,7 +3,9 @@ import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
 import VueTailwindDatepicker from 'vue-tailwind-datepicker'
 
-const dateValue = ref('')
+const dateValue = ref(
+  `${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()} s/d ${new Date().getDay().toString().length == 1 ? `0${new Date().getDay()}` : new Date().getDay()}-${new Date().getMonth().toString().length == 1 ? `0${new Date().getMonth()}` : new Date().getMonth()}-${new Date().getFullYear()}`
+)
 const formatter = ref({
   date: 'DD-MM-YYYY',
   month: 'MMMM'
@@ -36,12 +38,22 @@ watch(dateValue, (newValue) => {
 
 <template>
   <div class="flex">
-    <vue-tailwind-datepicker v-model="dateValue" :formatter="formatter" separator=" s/d " :shortcuts="customShortcuts"
-      :auto-apply="true" as-single use-range v-slot="{ value, placeholder }">
+    <vue-tailwind-datepicker
+      v-model="dateValue"
+      :formatter="formatter"
+      separator=" s/d "
+      :shortcuts="customShortcuts"
+      :auto-apply="true"
+      as-single
+      use-range
+      v-slot="{ value, placeholder }"
+    >
       <div class="flex">
         <div class="flex-1">
-          <button type="button"
-            class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0">
+          <button
+            type="button"
+            class="flex items-center justify-between w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
+          >
             <span class="text-gray-900">
               {{ value || placeholder }}
             </span>

From 96f0593a74601a1a49358bc32f9ad93915f6ec3e Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 2 Apr 2024 09:56:17 +0700
Subject: [PATCH 13/13] Remove DxLoadPanel component from multiple files

---
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   | 10 +---------
 .../Anomali/Gangguan/Anomali_LAPPGU_LPT.vue   | 20 ++-----------------
 .../Anomali/Keluhan/Anomali_LAPPKU_LPP.vue    | 10 +---------
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    | 19 ++----------------
 src/components/Pages/Cico/LaporanCICO.vue     | 20 ++-----------------
 .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue    | 10 +---------
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 10 +---------
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    | 20 ++-----------------
 .../Gangguan/Rekap/RGangguan_AlihPosko.vue    | 20 ++-----------------
 .../Rekap/RGangguan_BerdasarMedia.vue         | 20 ++-----------------
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   | 20 ++-----------------
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue | 20 ++-----------------
 .../Rekap/RGangguan_JenisGangguan.vue         | 10 +---------
 .../Rekap/RGangguan_JenisGangguanSE.vue       | 20 ++-----------------
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 20 ++-----------------
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     | 20 ++-----------------
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      | 20 ++-----------------
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   | 20 ++-----------------
 .../Rekap/RGangguan_RatingPerPosko.vue        | 20 ++-----------------
 .../Rekap/RGangguan_RatingPerRegu.vue         | 20 ++-----------------
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue | 10 ----------
 .../Pages/Keluhan/Daftar/DKeluhan_DKUL.vue    |  9 ---------
 .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue   | 20 ++-----------------
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue  | 10 ----------
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  | 10 ----------
 .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue   | 10 ----------
 .../Keluhan/Daftar/DKeluhan_SelesaiCC.vue     | 10 ----------
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      | 20 ++-----------------
 .../Keluhan/Rekap/RKeluhan_BerdasarMedia.vue  | 20 ++-----------------
 .../Rekap/RKeluhan_PerFungsiBidang.vue        | 20 ++-----------------
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        | 20 ++-----------------
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     | 20 ++-----------------
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     | 20 ++-----------------
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  | 20 ++-----------------
 .../Keluhan/Rekap/RKeluhan_RatingPerUnit.vue  | 10 +---------
 .../Pages/Material/Daftar/Material_DGMYG.vue  | 10 ----------
 .../Pages/Material/Rekap/Material_RPM.vue     | 10 ----------
 .../MonalisaGR_DispatchingTimeGangguan.vue    | 20 ++-----------------
 .../Gangguan/Rekap/MonalisaGR_ENSGangguan.vue | 10 +---------
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue | 20 ++-----------------
 .../MonalisaGR_GangguanPerJenisGangguan.vue   | 10 +---------
 .../MonalisaGR_JumlahDDRPTRCTGangguan.vue     | 10 +---------
 .../Rekap/MonalisaGR_JumlahKaliGangguan.vue   | 10 +---------
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  | 10 +---------
 .../Rekap/MonalisaGR_RecoveryTimeGangguan.vue | 10 +---------
 .../Rekap/MonalisaGR_ResponseTimeGangguan.vue | 10 +---------
 .../MonalisaKR_GangguanPerJenisKeluhan.vue    | 10 +---------
 .../MonalisaKR_JumlahDDRPTRCTKeluhan.vue      | 10 +---------
 .../Rekap/MonalisaKR_JumlahKaliKeluhan.vue    | 10 +---------
 .../Rekap/MonalisaKR_KeluhanBelumSelesai.vue  | 10 +---------
 .../Rekap/MonalisaKR_LaporUlangKeluhan.vue    | 10 +---------
 .../Rekap/MonalisaKR_RecoveryTimeKeluhan.vue  | 10 +---------
 .../Rekap/MonalisaKR_ResponseTimeKeluhan.vue  | 10 +---------
 .../Bulanan/MonalisaLB_AgingComplaint.vue     | 20 ++-----------------
 .../Bulanan/MonalisaLB_EnergyNotSales.vue     | 10 +---------
 .../Bulanan/MonalisaLB_KADDalamPelaporan.vue  | 10 +---------
 .../MonalisaLB_PenurunanJumlahKomplain.vue    | 20 ++-----------------
 .../Kumulatif/MonalisaLK_AgingComplaint.vue   | 10 +---------
 .../Kumulatif/MonalisaLK_EnergyNotSales.vue   | 10 +---------
 .../Kumulatif/MonalisaLK_KDADPelaporan.vue    | 10 +---------
 .../MonalisaLK_PenurunanJumlahKomplain.vue    | 10 +---------
 .../Pages/PencarianData/PencarianData.vue     | 10 +---------
 src/components/Pages/Transaksi/Transaksi.vue  | 11 +---------
 63 files changed, 82 insertions(+), 817 deletions(-)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 0e92fda..2afd8e2 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -23,15 +23,7 @@
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel
-      shading-color="rgba(0,0,0,0.4)"
-      :position="position"
-      :show-indicator="showIndicator"
-      :show-pane="showPane"
-      :shading="shading"
-      v-model:visible="loadingData"
-      :enabled="true"
-    />
+
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
     <DxExport
       :enabled="true"
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index b6691fc..c564b2c 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -23,15 +23,7 @@
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel
-      shading-color="rgba(0,0,0,0.4)"
-      :position="position"
-      :show-indicator="showIndicator"
-      :show-pane="showPane"
-      :shading="shading"
-      v-model:visible="loading"
-      :enabled="true"
-    />
+
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
     <DxExport
       :enabled="true"
@@ -558,15 +550,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
index dff4918..929370c 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
@@ -22,15 +22,7 @@
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel
-      shading-color="rgba(0,0,0,0.4)"
-      :position="position"
-      :show-indicator="showIndicator"
-      :show-pane="showPane"
-      :shading="shading"
-      v-model:visible="loading"
-      :enabled="true"
-    />
+
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
     <DxExport
       :enabled="true"
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 5e745bb..deeac95 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -23,14 +23,7 @@
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-    <DxLoadPanel
-      shading-color="rgba(0,0,0,0.4)"
-      :position="position"
-      :show-indicator="showIndicator"
-      :show-pane="showPane"
-      v-model:visible="loadingData"
-      :enabled="true"
-    />
+
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
     <DxExport
       :enabled="true"
@@ -407,15 +400,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index 20b14e1..05a9f22 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -24,15 +24,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -215,15 +207,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index c2c9ad9..8e93a94 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -23,15 +23,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 2deceb0..0fc185e 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -323,15 +323,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 8464941..1df7965 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -28,15 +28,7 @@
     >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -593,15 +585,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index a97c844..3fa738e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -174,15 +166,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index 31e9103..5f911f9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -170,15 +162,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index d6a5e89..a42800c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -207,15 +199,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index e45682e..1e85f82 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -455,15 +447,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index b872828..1a2921f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index f940f20..5345672 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -33,15 +33,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -495,15 +487,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index a0b5d43..010b76a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -345,15 +337,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 5ced8c0..a4c4413 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -33,15 +33,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -582,15 +574,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 641800c..b15482e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -592,15 +584,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index f262a4b..cff22f2 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -340,15 +332,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index f1243e9..bb6f00a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -309,15 +301,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index aec83cb..0c86971 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -28,15 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <!-- <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      /> -->
+      <!--  -->
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
@@ -300,15 +292,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <!-- <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          /> -->
+          <!--  -->
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 0727515..9241ff6 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -31,16 +31,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index f93693e..4a71aac 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -31,15 +31,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 1c13757..ae03074 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -31,15 +31,7 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -332,15 +324,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index b27f784..1ed7a16 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -47,16 +47,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index c95e324..6c50125 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -47,16 +47,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 53365be..1a546e8 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -31,16 +31,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 0d00075..cbbf6e4 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -31,16 +31,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index a80a5a6..d0dbca1 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -28,15 +28,7 @@
       <DxPaging :enabled="false" />
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -433,15 +425,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index dde253d..f95fb11 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -154,15 +146,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 4f2bf60..c2eeab3 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -467,15 +459,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 57be335..16492a2 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -610,15 +602,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index cccabe0..a1fad5a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -479,15 +471,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index f86ed7b..09b1945 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -481,15 +473,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 0b0b762..ea90ff1 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -612,15 +604,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 7b6c41c..8725826 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -23,15 +23,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 29fabea..39042a3 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -28,16 +28,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index d46ae7e..56ecc2d 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -28,16 +28,6 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index b595289..6e6955d 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -312,15 +304,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 25df44a..49e996e 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index a6710cd..7cb5bc7 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -28,15 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -225,15 +217,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 445cd68..bf90517 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -28,15 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index b1df976..1c881b6 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -28,15 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 5ef7a7f..7ac0339 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible.sync="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 4cc73ea..c24dcd5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index db4ebd8..76ae1e0 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 1f156f8..f841121 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 7d53ae9..7832c5c 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -28,15 +28,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index 0826aca..d4275be 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index 3beefed..d6b1cd2 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index ab7be30..05fda30 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index b89aeb0..4b96dd2 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 4ed9b2d..0367891 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index cbeb65d..fade4e5 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index ecc9715..2ea55e2 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -368,15 +360,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index 891a8c0..dd7d21d 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index 5e33f66..2d3c898 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 0ef70c8..f3490d7 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
@@ -692,15 +684,7 @@
             :show-info="true"
             :show-navigation-buttons="true"
           />
-          <DxLoadPanel
-            shading-color="rgba(0,0,0,0.4)"
-            :position="position"
-            :show-indicator="showIndicator"
-            :show-pane="showPane"
-            :shading="shading"
-            v-model:visible="loadingSubData"
-            :enabled="true"
-          />
+
           <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
           <DxExport
             :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 6d1ab20..1ce6717 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 35b8e95..cfa4fb3 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index 3f34738..2805431 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -29,15 +29,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index ff80372..9a78c86 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -30,15 +30,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 0ed58ac..01ce8fe 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -29,15 +29,7 @@
         :show-info="true"
         :show-navigation-buttons="true"
       />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-model:visible="loadingData"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index bf556b9..5747583 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -23,16 +23,7 @@
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel
-        shading-color="rgba(0,0,0,0.4)"
-        :position="position"
-        :show-indicator="showIndicator"
-        :show-pane="showPane"
-        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
-        :enabled="true"
-      />
+
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
       <DxExport
         :enabled="true"