Refactor data grid components

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
@@ -140,7 +141,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -152,18 +153,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showDetail()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showDetail()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -198,7 +199,13 @@ const dataSub = ref([])
 const dataSelected = ref({})
 const dataSubSelected = ref({})
 const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 const closeDialog = () => {
@@ -235,7 +242,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataSelected = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(data)
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -214,7 +215,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -226,18 +227,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showDetail()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showDetail()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -392,7 +393,13 @@ const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
 const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 const closeDialog = () => {
@@ -429,10 +436,10 @@ const onExporting = (e: any) => {
   }
 }
 
-const currentDataSelected = ref<any>(null)
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
@@ -78,7 +79,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -90,18 +91,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showDetail()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showDetail()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -136,7 +137,13 @@ const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
 const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 const closeDialog = () => {
@@ -173,7 +180,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataSelected = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(data)
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>

src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
@@ -262,7 +263,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -274,18 +275,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showDetail()">
+      <p class="text-right cursor-pointer">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="showDetail()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showDetail()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -505,7 +506,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataSelected = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(data)
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -141,8 +142,13 @@ const onExporting = (e: any) => {
   }
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 </script>

src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue

@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"

src/components/Pages/Cico/LaporanCICO.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -112,13 +113,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -190,6 +191,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -873,14 +875,18 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
-const currentDataSelected = ref<any>(null)
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const onExporting = (e: any) => {
@@ -913,13 +919,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   dataSubSelected.value = data
   console.log(data)
 }

src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -162,7 +163,7 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const data = ref<any[]>([])
 const dialogDetail = ref(false)
 
@@ -264,11 +265,18 @@ const { onResult, onError, loading, refetch } = useQuery(GET_laporanCttKwhPeriks
 })
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
+}
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
 }
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 const filters = ref()

src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -168,13 +169,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -189,22 +190,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -212,8 +213,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -226,8 +227,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -235,37 +236,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -273,7 +274,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.waktu_media"
+          :value="dataSelected?.waktu_media"
           class-name="flex-1"
         />
       </div>
@@ -283,7 +284,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_media"
+          :value="dataSelected?.keterangan_media"
           class-name="flex-1"
         />
       </div>
@@ -318,12 +319,19 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const showDetail = () => (dialogDetail.value = true)

src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue

@@ -5,6 +5,7 @@
 
   <div id="dataTable">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :remote-operations="true"
@@ -202,19 +203,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -229,32 +230,32 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.pembuat_laporan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.pembuat_laporan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Dialihkan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_dialihkan" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_dialihkan" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Respon:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -262,8 +263,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -276,8 +277,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -285,27 +286,27 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Awal:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_posko_lama" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko Tujuan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_posko_baru" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_posko_baru" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Status:</h3>
-        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -313,29 +314,29 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.alamat_pelapor"
           class-name="flex-1"
         />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Pembuat Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Laporan:</h3>
-        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Posko:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_posko_lama" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_posko_lama" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -368,7 +369,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 const closeDialog = () => (dialogDetail.value = false)
 
@@ -411,11 +412,21 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0
   }
 )
