From b472cd29a752daef6026589d07c5eef4367a4596 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 20 Mar 2024 17:10:15 +0700
Subject: [PATCH] Refactor dialogDetail variable names in Vue components

---
 .../Anomali/Gangguan/Anomali_LAPPGP_LPP.vue   |  18 +-
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   |  18 +-
 .../Anomali/Gangguan/Anomali_LAPPGU_LPP.vue   |  18 +-
 .../Anomali/Gangguan/Anomali_LAPPGU_LPT.vue   |  14 +-
 .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue    |   6 +-
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    | 134 ++++++++++++++-
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  |  17 +-
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      | 160 ++++++++++++++++--
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue |  18 +-
 .../Daftar/DGangguan_RecoveryTime.vue         |  14 +-
 .../Daftar/DGangguan_ResponseTime.vue         |  14 +-
 .../Pages/Gangguan/Daftar/DGangguan_STIDP.vue | 160 ++++++++++++++++--
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    |   4 +-
 .../Rekap/RGangguan_RatingPerPosko.vue        |   4 +-
 .../Rekap/RGangguan_RatingPerRegu.vue         |   4 +-
 .../Keluhan/Daftar/DKeluhan_BerdasarMedia.vue |  16 +-
 .../Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue   |  20 +--
 .../Keluhan/Daftar/DKeluhan_RecoveryTime.vue  |  16 +-
 .../Keluhan/Daftar/DKeluhan_ResponseTime.vue  |  20 +--
 .../Pages/Keluhan/Daftar/DKeluhan_STIDP.vue   |  16 +-
 .../Gangguan/Rekap/MonalisaGR_ENSGangguan.vue |   2 +-
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue |   8 +-
 .../MonalisaGR_GangguanPerJenisGangguan.vue   |   2 +-
 .../MonalisaGR_JumlahDDRPTRCTGangguan.vue     |   2 +-
 .../Gangguan/Rekap/MonalisaGR_LaporUlang.vue  |   2 +-
 .../Pages/PencarianData/PencarianData.vue     |  18 +-
 src/components/Pages/Transaksi/Transaksi.vue  |   2 +-
 27 files changed, 547 insertions(+), 180 deletions(-)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 581f551..f58b679 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -140,7 +140,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -152,18 +152,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showData()">
+      <p class="text-left cursor-pointer" @click="showDetail()">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }" @click="showDetail()">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -197,12 +197,12 @@ const data = computed(() => props.data)
 const dataSub = ref([])
 const dataSelected = ref({})
 const dataSubSelected = ref({})
-const showDetail = ref(false)
-const showData = () => {
-  showDetail.value = true
+const dialogDetail = ref(false)
+const showDetail = () => {
+  dialogDetail.value = true
 }
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 233ba4c..f8b254e 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -214,7 +214,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -226,18 +226,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showData()">
+      <p class="text-left cursor-pointer" @click="showDetail()">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }" @click="showDetail()">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -391,12 +391,12 @@ const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
-const showDetail = ref(false)
-const showData = () => {
-  showDetail.value = true
+const dialogDetail = ref(false)
+const showDetail = () => {
+  dialogDetail.value = true
 }
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 const loading = ref(computed(() => props.loading))
 
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
index e00bf83..e1f7951 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -78,7 +78,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -90,18 +90,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showData()">
+      <p class="text-left cursor-pointer" @click="showDetail()">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }" @click="showDetail()">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -135,12 +135,12 @@ const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
-const showDetail = ref(false)
-const showData = () => {
-  showDetail.value = true
+const dialogDetail = ref(false)
+const showDetail = () => {
+  dialogDetail.value = true
 }
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 6946898..578edcd 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -262,7 +262,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -274,18 +274,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer" @click="showDetail()">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showData()">
+      <p class="text-left cursor-pointer" @click="showDetail()">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }" @click="showDetail()">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -472,9 +472,9 @@ const data = computed(() => props.data)
 const dataSelected = ref()
 const dataSub = ref([])
 const dataSubSelected = ref()
-const showDetail = ref(false)
-const showData = () => (showDetail.value = true)
-const closeDetail = () => (showDetail.value = false)
+const dialogDetail = ref(false)
+const showDetail = () => (dialogDetail.value = true)
+const closeDialog = () => (dialogDetail.value = false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 226aca8..6d978e9 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -164,7 +164,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
 const data = ref<any[]>([])
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -268,8 +268,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
   console.log(data)
 }
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index bbac127..bb25347 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -13,7 +13,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -167,28 +167,133 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Gangguan Berdasarkan Media"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">TGL Media:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.waktu_media"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.keterangan_media"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -217,6 +322,17 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const dataDetail = ref<any>({})
+const dialogDetail = ref(false)
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
   dateFrom: new Date().toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index ccc9154..1a7f496 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -202,19 +202,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -222,9 +222,9 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Daftar Gangguan Dialihkan ke Posko Lain"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
   >
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
@@ -377,7 +377,6 @@ import {
   VerticalAlign,
   TextRun,
   WidthType,
-  TableBorders,
   PageOrientation
 } from 'docx'
 
