Refactor dialogDetail variable names in Vue components

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({