-const onSelectionChanged = ({ selectedRowsData }: any) => {
+const dataGridRef = ref<DxDataGrid | null>(null)
-  const data = selectedRowsData[0]
+const clearSelection = () => {
-  dataDetail.value = data
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
+}
+const showDetail = () => {
+  dialogDetail.value = true
+  clearSelection()
 }
-const showDetail = () => (dialogDetail.value = true)
 
 const filters = ref()
 const reportMeta = ref({

src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -168,13 +169,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -189,22 +190,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -212,8 +213,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -226,8 +227,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -235,37 +236,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -273,7 +274,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -283,7 +284,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.penyebab"
+          :value="dataSelected?.penyebab"
           class-name="flex-1"
         />
       </div>
@@ -293,7 +294,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.tindakan"
+          :value="dataSelected?.tindakan"
           class-name="flex-1"
         />
       </div>
@@ -328,12 +329,19 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const showDetail = () => (dialogDetail.value = true)

src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -174,25 +175,25 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ isNumber(data.text) ? formatNumber(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -207,27 +208,27 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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">Jml Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -235,8 +236,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -249,8 +250,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -258,37 +259,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -296,7 +297,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -332,7 +333,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 const filters = ref()
 const reportMeta = ref({
@@ -343,10 +344,17 @@ const reportMeta = ref({
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const showDetail = () => (dialogDetail.value = true)

src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue

@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -192,19 +193,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -215,22 +216,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -238,8 +239,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -252,8 +253,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -261,37 +262,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -299,7 +300,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -309,7 +310,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.penyebab"
+          :value="dataSelected?.penyebab"
           class-name="flex-1"
         />
       </div>
@@ -319,7 +320,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.tindakan"
+          :value="dataSelected?.tindakan"
           class-name="flex-1"
         />
       </div>
@@ -358,12 +359,19 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const showDetail = () => (dialogDetail.value = true)

src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -169,19 +170,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -192,22 +193,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -215,8 +216,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -229,8 +230,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -238,37 +239,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -276,7 +277,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -286,7 +287,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.penyebab"
+          :value="dataSelected?.penyebab"
           class-name="flex-1"
         />
       </div>
@@ -296,7 +297,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.tindakan"
+          :value="dataSelected?.tindakan"
           class-name="flex-1"
         />
       </div>
@@ -335,12 +336,19 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const showDetail = () => (dialogDetail.value = true)

src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -168,13 +169,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -189,22 +190,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -212,8 +213,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -226,8 +227,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -235,37 +236,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -273,7 +274,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -283,7 +284,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.penyebab"
+          :value="dataSelected?.penyebab"
           class-name="flex-1"
         />
       </div>
@@ -293,7 +294,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.tindakan"
+          :value="dataSelected?.tindakan"
           class-name="flex-1"
         />
       </div>
@@ -328,12 +329,19 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const showDetail = () => (dialogDetail.value = true)

src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -321,13 +322,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -339,7 +340,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p @click="showDetail()">
+        <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -519,6 +520,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -1146,14 +1148,18 @@ const getDetail = async () => {
   //   loadingSubData.value = value
   // })
 }
-const currentDataSelected = ref<any>(null)
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const onExporting = (e: any) => {
@@ -1290,13 +1296,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  if (selectedRowsData[0] != dataSelected.value) {
+  if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-    currentDataSelected.value = selectedRowsData[0]
-    console.log('new data selected')
-
-    showDetail()
   }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -122,13 +123,13 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -150,6 +151,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -568,14 +570,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -612,13 +617,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 

src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue

@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -86,13 +87,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -143,6 +144,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -555,14 +557,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -599,13 +604,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 

src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -237,10 +238,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const data = ref<any[]>([])

src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -333,13 +334,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -351,13 +352,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -423,6 +424,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -830,14 +832,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -874,13 +879,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue

@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -497,10 +498,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filterData = (params: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue

@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -256,13 +257,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -274,7 +275,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -435,6 +436,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -895,7 +897,7 @@ const getDetail = () => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    idEquipment: ref.kode ? ref.kode : 0
+    idEquipment: ref?.kode ? ref.kode : 0
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
@@ -918,24 +920,30 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
 }
 
 const filters = ref()
@@ -943,379 +951,394 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
       {
-        id: '0',
+        id: 42,
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
-        sub_kelompok: 'Kabel',
-        kode: '11232',
-        total: 1754,
-        total_selesai: 1754,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 248343,
-        avg_durasi_response: 2.360302677532014,
-        min_durasi_response: 0,
-        max_durasi_response: 7020,
-        total_dibawah_sla_response: 1714,
-        total_diatas_sla_response: 4,
-        total_durasi_recovery: 7444445,
-        avg_durasi_recovery: 70.67217787913341,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 199591,
-        total_dibawah_sla_recovery: 1660,
-        total_diatas_sla_recovery: 94,
-        total_response: 1718,
-        total_recovery: 1754
-      },
-      {
-        id: '1',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
         sub_kelompok: 'MV Cell',
-        kode: '11511',
+        kode: '11111',
-        total: 56062,
+        equipment_id: '11111',
-        total_selesai: 56061,
+        total: 345,
-        persen_selesai: 99.99821626056865,
+        total_selesai: 345,
-        total_inproses: 1,
-        persen_inproses: 0.0017837394313438694,
-        total_durasi_response: 80699092,
-        avg_durasi_response: 23.504602211915806,
-        min_durasi_response: 24,
-        max_durasi_response: 2592137,
-        total_dibawah_sla_response: 52700,
-        total_diatas_sla_response: 3360,
-        total_durasi_recovery: 1398860783,
-        avg_durasi_recovery: 415.39603995718875,
-        min_durasi_recovery: 101,
-        max_durasi_recovery: 2713062,
-        total_dibawah_sla_recovery: 49187,
-        total_diatas_sla_recovery: 6873,
-        total_response: 56060,
-        total_recovery: 56060
-      },
-      {
-        id: '2',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'JTR',
-        kode: '13400',
-        total: 6022,
-        total_selesai: 6022,
         persen_selesai: 100,
         total_inproses: 0,
         persen_inproses: 0,
-        total_durasi_response: 8262056,
+        total_durasi_response: 82457,
-        avg_durasi_response: 22.382392026578074,
+        avg_durasi_response: 3.773913043478261,
-        min_durasi_response: -16519,
+        min_durasi_response: 0,
-        max_durasi_response: 76299,
+        max_durasi_response: 30960,
-        total_dibawah_sla_response: 5655,
+        total_dibawah_sla_response: 338,
-        total_diatas_sla_response: 365,
+        total_diatas_sla_response: 7,
-        total_durasi_recovery: 87345586,
+        total_durasi_recovery: 853232,
-        avg_durasi_recovery: 241.25440053138493,
+        avg_durasi_recovery: 41.00869565217391,
-        min_durasi_recovery: -16459,
+        min_durasi_recovery: 15,
-        max_durasi_recovery: 2499716,
+        max_durasi_recovery: 90060,
-        total_dibawah_sla_recovery: 4802,
+        total_dibawah_sla_recovery: 338,
-        total_diatas_sla_recovery: 1220,
+        total_diatas_sla_recovery: 7,
-        total_response: 6020,
+        total_response: 345,
-        total_recovery: 6022
+        total_recovery: 345
       },
       {
-        id: '3',
+        id: 40,
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
-        sub_kelompok: 'Jointing',
+        sub_kelompok: 'Kabel Outgoing s/d Pole Pertama',
-        kode: '11243',
+        kode: '11112',
-        total: 1,
+        equipment_id: '11112',
-        total_selesai: 1,
+        total: 47,
+        total_selesai: 47,
         persen_selesai: 100,
         total_inproses: 0,
         persen_inproses: 0,
-        total_durasi_response: 60,
+        total_durasi_response: 2138,
-        avg_durasi_response: 1,
+        avg_durasi_response: 0.7142857142857143,
-        min_durasi_response: 60,
+        min_durasi_response: 0,
-        max_durasi_response: 60,
+        max_durasi_response: 156,
-        total_dibawah_sla_response: 1,
+        total_dibawah_sla_response: 42,
         total_diatas_sla_response: 0,
-        total_durasi_recovery: 240,
+        total_durasi_recovery: 151494,
-        avg_durasi_recovery: 4,
+        avg_durasi_recovery: 53.46808510638298,
-        min_durasi_recovery: 240,
+        min_durasi_recovery: 62,
-        max_durasi_recovery: 240,
+        max_durasi_recovery: 28740,
-        total_dibawah_sla_recovery: 1,
+        total_dibawah_sla_recovery: 44,
-        total_diatas_sla_recovery: 0,
+        total_diatas_sla_recovery: 3,
-        total_response: 1,
+        total_response: 42,
-        total_recovery: 1
+        total_recovery: 47
       },
       {
-        id: '4',
+        id: 46,
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
-        sub_kelompok: null,
+        sub_kelompok: 'Kapasitor',
-        kode: '',
+        kode: '11113',
-        total: 7153680,
+        equipment_id: '11113',
-        total_selesai: 1144750,
-        persen_selesai: 16.00225338567003,
-        total_inproses: 6008930,
-        persen_inproses: 83.99774661432997,
-        total_durasi_response: 746069414,
-        avg_durasi_response: 29.719034788714257,
-        min_durasi_response: -16906,
-        max_durasi_response: 2563885,
-        total_dibawah_sla_response: 352502,
-        total_diatas_sla_response: 59097,
-        total_durasi_recovery: 1633920126,
-        avg_durasi_recovery: 65.89483875340065,
-        min_durasi_recovery: -86061,
-        max_durasi_recovery: 3373943,
-        total_dibawah_sla_recovery: 412256,
-        total_diatas_sla_recovery: 900,
-        total_response: 411599,
-        total_recovery: 413156
-      },
-      {
-        id: '5',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'AVR / Kapasitor',
-        kode: '11215',
         total: 20,
         total_selesai: 20,
         persen_selesai: 100,
         total_inproses: 0,
         persen_inproses: 0,
-        total_durasi_response: 2682,
+        total_durasi_response: 88566,
-        avg_durasi_response: 2.15,
+        avg_durasi_response: 73.75,
         min_durasi_response: 0,
-        max_durasi_response: 1477,
+        max_durasi_response: 41400,
-        total_dibawah_sla_response: 20,
+        total_dibawah_sla_response: 17,
-        total_diatas_sla_response: 0,
+        total_diatas_sla_response: 3,
-        total_durasi_recovery: 115132,
+        total_durasi_recovery: 156009,
-        avg_durasi_recovery: 95.85,
+        avg_durasi_recovery: 129.95,
-        min_durasi_recovery: 0,
+        min_durasi_recovery: 63,
-        max_durasi_recovery: 18660,
+        max_durasi_recovery: 41520,
         total_dibawah_sla_recovery: 15,
         total_diatas_sla_recovery: 5,
         total_response: 20,
         total_recovery: 20
       },
       {
-        id: '6',
+        id: 9,
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
-        sub_kelompok: 'Kelompok Terencana (Planned) ',
+        sub_kelompok: 'Relay Outgoing Feeder',
-        kode: '32000',
+        kode: '11114',
-        total: 1130,
+        equipment_id: '11114',
-        total_selesai: 1127,
+        total: 24,
-        persen_selesai: 99.73451327433628,
+        total_selesai: 24,
-        total_inproses: 3,
-        persen_inproses: 0.2654867256637168,
-        total_durasi_response: 6837343,
-        avg_durasi_response: 100.54432624113475,
-        min_durasi_response: -2607074,
-        max_durasi_response: 2553583,
-        total_dibawah_sla_response: 1070,
-        total_diatas_sla_response: 58,
-        total_durasi_recovery: 9901876,
-        avg_durasi_recovery: 145.95297249334516,
-        min_durasi_recovery: -2605454,
-        max_durasi_recovery: 2553643,
-        total_dibawah_sla_recovery: 1022,
-        total_diatas_sla_recovery: 105,
-        total_response: 1128,
-        total_recovery: 1127
-      },
-      {
-        id: '7',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Arrester',
-        kode: '11219',
-        total: 764,
-        total_selesai: 764,
         persen_selesai: 100,
         total_inproses: 0,
         persen_inproses: 0,
-        total_durasi_response: 103137,
+        total_durasi_response: 117230,
-        avg_durasi_response: 2.1612057667103537,
+        avg_durasi_response: 81.375,
         min_durasi_response: 0,
-        max_durasi_response: 14436,
+        max_durasi_response: 62100,
-        total_dibawah_sla_response: 755,
+        total_dibawah_sla_response: 20,
-        total_diatas_sla_response: 8,
+        total_diatas_sla_response: 4,
-        total_durasi_recovery: 2758840,
+        total_durasi_recovery: 135470,
-        avg_durasi_recovery: 59.97643979057592,
+        avg_durasi_recovery: 94.04166666666667,
         min_durasi_recovery: 0,
-        max_durasi_recovery: 62400,
+        max_durasi_recovery: 62340,
-        total_dibawah_sla_recovery: 711,
+        total_dibawah_sla_recovery: 22,
-        total_diatas_sla_recovery: 53,
-        total_response: 763,
-        total_recovery: 764
-      },
-      {
-        id: '8',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Trafo',
-        kode: '11322',
-        total: 322,
-        total_selesai: 322,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 238159,
-        avg_durasi_response: 14.425454545454546,
-        min_durasi_response: 0,
-        max_durasi_response: 40320,
-        total_dibawah_sla_response: 255,
-        total_diatas_sla_response: 20,
-        total_durasi_recovery: 2275182,
-        avg_durasi_recovery: 117.67391304347827,
-        min_durasi_recovery: 59,
-        max_durasi_recovery: 105660,
-        total_dibawah_sla_recovery: 264,
-        total_diatas_sla_recovery: 58,
-        total_response: 275,
-        total_recovery: 322
-      },
-      {
-        id: '9',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Kabel',
-        kode: '11242',
-        total: 2,
-        total_selesai: 2,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 377,
-        avg_durasi_response: 3,
-        min_durasi_response: 60,
-        max_durasi_response: 317,
-        total_dibawah_sla_response: 2,
-        total_diatas_sla_response: 0,
-        total_durasi_recovery: 9797,
-        avg_durasi_recovery: 81.5,
-        min_durasi_recovery: 1800,
-        max_durasi_recovery: 7997,
-        total_dibawah_sla_recovery: 2,
-        total_diatas_sla_recovery: 0,
-        total_response: 2,
-        total_recovery: 2
-      },
-      {
-        id: '10',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Kabel Opstyg / SKTR',
-        kode: '11411',
-        total: 91371,
-        total_selesai: 91371,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 117146730,
-        avg_durasi_response: 20.890635777395797,
-        min_durasi_response: 0,
-        max_durasi_response: 86580,
-        total_dibawah_sla_response: 85886,
-        total_diatas_sla_response: 5451,
-        total_durasi_recovery: 488901032,
-        avg_durasi_recovery: 88.69208711831017,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 4028013,
-        total_dibawah_sla_recovery: 88945,
-        total_diatas_sla_recovery: 2425,
-        total_response: 91337,
-        total_recovery: 91370
-      },
-      {
-        id: '11',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Gardu Distribusi',
-        kode: '13300',
-        total: 275,
-        total_selesai: 275,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 382161,
-        avg_durasi_response: 22.952727272727273,
-        min_durasi_response: -610712,
-        max_durasi_response: 638280,
-        total_dibawah_sla_response: 238,
-        total_diatas_sla_response: 37,
-        total_durasi_recovery: 14380135,
-        avg_durasi_recovery: 871.3163636363637,
-        min_durasi_recovery: -484681,
-        max_durasi_recovery: 7565219,
-        total_dibawah_sla_recovery: 195,
-        total_diatas_sla_recovery: 80,
-        total_response: 275,
-        total_recovery: 275
-      },
-      {
-        id: '12',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Konstruksi',
-        kode: '12101',
-        total: 13,
-        total_selesai: 13,
-        persen_selesai: 100,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 444894,
-        avg_durasi_response: 570,
-        min_durasi_response: -17483,
-        max_durasi_response: 435093,
-        total_dibawah_sla_response: 11,
-        total_diatas_sla_response: 2,
-        total_durasi_recovery: 520794,
-        avg_durasi_recovery: 667.3076923076923,
-        min_durasi_recovery: -13763,
-        max_durasi_recovery: 445113,
-        total_dibawah_sla_recovery: 11,
         total_diatas_sla_recovery: 2,
-        total_response: 13,
+        total_response: 24,
-        total_recovery: 13
+        total_recovery: 24
       },
       {
-        id: '13',
+        id: 20,
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
-        sub_kelompok: 'Operasi',
+        sub_kelompok: 'Konduktor',
-        kode: '12503',
+        kode: '11211',
-        total: 747,
+        equipment_id: '11211',
-        total_selesai: 747,
+        total: 158808,
+        total_selesai: 158808,
         persen_selesai: 100,
         total_inproses: 0,
         persen_inproses: 0,
-        total_durasi_response: 1354769,
+        total_durasi_response: 11431434,
-        avg_durasi_response: 29.809395973154363,
+        avg_durasi_response: 1.119197613777534,
-        min_durasi_response: -5325,
+        min_durasi_response: -3540,
-        max_durasi_response: 349500,
+        max_durasi_response: 86460,
-        total_dibawah_sla_response: 713,
+        total_dibawah_sla_response: 158156,
-        total_diatas_sla_response: 32,
+        total_diatas_sla_response: 421,
-        total_durasi_recovery: 4880492,
+        total_durasi_recovery: 292882474,
-        avg_durasi_recovery: 108.41097724230255,
+        avg_durasi_recovery: 30.54788714654575,
-        min_durasi_recovery: -5325,
+        min_durasi_recovery: -2339,
-        max_durasi_recovery: 494389,
+        max_durasi_recovery: 608400,
-        total_dibawah_sla_recovery: 692,
+        total_dibawah_sla_recovery: 155028,
-        total_diatas_sla_recovery: 55,
+        total_diatas_sla_recovery: 3762,
-        total_response: 745,
+        total_response: 158577,
-        total_recovery: 747
+        total_recovery: 158790
       },
       {
-        id: '14',
+        id: 37,
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Tiang',
+        kode: '11212',
+        equipment_id: '11212',
+        total: 918,
+        total_selesai: 918,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 88530,
+        avg_durasi_response: 1.5366120218579236,
+        min_durasi_response: 0,
+        max_durasi_response: 4020,
+        total_dibawah_sla_response: 912,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 5577516,
+        avg_durasi_recovery: 101.0958605664488,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 70860,
+        total_dibawah_sla_recovery: 783,
+        total_diatas_sla_recovery: 135,
+        total_response: 915,
+        total_recovery: 918
+      },
+      {
+        id: 35,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'DS / LBS',
+        kode: '11213',
+        equipment_id: '11213',
+        total: 2045,
+        total_selesai: 2045,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 236249,
+        avg_durasi_response: 1.8654598825831703,
+        min_durasi_response: -360,
+        max_durasi_response: 4440,
+        total_dibawah_sla_response: 2037,
+        total_diatas_sla_response: 7,
+        total_durasi_recovery: 4596907,
+        avg_durasi_recovery: 37.23471882640587,
+        min_durasi_recovery: -360,
+        max_durasi_recovery: 29160,
+        total_dibawah_sla_recovery: 2011,
+        total_diatas_sla_recovery: 34,
+        total_response: 2044,
+        total_recovery: 2045
+      },
+      {
+        id: 45,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Recloser / PMCB',
+        kode: '11214',
+        equipment_id: '11214',
+        total: 22204,
+        total_selesai: 22204,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1353096,
+        avg_durasi_response: 0.9791385059024962,
+        min_durasi_response: -2100,
+        max_durasi_response: 8640,
+        total_dibawah_sla_response: 22141,
+        total_diatas_sla_response: 53,
+        total_durasi_recovery: 24861109,
+        avg_durasi_recovery: 18.581929555895865,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 1905240,
+        total_dibawah_sla_recovery: 22069,
+        total_diatas_sla_recovery: 133,
+        total_response: 22194,
+        total_recovery: 22202
+      },
+      {
+        id: 13,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'AVR / Kapasitor',
+        kode: '11215',
+        equipment_id: '11215',
+        total: 18,
+        total_selesai: 18,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 2502,
+        avg_durasi_response: 2.2222222222222223,
+        min_durasi_response: 0,
+        max_durasi_response: 1477,
+        total_dibawah_sla_response: 18,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 91492,
+        avg_durasi_recovery: 84.61111111111111,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 18660,
+        total_dibawah_sla_recovery: 14,
+        total_diatas_sla_recovery: 4,
+        total_response: 18,
+        total_recovery: 18
+      },
+      {
+        id: 52,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'CT / PT kWh Meter Exim',
+        kode: '11216',
+        equipment_id: '11216',
+        total: 74,
+        total_selesai: 74,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 4681,
+        avg_durasi_response: 1.0405405405405406,
+        min_durasi_response: 0,
+        max_durasi_response: 660,
+        total_dibawah_sla_response: 74,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 193882,
+        avg_durasi_recovery: 43.472972972972975,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 13560,
+        total_dibawah_sla_recovery: 73,
+        total_diatas_sla_recovery: 1,
+        total_response: 74,
+        total_recovery: 74
+      },
+      {
+        id: 38,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
         sub_kelompok: 'CO Branch',
         kode: '11217',
-        total: 17364,
+        equipment_id: '11217',
-        total_selesai: 17364,
+        total: 15367,
+        total_selesai: 15367,
         persen_selesai: 100,
         total_inproses: 0,
         persen_inproses: 0,
-        total_durasi_response: 9434964,
+        total_durasi_response: 7776055,
-        avg_durasi_response: 9.046101538638853,
+        avg_durasi_response: 8.424654858035947,
-        min_durasi_response: -175685,
+        min_durasi_response: -2100,
-        max_durasi_response: 84720,
+        max_durasi_response: 67080,
-        total_dibawah_sla_response: 16595,
+        total_dibawah_sla_response: 14779,
-        total_diatas_sla_response: 758,
+        total_diatas_sla_response: 577,
-        total_durasi_recovery: 72920963,
+        total_durasi_recovery: 64284976,
-        avg_durasi_recovery: 69.94573732718894,
+        avg_durasi_recovery: 69.67408709236477,
-        min_durasi_recovery: -175565,
+        min_durasi_recovery: 0,
-        max_durasi_recovery: 136440,
+        max_durasi_recovery: 93780,
-        total_dibawah_sla_recovery: 16387,
+        total_dibawah_sla_recovery: 14579,
-        total_diatas_sla_recovery: 973,
+        total_diatas_sla_recovery: 784,
-        total_response: 17353,
+        total_response: 15356,
-        total_recovery: 17360
+        total_recovery: 15363
+      },
+      {
+        id: 55,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Hardware Mounting Assembly',
+        kode: '11218',
+        equipment_id: '11218',
+        total: 3124,
+        total_selesai: 3124,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 205544,
+        avg_durasi_response: 0.9055697823303457,
+        min_durasi_response: -1860,
+        max_durasi_response: 6000,
+        total_dibawah_sla_response: 3121,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 5701877,
+        avg_durasi_recovery: 30.17573623559539,
+        min_durasi_recovery: -300,
+        max_durasi_recovery: 73860,
+        total_dibawah_sla_recovery: 3037,
+        total_diatas_sla_recovery: 87,
+        total_response: 3124,
+        total_recovery: 3124
+      },
+      {
+        id: 66,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Arrester',
+        kode: '11219',
+        equipment_id: '11219',
+        total: 698,
+        total_selesai: 698,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 78507,
+        avg_durasi_response: 1.787661406025825,
+        min_durasi_response: 0,
+        max_durasi_response: 14436,
+        total_dibawah_sla_response: 693,
+        total_diatas_sla_response: 4,
+        total_durasi_recovery: 2552611,
+        avg_durasi_recovery: 60.74785100286533,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 62400,
+        total_dibawah_sla_recovery: 650,
+        total_diatas_sla_recovery: 48,
+        total_response: 697,
+        total_recovery: 698
+      },
+      {
+        id: 56,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Terminasi',
+        kode: '11221',
+        equipment_id: '11221',
+        total: 105,
+        total_selesai: 105,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 9731,
+        avg_durasi_response: 1.4666666666666666,
+        min_durasi_response: 0,
+        max_durasi_response: 2100,
+        total_dibawah_sla_response: 105,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 469408,
+        avg_durasi_recovery: 74.33333333333333,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 53580,
+        total_dibawah_sla_recovery: 96,
+        total_diatas_sla_recovery: 9,
+        total_response: 105,
+        total_recovery: 105
+      },
+      {
+        id: 15,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Kabel',
+        kode: '11222',
+        equipment_id: '11222',
+        total: 179,
+        total_selesai: 179,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 37371,
+        avg_durasi_response: 3.441340782122905,
+        min_durasi_response: 0,
+        max_durasi_response: 11760,
+        total_dibawah_sla_response: 175,
+        total_diatas_sla_response: 4,
+        total_durasi_recovery: 798464,
+        avg_durasi_recovery: 74.17877094972067,
+        min_durasi_recovery: 13,
+        max_durasi_recovery: 42263,
+        total_dibawah_sla_recovery: 162,
+        total_diatas_sla_recovery: 17,
+        total_response: 179,
+        total_recovery: 179
       }
     ]
   }

src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -272,19 +273,19 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -312,6 +313,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -1048,14 +1050,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -1092,13 +1097,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
 }
 
 const filterData = (params: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue

@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -486,13 +487,13 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -504,7 +505,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -520,6 +521,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -933,14 +935,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -977,13 +982,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 

src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -584,10 +585,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {

src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -244,13 +245,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -262,7 +263,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -278,6 +279,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -693,14 +695,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -737,13 +742,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
 }
 
 const filterData = (params: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -201,19 +202,19 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -241,6 +242,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -688,14 +690,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 const closeDialog = () => {
   dialogDetail.value = false
@@ -731,13 +736,16 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(dataSubSelected)
 }
 

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -192,19 +193,19 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -216,7 +217,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -232,6 +233,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -678,14 +680,17 @@ const getDetail = () => {
   })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-    getDetail()
+  getDetail()
-  }
 }
 
 const closeDialog = () => {
@@ -722,13 +727,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(dataSubSelected)
 }
 

src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -172,13 +173,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -189,17 +190,17 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.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">Nama Pelapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_pelapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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">No Telp Pelapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.no_telp_pelapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -207,7 +208,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.alamat_pelapor"
           class-name="flex-1"
         />
       </div>
@@ -217,29 +218,29 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
+          :value="dataSelected?.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">Status:</h3>
-        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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">Tgl Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_lapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -247,8 +248,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -260,8 +261,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -270,12 +271,12 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" :value="dataDetail?.waktu_media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -283,7 +284,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_media"
+          :value="dataSelected?.keterangan_media"
           class-name="flex-1"
         />
       </div>
@@ -322,20 +323,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataDetail.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(selectedRowsData[0])
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -201,13 +202,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -219,7 +220,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -234,22 +235,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -257,8 +258,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -271,8 +272,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -280,37 +281,37 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -318,7 +319,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -359,7 +360,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
+const dataSelected = ref<any>({})
 const dialogDetail = ref(false)
 
 const showDetail = () => (dialogDetail.value = true)
@@ -558,10 +559,17 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataDetail.value = data
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -178,19 +179,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -202,7 +203,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -213,27 +214,27 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_selesai" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_selesai" 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">Jml Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.jumlah_lapor" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.jumlah_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -241,8 +242,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -254,8 +255,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -264,17 +265,17 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -282,14 +283,14 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -297,19 +298,19 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
+          :value="dataSelected?.keterangan_pelapor"
           class-name="flex-1"
         />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -347,20 +348,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataDetail.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(selectedRowsData[0])
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue

@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -179,13 +180,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -196,22 +197,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -219,8 +220,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -232,8 +233,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -242,17 +243,17 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -260,14 +261,14 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -275,19 +276,19 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
+          :value="dataSelected?.keterangan_pelapor"
           class-name="flex-1"
         />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -324,20 +325,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataDetail.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(selectedRowsData[0])
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue

@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -179,19 +180,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -203,7 +204,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -214,22 +215,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -237,8 +238,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -250,8 +251,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -260,17 +261,17 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -278,14 +279,14 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -293,19 +294,19 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
+          :value="dataSelected?.keterangan_pelapor"
           class-name="flex-1"
         />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -343,20 +344,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataDetail.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(selectedRowsData[0])
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -170,13 +171,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -187,22 +188,22 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Response:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_response" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_response" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -210,8 +211,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -223,8 +224,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -233,17 +234,17 @@
 
       <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" />
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NO METER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -251,14 +252,14 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -266,19 +267,19 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_pelapor"
+          :value="dataSelected?.keterangan_pelapor"
           class-name="flex-1"
         />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Lapor:</h3>
-        <InputText :readonly="true" :value="dataDetail?.media" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
     </div>
   </DetailDialog>
@@ -315,20 +316,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataDetail.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(selectedRowsData[0])
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {

src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue

@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -418,10 +419,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const data = ref<any[]>([])

src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue

@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -396,13 +397,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -414,7 +415,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showDetail()">
+        <p class="cursor-pointer !text-left">
           {{ data.text }}
         </p>
       </template>
@@ -430,6 +431,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -853,8 +855,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -889,9 +896,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue

@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -101,7 +102,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -113,7 +114,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -129,6 +130,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
@@ -556,8 +558,13 @@ const filterData = (params: any) => {
 
 const getDetail = () => {}
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   console.log(dataSelected.value)
   getDetail()
@@ -593,9 +600,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -364,12 +365,12 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -381,7 +382,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showDetail()">
+        <p class="cursor-pointer !text-left">
           {{ data.text }}
         </p>
       </template>
@@ -397,6 +398,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
@@ -830,8 +832,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -866,9 +873,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -518,13 +519,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -536,7 +537,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -552,6 +553,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -979,8 +981,13 @@ const getDetail = () => {
   // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -1015,9 +1022,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -375,13 +376,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -393,7 +394,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer" @click="showDetail()">
+        <p class="!text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -409,6 +410,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
@@ -837,8 +839,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -873,9 +880,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue

@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -374,17 +375,17 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #percent="{ data }">
-        <p class="cursor-pointer" @click="showDetail()">{{ data.text }}%</p>
+        <p class="cursor-pointer">{{ data.text }}%</p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -396,7 +397,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -412,6 +413,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="data"
@@ -837,8 +839,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -873,9 +880,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue

@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -517,13 +518,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -535,7 +536,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -551,6 +552,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -974,8 +976,13 @@ const getDetail = () => {
   // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   console.log(dataSelected.value)
   getDetail()
@@ -1011,9 +1018,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -252,10 +253,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const data = ref<any[]>([])

src/components/Pages/Material/Daftar/Material_DGMYG.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"

src/components/Pages/Material/Rekap/Material_RPM.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -305,9 +306,14 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -220,7 +221,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const { onResult, onError, loading, refetch } = useQuery(
@@ -287,10 +288,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue

@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -81,7 +82,7 @@
         />
       </DxColumn>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialog()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -93,7 +94,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer" @click="showDialog()">
+        <p class="!text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -139,6 +140,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -473,7 +475,13 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingSubData = ref(false)
 
-const showDialog = () => {
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
@@ -546,15 +554,17 @@ const onExporting = (e: any) => {
   }
 }
 
-const currentDataSelected = ref<any>(null)
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  currentDataSelected.value = selectedRowsData[0]
+    dataSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -175,7 +176,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 
 const { onResult, onError, loading, refetch } = useQuery(
@@ -241,10 +242,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue

@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -383,7 +384,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
@@ -457,10 +458,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref<any>({

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -60,8 +61,8 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
+        data-field="nama_regional"
-        caption="Nama UID"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
       />
@@ -69,8 +70,8 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
+        data-field="nama_uid"
-        caption="Nama UP3"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
       />
@@ -78,11 +79,20 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
+        data-field="nama_up3"
-        caption="Nama ULP"
+        caption="UP3"
         css-class="custom-table-column"
         :group-index="2"
       />
+      <!-- <DxColumn
+        alignment="center"
+        :min-width="170"
+        data-type="text"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column"
+        :group-index="3"
+      /> -->
       <DxColumn alignment="center" caption="Jumlah Kali Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
           <DxColumn
@@ -370,10 +380,14 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -287,7 +288,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.laporUlangGangguan,
@@ -353,10 +354,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -305,10 +306,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -305,10 +306,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -191,10 +192,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 const monalisaGangguanPerJenisKeluhan = gql`
   query DaftarmonalisaGangguanPerJenisKeluhan(

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -415,10 +416,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 const monalisaJumlahDurasiRptRctKeluhan = gql`
   query DaftarmonalisaJumlahDurasiRptRctKeluhan(

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -363,9 +364,14 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -213,10 +214,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const monalisaRekapitulasiKeluhanBelumSelesai = gql`

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -316,10 +317,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 const monalisaRekapitulasiLaporUlangKeluhan = gql`
   query DaftarmonalisaRekapitulasiLaporUlangKeluhan(

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -383,10 +384,14 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -414,10 +415,14 @@ const filterData = (params: any) => {
     console.log(error)
   })
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const filters = ref()

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -358,6 +359,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -764,21 +766,23 @@ const getDetail = () => {
   // })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-
+  getDetail()
-    getDetail()
-  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-
+  }
   showDetail()
 }
 

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -316,10 +317,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -338,10 +339,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -652,7 +653,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -664,13 +665,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -686,6 +687,7 @@
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
+          ref="dataGridRef"
           :allow-column-reordering="true"
           class="max-h-[calc(100vh-140px)]"
           :data-source="dataSub"
@@ -1092,21 +1094,23 @@ const getDetail = () => {
   // })
 }
 
-const currentDataSelected = ref<any>(null)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (currentDataSelected.value === dataSelected.value) {
+  clearSelection()
-    dataSub.value = []
+  dataSub.value = []
-    dataSubSelected.value = null
+  dataSubSelected.value = null
-    dialogDetail.value = true
+  dialogDetail.value = true
-
+  getDetail()
-    getDetail()
-  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  dataSelected.value = data
+    dataSelected.value = selectedRowsData[0]
-
+  }
   showDetail()
 }
 

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -416,10 +417,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -316,10 +317,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -338,10 +339,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue

@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -803,10 +804,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/PencarianData/PencarianData.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -152,13 +153,13 @@
       />
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDetail()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -170,7 +171,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showDetail()">
+        <p class="cursor-pointer !text-left">
           {{ data.text }}
         </p>
       </template>
@@ -181,47 +182,47 @@
     <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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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">IDPEL/NOMETER:</h3>
-        <InputText :readonly="true" :value="dataDetail?.idpel_nometer" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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" />
+        <InputText :readonly="true" :value="dataSelected?.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">Status:</h3>
-        <InputText :readonly="true" :value="dataDetail?.status_akhir" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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">UI Dist:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_uid" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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-[170px] text-gray-800">UP3:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_up3" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.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-[170px] text-gray-800">Posko/ULP:</h3>
-        <InputText :readonly="true" :value="dataDetail?.nama_ulp" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataSelected?.nama_ulp" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -257,7 +258,7 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 const filters = ref({
   type: '',
@@ -270,13 +271,21 @@ const closeDialog = () => {
   dialogDetail.value = false
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataDetail.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
-  console.log(selectedRowsData[0])
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(

src/components/Pages/Transaksi/Transaksi.vue

@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -152,7 +153,7 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
+const dataSelected = ref<any>()
 const dialogDetail = ref(false)
 const loading = ref(false)
 const onExporting = (e: any) => {
@@ -183,10 +184,14 @@ const onExporting = (e: any) => {
     e.cancel = true
   }
 }
-
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
-  console.log(data)
+  clearSelection()
 }
 
 const onRowPrepared = (e: any) => {

src/utils/api/api.graphql.ts

@@ -1670,7 +1670,7 @@ export const queries = {
     gangguan: {
       rekap: {
         dispatchingTimeGangguan: gql`
-          query DaftarmonalisaDispatchingTimeGangguan(
+          query monalisaDispatchingTimeGangguan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -1697,7 +1697,7 @@ export const queries = {
           }
         `,
         rekapitulasiEnsGangguan: gql`
-          query DaftarmonalisaRekapitulasiEnsGangguan(
+          query monalisaRekapitulasiEnsGangguan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1731,7 +1731,7 @@ export const queries = {
           }
         `,
         gangguanBelumSelesai: gql`
-          query DaftarmonalisaGangguanBelumSelesai(
+          query monalisaGangguanBelumSelesai(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1761,7 +1761,7 @@ export const queries = {
           }
         `,
         gangguanPerJenisGangguan: gql`
-          query DaftarmonalisaGangguanPerJenisGangguan(
+          query monalisaGangguanPerJenisGangguan(
             #$nama_regional: String
             $idUid: Int
             $idUp3: Int
@@ -1785,7 +1785,7 @@ export const queries = {
           }
         `,
         jumlahDurasiRptRctGangguan: gql`
-          query DaftarmonalisaJumlahDurasiRptRctGangguan(
+          query monalisaJumlahDurasiRptRctGangguan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1839,6 +1839,7 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              nama_regional
               nama_uid
               nama_up3
               nama_ulp
@@ -1852,7 +1853,7 @@ export const queries = {
           }
         `,
         laporUlangGangguan: gql`
-          query DaftarmonalisaRekapitulasiLaporUlangGangguan(
+          query monalisaRekapitulasiLaporUlangGangguan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1885,7 +1886,7 @@ export const queries = {
           }
         `,
         recoveryTimeGangguan: gql`
-          query DaftarmonalisaRecoveryTimeGangguan(
+          query monalisaRecoveryTimeGangguan(
             #$regional: regional
             $idUid: Int
             $idUp3: Int
@@ -1912,7 +1913,7 @@ export const queries = {
           }
         `,
         responseTimeGangguan: gql`
-          query DaftarmonalisaResponseTimeGangguan(
+          query monalisaResponseTimeGangguan(
             #regional: String
             $idUid: Int
             $idUp3: Int
@@ -1943,7 +1944,7 @@ export const queries = {
     keluhan: {
       rekap: {
         jumlahKaliKeluhan: gql`
-          query DaftarMonalisaJumlahKaliKeluhan(
+          query monalisaJumlahKaliKeluhan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1976,7 +1977,7 @@ export const queries = {
           }
         `,
         recoveryTimeKeluhan: gql`
-          query DaftarmonalisaRecoveryTimeKeluhan(
+          query monalisaRecoveryTimeKeluhan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -2007,13 +2008,175 @@ export const queries = {
               persen_yoy
             }
           }
+        `,
+        responseTimeKeluhan: gql`
+          query monalisaResponseTimeKeluhan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaResponseTimeKeluhan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        jumlahDurasiRptRctKeluhan: gql`
+          query monalisaJumlahDurasiRptRctKeluhan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaJumlahDurasiRptRctKeluhan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              total_durasi_response_time_bulan_ini
+              count_durasi_response_time_bulan_ini
+              avg_durasi_response_time_bulan_ini
+              total_durasi_recovery_time_bulan_ini
+              count_durasi_recovery_time_bulan_ini
+              avg_durasi_recovery_time_bulan_ini
+              total_durasi_response_time_tahun_ini
+              count_durasi_response_time_tahun_ini
+              avg_durasi_response_time_tahun_ini
+              total_durasi_recovery_time_tahun_ini
+              count_durasi_recovery_time_tahun_ini
+              avg_durasi_recovery_time_tahun_ini
+            }
+          }
+        `,
+        gangguanPerJenisKeluhan: gql`
+          query monalisaGangguanPerJenisKeluhan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaGangguanPerJenisKeluhan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              id_jenis_keluhan
+              nama_jenis_keluhan
+              jumlah
+              persen
+            }
+          }
+        `,
+        laporUlangKeluhan: gql`
+          query monalisaRekapitulasiLaporUlangKeluhan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaRekapitulasiLaporUlangKeluhan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              mom_bulan_ini
+              mom_bulan_kemarin
+              persen_mom
+              yoy_tahun_ini
+              yoy_tahun_kemarin
+              persen_yoy
+            }
+          }
+        `,
+        keluhanBelumSelesai: gql`
+          query monalisaRekapitulasiKeluhanBelumSelesai(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            monalisaRekapitulasiKeluhanBelumSelesai(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              jumlah_keluhan
+              jumlah_informasi
+              total
+            }
+          }
         `
       }
     },
     laporan: {
       bulanan: {
         penurunanJumlahKomplainBulanan: gql`
-          query DaftarPenurunanJumlahKomplainBulanan(
+          query penurunanJumlahKomplainBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2059,7 +2222,7 @@ export const queries = {
           }
         `,
         agingComplaintBulanan: gql`
-          query DaftarAgingComplaintBulanan(
+          query agingComplaintBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2093,7 +2256,7 @@ export const queries = {
           }
         `,
         energyNotSalesBulanan: gql`
-          query DaftarEnergyNotSalesBulanan(
+          query energyNotSalesBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2125,7 +2288,7 @@ export const queries = {
           }
         `,
         kepatuhandanAkurasiDalamPelaporanBulanan: gql`
-          query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+          query kepatuhandanAkurasiDalamPelaporanBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2159,7 +2322,7 @@ export const queries = {
       },
       kumulatif: {
         penurunanJumlahKomplainKumulatif: gql`
-          query DaftarPenurunanJumlahKomplainKumulatif(
+          query penurunanJumlahKomplainKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2205,7 +2368,7 @@ export const queries = {
           }
         `,
         agingComplaintKumulatif: gql`
-          query DaftarAgingComplaintKumulatif(
+          query agingComplaintKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2239,7 +2402,7 @@ export const queries = {
           }
         `,
         energyNotSalesKumulatif: gql`
-          query DaftarEnergyNotSalesKumulatif(
+          query energyNotSalesKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2271,7 +2434,7 @@ export const queries = {
           }
         `,
         kepatuhandanAkurasiDalamPelaporanKumulatif: gql`
-          query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
+          query kepatuhandanAkurasiDalamPelaporanKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int