@@ -387,8 +386,8 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
-const showDetail = ref(false)
-const closeDetail = () => (showDetail.value = false)
+const dialogDetail = ref(false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const setHeaderStyle = (
   worksheet: any,
@@ -451,7 +450,7 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data
 }
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
 const filters = ref()
 const reportMeta = ref({
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index eb3e61b..f5a0deb 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -13,7 +13,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -60,7 +60,7 @@
         alignment="center"
         data-field="no_laporan"
         caption="No Laporan"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -68,7 +68,7 @@
         alignment="center"
         data-field="waktu_lapor"
         caption="Tgl Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -76,7 +76,7 @@
         alignment="center"
         data-field="waktu_response"
         caption="Tgl Response"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -84,7 +84,7 @@
         alignment="center"
         data-field="waktu_recovery"
         caption="Tgl Recovery"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -108,7 +108,7 @@
         alignment="center"
         data-field="status_akhir"
         caption="Status"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -116,7 +116,7 @@
         alignment="center"
         data-field="idpel_nometer"
         caption="IDPEL/NO METER"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -140,7 +140,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -156,7 +156,7 @@
         alignment="center"
         data-field="media"
         caption="Sumber Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -167,28 +167,143 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Gangguan Diselesaikan Mobile APKT"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama ULP:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.penyebab"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.tindakan"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+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 { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -217,6 +332,17 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const dataDetail = ref<any>({})
+const dialogDetail = ref(false)
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.daftar.diselesaikanMobileAPKT,
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index e8d3931..a56aa57 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -174,25 +174,25 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -200,9 +200,9 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
   >
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
@@ -337,7 +337,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>({})
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -353,9 +353,9 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
   dataDetail.value = data
 }
 
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
-const closeDetail = () => (showDetail.value = false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.daftar.melaporLebihDariSatuKali,
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 87d6757..40d331d 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -192,26 +192,26 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -359,16 +359,16 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>({})
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data
 }
 
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
-const closeDetail = () => (showDetail.value = false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 2816f5c..638bfb6 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -169,26 +169,26 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Daftar Gangguan Response Time" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -336,16 +336,16 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>({})
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data
 }
 
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
-const closeDetail = () => (showDetail.value = false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 15ee9fc..9aeced9 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -13,7 +13,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -60,7 +60,7 @@
         alignment="center"
         data-field="no_laporan"
         caption="No Laporan"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -68,7 +68,7 @@
         alignment="center"
         data-field="waktu_lapor"
         caption="Tgl Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -76,7 +76,7 @@
         alignment="center"
         data-field="waktu_response"
         caption="Tgl Response"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -84,7 +84,7 @@
         alignment="center"
         data-field="waktu_recovery"
         caption="Tgl Recovery"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -108,7 +108,7 @@
         alignment="center"
         data-field="status_akhir"
         caption="Status"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -116,7 +116,7 @@
         alignment="center"
         data-field="idpel_nometer"
         caption="IDPEL/NO METER"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -140,7 +140,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -156,7 +156,7 @@
         alignment="center"
         data-field="media"
         caption="Sumber Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -167,28 +167,143 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Gangguan Diselesaikan Tanpa ID Pelanggan"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="dataDetail.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Response:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Recovery:</h3>
+        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataDetail?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
+        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
+        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Unit Layanan Pelanggan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.nama_posko"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.penyebab"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataDetail?.tindakan"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+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 { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -217,6 +332,17 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const dataDetail = ref<any>({})
+const dialogDetail = ref(false)
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataDetail.value = data
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.daftar.selesaiTanpaIDPelanggan,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index ff82d57..dfd70e2 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -306,7 +306,7 @@
   <DetailDialog
     :open="dialogDetail"
     title="Detail Rekapitulasi Koreksi Transaksi Individual"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -1058,7 +1058,7 @@ const showDetail = () => {
   }
 }
 
-const closeDetail = () => {
+const closeDialog = () => {
   dialogDetail.value = false
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index c3d77e3..4f56a47 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -235,7 +235,7 @@
   <DetailDialog
     :open="dialogDetail"
     title="Detail Rating Per Posko"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -697,7 +697,7 @@ const showDetail = () => {
     getDetail()
   }
 }
-const closeDetail = () => {
+const closeDialog = () => {
   dialogDetail.value = false
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index ce8fc3d..f639e7b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -226,7 +226,7 @@
   <DetailDialog
     :open="dialogDetail"
     title="Detail Rating Per Regu"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -688,7 +688,7 @@ const showDetail = () => {
   }
 }
 
-const closeDetail = () => {
+const closeDialog = () => {
   dialogDetail.value = false
 }
 
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index fbc52fc..45d3f9b 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -172,20 +172,20 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -323,14 +323,14 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index e931810..5acb694 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -178,19 +178,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -202,14 +202,14 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -348,14 +348,14 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index e00d066..1aaefe4 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -179,20 +179,20 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -325,14 +325,14 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 45f1e52..cb75a8f 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -179,19 +179,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -203,14 +203,14 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -344,14 +344,14 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 5ea8d64..fd444ba 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -170,20 +170,20 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -316,14 +316,14 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ 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 7618ea8..29697b5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -221,7 +221,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 18d5a27..3c8e78b 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -131,7 +131,7 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Detail Gangguan Belum Selesai"
     @on-close="closeDialog"
     :full-width="true"
@@ -470,15 +470,15 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const loadingSubData = ref(false)
 
 const showDialog = () => {
-  showDetail.value = true
+  dialogDetail.value = true
 }
 
 const closeDialog = () => {
-  showDetail.value = false
+  dialogDetail.value = false
 }
 
 const { onResult, onError, loading, refetch } = useQuery(
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 8420ad6..3583ab5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -176,7 +176,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index 032dcf0..61d0be9 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -384,7 +384,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
   {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 1cbb2e9..47485cb 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -288,7 +288,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.laporUlangGangguan,
   {
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index c95f9f3..f239dd5 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -152,13 +152,13 @@
       />
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -170,14 +170,14 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showData()">
+        <p class="cursor-pointer !text-left" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Pencarian Report Number" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Daftar Pencarian Report Number" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -258,7 +258,7 @@ const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const filters = ref({
   type: '',
   keyword: '',
@@ -266,12 +266,12 @@ const filters = ref({
   periode: ''
 })
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+const showDetail = () => {
+  dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index 85f03e8..7faa6da 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -153,7 +153,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const loading = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {