diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index 528e96a..19e9d39 100755
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -137,15 +137,19 @@ const fetchRegional = async () => {
   }
 }
 
-const formatWaktu = (durasiDetik: number): string => {
-  const hari = Math.floor(durasiDetik / (3600 * 24))
-  const sisaDetik = durasiDetik % (3600 * 24)
-  const jam = Math.floor(sisaDetik / 3600)
-  const sisaDetik2 = sisaDetik % 3600
-  const menit = Math.floor(sisaDetik2 / 60)
-  const detik = sisaDetik2 % 60
+const formatWaktu = (durasiDetik: any): string => {
+  if (durasiDetik == null) {
+    return '-'
+  } else {
+    const hari = Math.floor(durasiDetik / (3600 * 24))
+    const sisaDetik = durasiDetik % (3600 * 24)
+    const jam = Math.floor(sisaDetik / 3600)
+    const sisaDetik2 = sisaDetik % 3600
+    const menit = Math.floor(sisaDetik2 / 60)
+    const detik = sisaDetik2 % 60
 
-  return `${hari} - ${jam} : ${menit} : ${detik}`
+    return `${hari} - ${jam} : ${menit} : ${detik}`
+  }
 }
 
 const selectedUid = (value: any) => {
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index fb733a1..c36bb19 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -75,8 +75,6 @@ const filterData = (params: any) => {
       }
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 581f551..05fb23f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    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="showData()">
+      <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="showData()">
+      <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="showData()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -197,12 +198,18 @@ const data = computed(() => props.data)
 const dataSub = ref([])
 const dataSelected = ref({})
 const dataSubSelected = ref({})
-const showDetail = ref(false)
-const showData = () => {
-  showDetail.value = true
+const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
 }
-const closeDetail = () => {
-  showDetail.value = false
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
 const onExporting = (e: any) => {
@@ -235,7 +242,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataSelected = selectedRowsData[0]
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 8e4ec78..64e842f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -23,6 +24,7 @@
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
     <DxLoadPanel
+      shading-color="rgba(0,0,0,0.4)"
       :position="position"
       :show-indicator="showIndicator"
       :show-pane="showPane"
@@ -213,7 +215,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -225,18 +227,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <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="showData()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -249,7 +251,7 @@
         column="total_petugas"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -257,7 +259,7 @@
         column="anomali_pln_mobile_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -265,7 +267,7 @@
         column="anomali_pln_mobile_non_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -273,7 +275,7 @@
         column="anomali_cc123_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -281,7 +283,7 @@
         column="anomali_cc123_non_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -289,7 +291,7 @@
         column="total_anomali_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -297,7 +299,7 @@
         column="total_anomali_non_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -305,7 +307,7 @@
         column="persen_anomali_pln_mobile_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -313,7 +315,7 @@
         column="persen_anomali_pln_mobile_non_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -321,7 +323,7 @@
         column="persen_anomali_cc123_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -329,7 +331,7 @@
         column="persen_anomali_cc123_non_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -337,7 +339,7 @@
         column="persen_anomali_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -345,7 +347,7 @@
         column="persen_anomali_non_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
     </DxSummary>
   </DxDataGrid>
@@ -390,12 +392,18 @@ const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
-const showDetail = ref(false)
-const showData = () => {
-  showDetail.value = true
+const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
 }
-const closeDetail = () => {
-  showDetail.value = false
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 const loading = ref(computed(() => props.loading))
 
@@ -429,7 +437,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index c655133..26e2bd6 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -75,8 +75,6 @@ const filterData = (params: any) => {
       }
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
index e00bf83..6120d44 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
   </div>
   <DxDataGrid
+    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="showData()">
+      <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="showData()">
+      <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="showData()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -135,12 +136,18 @@ const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>({})
 const dataSubSelected = ref<any>({})
-const showDetail = ref(false)
-const showData = () => {
-  showDetail.value = true
+const dialogDetail = ref(false)
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
 }
-const closeDetail = () => {
-  showDetail.value = false
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
 const onExporting = (e: any) => {
@@ -173,7 +180,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataSelected = selectedRowsData[0]
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 8d4a7c9..8adfadf 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :data-source="data"
@@ -23,6 +24,7 @@
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
     <DxLoadPanel
+      shading-color="rgba(0,0,0,0.4)"
       :position="position"
       :show-indicator="showIndicator"
       :show-pane="showPane"
@@ -261,7 +263,7 @@
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <p class="text-right cursor-pointer">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -273,18 +275,18 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="showData()">
+      <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="showData()">
+      <p class="text-left cursor-pointer">
         {{ data.text }}
       </p>
     </template>
 
-    <template #formatTime="{ data }" @click="showData()">
+    <template #formatTime="{ data }">
       <p class="!text-right">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
@@ -297,7 +299,7 @@
         column="wo_cc123"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -305,7 +307,7 @@
         column="wo_pln_mobile"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -313,7 +315,7 @@
         column="wo_loket"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -321,7 +323,7 @@
         column="wo_lainnya"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -329,7 +331,7 @@
         column="wo_total"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -337,7 +339,7 @@
         column="anomali_pln_mobile_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -345,7 +347,7 @@
         column="anomali_pln_mobile_non_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -353,7 +355,7 @@
         column="anomali_cc123_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -361,7 +363,7 @@
         column="anomali_cc123_non_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -369,7 +371,7 @@
         column="total_anomali_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -377,7 +379,7 @@
         column="total_anomali_non_marking"
         summary-type="sum"
         css-class="!text-right"
-        :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -385,7 +387,7 @@
         column="persen_anomali_pln_mobile_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -393,7 +395,7 @@
         column="persen_anomali_pln_mobile_non_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -401,7 +403,7 @@
         column="persen_anomali_cc123_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -409,7 +411,7 @@
         column="persen_anomali_cc123_non_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -417,7 +419,7 @@
         column="persen_anomali_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
@@ -425,7 +427,7 @@
         column="persen_anomali_non_marking"
         summary-type="avg"
         css-class="!text-right"
-        :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        :customize-text="(e: any) => formatPercentage(e.value)"
       />
     </DxSummary>
   </DxDataGrid>
@@ -471,9 +473,9 @@ const data = computed(() => props.data)
 const dataSelected = ref()
 const dataSub = ref([])
 const dataSubSelected = ref()
-const showDetail = ref(false)
-const showData = () => (showDetail.value = true)
-const closeDetail = () => (showDetail.value = false)
+const dialogDetail = ref(false)
+const showDetail = () => (dialogDetail.value = true)
+const closeDialog = () => (dialogDetail.value = false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -504,7 +506,9 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const dataSelected = selectedRowsData[0]
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 </script>
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
index 0cb2677..5d03e36 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
+++ b/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"
@@ -20,6 +21,7 @@
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
     <DxLoadPanel
+      shading-color="rgba(0,0,0,0.4)"
       :position="position"
       :show-indicator="showIndicator"
       :show-pane="showPane"
@@ -140,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>
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index d8e885d..0036aa0 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/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"
@@ -21,6 +22,7 @@
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
     <DxLoadPanel
+      shading-color="rgba(0,0,0,0.4)"
       :position="position"
       :show-indicator="showIndicator"
       :show-pane="showPane"
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index e150440..fd154d6 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/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"
@@ -24,6 +25,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -111,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 == '%'
@@ -139,42 +141,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_wo_gangguan_individual"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_rpt_wo_gangguan_individual"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_rct_wo_gangguan_individual"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="jumlah_wo_penugasan_khusus"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_wo_penugasan_khusus"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -214,6 +216,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -871,13 +874,18 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const onExporting = (e: any) => {
@@ -910,12 +918,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    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)
 }
@@ -941,8 +953,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.laporanCheckInCheckOut
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 932d3ef..3d6c5c0 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/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"
@@ -21,6 +22,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -161,9 +163,9 @@ 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 showDetail = ref(false)
+const dialogDetail = ref(false)
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -247,8 +249,6 @@ const filterData = (params: any) => {
       })
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -263,12 +263,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_laporanCttKwhPeriks
 })
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataDetail.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
-const showData = () => {
-  showDetail.value = true
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
 }
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 4db19b5..9416a15 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -13,7 +14,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -30,6 +31,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -166,12 +168,6 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
@@ -179,15 +175,126 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Gangguan Berdasarkan Media"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="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="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="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="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">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="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="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="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="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="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="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="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"
+          type="textarea"
+          :value="dataSelected?.waktu_media"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Media:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.keterangan_media"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type16 from '@/components/Form/FiltersType/Type16.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -212,6 +319,24 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = 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) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.daftar.berdasarkanMedia, {
   dateFrom: new Date().toISOString().slice(0, 10),
@@ -246,8 +371,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index e4441f0..54b1d4b 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -5,6 +5,7 @@
 
   <div id="dataTable">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :remote-operations="true"
@@ -33,6 +34,7 @@
       <DxSelection mode="single" />
       <!-- <DxScrolling column-rendering-mode="virtual" mode="virtual" row-rendering-mode="virtual" /> -->
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -201,19 +203,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -221,39 +223,39 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Daftar Gangguan Dialihkan ke Posko Lain"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
   >
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <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">
@@ -261,8 +263,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -275,8 +277,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -284,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">
@@ -312,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>
@@ -367,9 +369,9 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
-const closeDetail = () => (showDetail.value = false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const filterData = (params: any) => {
   const { posko, uid, up3 } = params
@@ -393,8 +395,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -410,11 +410,21 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0
   }
 )
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataDetail.value = data
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  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 showData = () => (showDetail.value = true)
 
 const filters = ref()
 const reportMeta = ref({
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index de4c62e..20f704b 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -13,7 +14,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -30,6 +31,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -59,7 +61,7 @@
         alignment="center"
         data-field="no_laporan"
         caption="No Laporan"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -67,7 +69,7 @@
         alignment="center"
         data-field="waktu_lapor"
         caption="Tgl Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -75,7 +77,7 @@
         alignment="center"
         data-field="waktu_response"
         caption="Tgl Response"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -83,7 +85,7 @@
         alignment="center"
         data-field="waktu_recovery"
         caption="Tgl Recovery"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -107,7 +109,7 @@
         alignment="center"
         data-field="status_akhir"
         caption="Status"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -115,7 +117,7 @@
         alignment="center"
         data-field="idpel_nometer"
         caption="IDPEL/NO METER"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -139,7 +141,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -155,7 +157,7 @@
         alignment="center"
         data-field="media"
         caption="Sumber Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -166,12 +168,6 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
@@ -179,15 +175,136 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Gangguan Diselesaikan Mobile APKT"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="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="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="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="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">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="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="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="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="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="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="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="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"
+          type="textarea"
+          :value="dataSelected?.nama_posko"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.penyebab"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.tindakan"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -212,6 +329,24 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = 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) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.daftar.diselesaikanMobileAPKT,
@@ -247,8 +382,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 86c9c0c..36e1ca4 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -173,25 +175,25 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <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="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -199,34 +201,34 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Daftar Gangguan Melapor Lebih Dari 1 Kali"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
   >
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <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">
@@ -234,8 +236,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -248,8 +250,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -257,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">
@@ -295,7 +297,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -331,8 +333,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
-const showDetail = ref(false)
+const dataSelected = ref<any>({})
+const dialogDetail = ref(false)
 const filters = ref()
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -342,15 +344,22 @@ 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]
-  dataDetail.value = data
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
-const closeDetail = () => (showDetail.value = false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.daftar.melaporLebihDariSatuKali,
@@ -388,8 +397,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 797565c..dd5b040 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -46,6 +47,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -191,45 +193,45 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Daftar Gangguan Recovery Time" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -237,8 +239,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -251,8 +253,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -260,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">
@@ -298,7 +300,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -308,7 +310,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.penyebab"
+          :value="dataSelected?.penyebab"
           class-name="flex-1"
         />
       </div>
@@ -318,7 +320,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.tindakan"
+          :value="dataSelected?.tindakan"
           class-name="flex-1"
         />
       </div>
@@ -357,17 +359,24 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
-const showDetail = ref(false)
-
+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]
-  dataDetail.value = data
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
-const closeDetail = () => (showDetail.value = false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
@@ -393,8 +402,6 @@ const filterData = (params: any) => {
     }
 
     reportMeta.value = filters.value
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 367a69b..892de2b 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -168,45 +170,45 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Gangguan Response Time" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Daftar Gangguan Response Time" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -214,8 +216,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -228,8 +230,8 @@
           :readonly="true"
           class-name="flex-1"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
         />
@@ -237,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">
@@ -275,7 +277,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.nama_posko"
+          :value="dataSelected?.nama_posko"
           class-name="flex-1"
         />
       </div>
@@ -285,7 +287,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.penyebab"
+          :value="dataSelected?.penyebab"
           class-name="flex-1"
         />
       </div>
@@ -295,7 +297,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.tindakan"
+          :value="dataSelected?.tindakan"
           class-name="flex-1"
         />
       </div>
@@ -334,17 +336,24 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>({})
-const showDetail = ref(false)
-
+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]
-  dataDetail.value = data
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
-const showData = () => (showDetail.value = true)
+const showDetail = () => (dialogDetail.value = true)
 
-const closeDetail = () => (showDetail.value = false)
+const closeDialog = () => (dialogDetail.value = false)
 
 const filterData = (params: any) => {
   const { minTime, maxTime, posko, uid, up3 } = params
@@ -370,8 +379,6 @@ const filterData = (params: any) => {
     }
 
     reportMeta.value = filters.value
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 87a9a97..5d3245e 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -13,7 +14,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -30,6 +31,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -59,7 +61,7 @@
         alignment="center"
         data-field="no_laporan"
         caption="No Laporan"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -67,7 +69,7 @@
         alignment="center"
         data-field="waktu_lapor"
         caption="Tgl Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -75,7 +77,7 @@
         alignment="center"
         data-field="waktu_response"
         caption="Tgl Response"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -83,7 +85,7 @@
         alignment="center"
         data-field="waktu_recovery"
         caption="Tgl Recovery"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -107,7 +109,7 @@
         alignment="center"
         data-field="status_akhir"
         caption="Status"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -115,7 +117,7 @@
         alignment="center"
         data-field="idpel_nometer"
         caption="IDPEL/NO METER"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -139,7 +141,7 @@
         alignment="center"
         data-field="no_telp_pelapor"
         caption="No Telp Pelapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -155,7 +157,7 @@
         alignment="center"
         data-field="media"
         caption="Sumber Lapor"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -166,12 +168,6 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
@@ -179,15 +175,136 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Gangguan Diselesaikan Tanpa ID Pelanggan"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="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="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="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="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">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="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="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="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="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="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="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="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">Unit Layanan Pelanggan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.nama_posko"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.penyebab"
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
+        <InputText
+          :readonly="true"
+          type="textarea"
+          :value="dataSelected?.tindakan"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -212,6 +329,24 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = 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) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
+}
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.daftar.selesaiTanpaIDPelanggan,
@@ -247,8 +382,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 29c0e46..420b953 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -35,6 +36,7 @@
         :show-navigation-buttons="true"
       /> -->
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -320,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 == '%'
@@ -338,19 +340,19 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p @click="showDetail()">
+        <p>
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
-      <DxSummary>
+      <DxSummary :calculate-custom-summary="calculateCustomSummary">
         <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
           column="total"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -358,15 +360,23 @@
           column="total_selesai"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
-        <DxGroupItem
+        <!-- <DxGroupItem
           :show-in-group-footer="false"
           :align-by-column="true"
           column="persen_selesai"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
+        /> -->
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="persen_selesai"
+          name="persenSelesai"
+          summary-type="custom"
+          css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -374,7 +384,7 @@
           column="total_inproses"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -382,7 +392,7 @@
           column="persen_inproses"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -390,7 +400,7 @@
           column="avg_durasi_dispatch"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxGroupItem
@@ -415,7 +425,7 @@
           column="total_diatas_sla_dispatch"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -423,7 +433,7 @@
           column="total_dibawah_sla_dispatch"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -431,7 +441,7 @@
           column="avg_durasi_response"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -455,7 +465,7 @@
           column="total_diatas_sla_response"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -463,7 +473,7 @@
           column="total_dibawah_sla_response"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -471,7 +481,7 @@
           column="avg_durasi_recovery"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -495,7 +505,7 @@
           column="total_diatas_sla_recovery"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -503,7 +513,7 @@
           column="total_dibawah_sla_recovery"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -543,6 +553,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -1014,12 +1025,11 @@ import {
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
-import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { getGangguanDetail, queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
@@ -1050,7 +1060,34 @@ const reportMeta = ref({
   periode: ''
 })
 
+const calculateCustomSummary = (options: any) => {
+  if (options.name == 'persenSelesai') {
+    console.log(options.component.persen_selesai)
+
+    switch (options.summaryProcess) {
+      case 'start':
+        // Initializing "totalValue" here
+        options.totalValue = 1
+        break
+      case 'calculate':
+        // Modifying "totalValue" here
+        break
+      case 'finalize':
+        // Assigning the final value to "totalValue" here
+        break
+    }
+  }
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+  dataSelected.value = null
+  dataSubSelected.value = null
+}
+
 const filterData = (params: any) => {
+  resetData()
   loadingData.value = true
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
@@ -1070,24 +1107,24 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiAllGangguan
+      loadingData.value = false
     }
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
     console.log(error)
+    loadingData.value = false
   })
 
   watch(loading, (value) => {
-    loadingData.value = value
+    // loadingData.value = value
   })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
-  const ref = dataSelected.value
+  const selected = dataSelected.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -1096,45 +1133,67 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref?.id_posko ? ref?.id_posko : 0,
-    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
-    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    posko: selected?.id_posko ? selected?.id_posko : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    idRegu: selected?.id_regu ? selected?.id_regu : 0,
+    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: selected?.media ? selected?.media : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
+  await getGangguanDetail(query)
+    .then((result) => {
+      // console.table(result.data.data.detailGangguan)
+      dataSub.value = result.data.data.detailGangguan
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
+  // const result = useQuery(queries.gangguan.rekap.gangguanAllDetail, query, {
+  //   fetchPolicy: 'network-only'
+  // })
 
-  onError((error) => {
-    console.log(error)
-  })
+  // result.onResult((queryResult) => {
+  //   if (queryResult.data != undefined) {
+  //     dataSub.value = queryResult.data.detailGangguan
+  //     console.table(queryResult.data.detailGangguan)
+  //   }
+  // })
 
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  // watch(result, (value) => {
+  //   if (dataSub.value != value.detailGangguan) {
+  //     console.table(value.detailGangguan)
+  //   }
+  // })
+
+  // result.onError((error) => {
+  //   console.log(error)
+  // })
+
+  // watch(result.loading, (value) => {
+  //   loadingSubData.value = value
+  // })
 }
-const currentDataSelected = ref<any>(null)
-const showDetail = () => {
-  if (dataSelected.value != null) {
-    if (currentDataSelected.value == dataSelected.value) {
-      dataSub.value = []
-      dataSubSelected.value = null
-      dialogDetail.value = true
-      getDetail()
-    }
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  try {
+    dataGridRef.value?.instance?.clearSelection()
+  } catch (error) {
+    console.log(error)
   }
 }
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -1158,9 +1217,8 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  if (dataSelected.value != selectedRowsData[0]) {
+  if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-    currentDataSelected.value = selectedRowsData[0]
     showDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 4052e95..af63713 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -121,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 == '%'
@@ -174,6 +176,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -566,13 +569,17 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const closeDialog = () => {
@@ -609,12 +616,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 
@@ -642,8 +653,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanAlihPosko
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index eface3a..de2cdec 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -28,6 +29,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -85,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 == '%'
@@ -120,14 +122,14 @@
           display-format="{0}"
           :column="`tgl${i}`"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -167,6 +169,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -457,7 +460,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -553,13 +556,17 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const closeDialog = () => {
@@ -596,12 +603,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 
@@ -629,8 +640,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 4dc28ae..1bac823 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -22,6 +23,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -236,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[]>([])
@@ -272,8 +278,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanCleansingTransaksiTM
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index ddb089d..a58c134 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -22,6 +23,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -332,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 == '%'
@@ -350,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>
@@ -372,42 +374,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_selesai"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_mobile_marking"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_mobile_nonmarking"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_nonmobile_marking"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_nonmobile_nonmarking"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -447,6 +449,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -737,7 +740,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -828,13 +831,17 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const closeDialog = () => {
@@ -871,12 +878,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 
@@ -904,8 +915,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanDiselesaikanMobileAPKT
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 2bb3eb4..3b1090b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -265,7 +267,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -273,7 +275,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -281,7 +283,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -289,7 +291,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -297,7 +299,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -305,7 +307,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -313,7 +315,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -337,7 +339,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -345,7 +347,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -353,7 +355,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -361,7 +363,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -385,7 +387,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -393,7 +395,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
@@ -496,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) => {
@@ -563,8 +569,6 @@ const filterData = (params: any) => {
         }
       })
     }
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((queryError) => {
     console.log(queryError)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index cd74093..7c6ddc8 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -32,6 +33,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -47,15 +49,7 @@
       />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn
-        css-class="custom-table-column"
-        :width="60"
-        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
-        caption="No"
-        cell-template="formatNumber"
-      />
+      <DxColumn css-class="custom-table-column" :width="60" alignment="center" caption="No" />
       <DxColumn
         :width="120"
         alignment="center"
@@ -255,13 +249,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 == '%'
@@ -273,7 +267,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>
@@ -291,7 +285,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -299,7 +293,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -307,7 +301,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -315,7 +309,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -323,7 +317,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -331,7 +325,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -339,7 +333,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -363,7 +357,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -371,7 +365,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -379,7 +373,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -387,7 +381,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -411,7 +405,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="true"
@@ -419,7 +413,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -459,6 +453,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -753,7 +748,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -863,8 +858,7 @@ const filterData = (params: any) => {
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       data.value = queryResult.data.rekapitulasiJenisGangguanSE004
-      console.log(queryResult.loading)
-      console.log(queryResult.networkStatus)
+      console.log(queryResult.data.rekapitulasiJenisGangguanSE004)
     }
   })
 
@@ -881,6 +875,7 @@ const getDetail = () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
+  const { posko, uid, up3 } = filters.value
 
   const query = {
     dateFrom: dateValue[0]
@@ -889,10 +884,10 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: filters.value?.id_posko ? filters.value.id_posko : 0,
-    idUid: filters.value?.id_uid ? filters.value.id_uid : 0,
-    idUp3: filters.value?.id_up3 ? filters.value.id_up3 : 0,
-    idEquipment: ref?.kode ? ref.kode : 0
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idEquipment: ref?.kode ? parseInt(ref.kode) : 0
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
@@ -902,7 +897,7 @@ const getDetail = () => {
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailGangguanJenisGangguanSE004
     }
   })
 
@@ -915,22 +910,30 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
 }
 
 const filters = ref()
@@ -938,379 +941,264 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
       {
-        id: '0',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        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',
+        id: 42,
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
         sub_kelompok: 'MV Cell',
-        kode: '11511',
-        total: 56062,
-        total_selesai: 56061,
-        persen_selesai: 99.99821626056865,
-        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
+        kode: '11111',
+        equipment_id: null,
+        total: 0,
+        total_selesai: 0,
+        persen_selesai: 0.0,
+        total_inproses: 0,
+        persen_inproses: 0.0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
       },
       {
-        id: '2',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'JTR',
-        kode: '13400',
-        total: 6022,
-        total_selesai: 6022,
-        persen_selesai: 100,
+        id: 40,
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Kabel Outgoing s/d Pole Pertama',
+        kode: '11112',
+        equipment_id: null,
+        total: 0,
+        total_selesai: 0,
+        persen_selesai: 0.0,
         total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 8262056,
-        avg_durasi_response: 22.382392026578074,
-        min_durasi_response: -16519,
-        max_durasi_response: 76299,
-        total_dibawah_sla_response: 5655,
-        total_diatas_sla_response: 365,
-        total_durasi_recovery: 87345586,
-        avg_durasi_recovery: 241.25440053138493,
-        min_durasi_recovery: -16459,
-        max_durasi_recovery: 2499716,
-        total_dibawah_sla_recovery: 4802,
-        total_diatas_sla_recovery: 1220,
-        total_response: 6020,
-        total_recovery: 6022
+        persen_inproses: 0.0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
       },
       {
-        id: '3',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Jointing',
-        kode: '11243',
-        total: 1,
-        total_selesai: 1,
-        persen_selesai: 100,
+        id: 46,
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Kapasitor',
+        kode: '11113',
+        equipment_id: null,
+        total: 0,
+        total_selesai: 0,
+        persen_selesai: 0.0,
         total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 60,
-        avg_durasi_response: 1,
+        persen_inproses: 0.0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
+      },
+      {
+        id: 9,
+        id_fasilitas: '111 (Gardu Induk -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Relay Outgoing Feeder',
+        kode: '11114',
+        equipment_id: null,
+        total: 0,
+        total_selesai: 0,
+        persen_selesai: 0.0,
+        total_inproses: 0,
+        persen_inproses: 0.0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
+      },
+      {
+        id: 20,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Konduktor',
+        kode: '11211',
+        equipment_id: '11211',
+        total: 571,
+        total_selesai: 571,
+        persen_selesai: 100.0,
+        total_inproses: 0,
+        persen_inproses: 0.0,
+        total_durasi_response: 2317727,
+        avg_durasi_response: 68.16254416961131,
+        min_durasi_response: 0,
+        max_durasi_response: 2277180,
+        total_dibawah_sla_response: 563,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 3167860,
+        avg_durasi_recovery: 92.45964912280702,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 2277240,
+        total_dibawah_sla_recovery: 555,
+        total_diatas_sla_recovery: 15,
+        total_response: 566,
+        total_recovery: 570
+      },
+      {
+        id: 37,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Tiang',
+        kode: '11212',
+        equipment_id: '11212',
+        total: 5,
+        total_selesai: 5,
+        persen_selesai: 100.0,
+        total_inproses: 0,
+        persen_inproses: 0.0,
+        total_durasi_response: 300,
+        avg_durasi_response: 1.0,
         min_durasi_response: 60,
         max_durasi_response: 60,
-        total_dibawah_sla_response: 1,
+        total_dibawah_sla_response: 5,
         total_diatas_sla_response: 0,
-        total_durasi_recovery: 240,
-        avg_durasi_recovery: 4,
-        min_durasi_recovery: 240,
-        max_durasi_recovery: 240,
-        total_dibawah_sla_recovery: 1,
+        total_durasi_recovery: 14040,
+        avg_durasi_recovery: 46.8,
+        min_durasi_recovery: 120,
+        max_durasi_recovery: 9300,
+        total_dibawah_sla_recovery: 5,
         total_diatas_sla_recovery: 0,
-        total_response: 1,
-        total_recovery: 1
+        total_response: 5,
+        total_recovery: 5
       },
       {
-        id: '4',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: null,
-        kode: '',
-        total: 7153680,
-        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,
-        avg_durasi_response: 2.15,
-        min_durasi_response: 0,
-        max_durasi_response: 1477,
-        total_dibawah_sla_response: 20,
-        total_diatas_sla_response: 0,
-        total_durasi_recovery: 115132,
-        avg_durasi_recovery: 95.85,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 18660,
-        total_dibawah_sla_recovery: 15,
-        total_diatas_sla_recovery: 5,
-        total_response: 20,
-        total_recovery: 20
-      },
-      {
-        id: '6',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Kelompok Terencana (Planned) ',
-        kode: '32000',
-        total: 1130,
-        total_selesai: 1127,
-        persen_selesai: 99.73451327433628,
-        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,
-        avg_durasi_response: 2.1612057667103537,
-        min_durasi_response: 0,
-        max_durasi_response: 14436,
-        total_dibawah_sla_response: 755,
-        total_diatas_sla_response: 8,
-        total_durasi_recovery: 2758840,
-        avg_durasi_recovery: 59.97643979057592,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 62400,
-        total_dibawah_sla_recovery: 711,
-        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',
+        id: 35,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'DS / LBS',
+        kode: '11213',
+        equipment_id: '11213',
         total: 13,
         total_selesai: 13,
-        persen_selesai: 100,
+        persen_selesai: 100.0,
         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,
+        persen_inproses: 0.0,
+        total_durasi_response: 1470,
+        avg_durasi_response: 1.8461538461538463,
+        min_durasi_response: 0,
+        max_durasi_response: 300,
+        total_dibawah_sla_response: 13,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 9209,
+        avg_durasi_recovery: 11.692307692307692,
+        min_durasi_recovery: 120,
+        max_durasi_recovery: 4020,
+        total_dibawah_sla_recovery: 13,
+        total_diatas_sla_recovery: 0,
         total_response: 13,
         total_recovery: 13
       },
       {
-        id: '13',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'Operasi',
-        kode: '12503',
-        total: 747,
-        total_selesai: 747,
-        persen_selesai: 100,
+        id: 45,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'Recloser / PMCB',
+        kode: '11214',
+        equipment_id: '11214',
+        total: 99,
+        total_selesai: 99,
+        persen_selesai: 100.0,
         total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 1354769,
-        avg_durasi_response: 29.809395973154363,
-        min_durasi_response: -5325,
-        max_durasi_response: 349500,
-        total_dibawah_sla_response: 713,
-        total_diatas_sla_response: 32,
-        total_durasi_recovery: 4880492,
-        avg_durasi_recovery: 108.41097724230255,
-        min_durasi_recovery: -5325,
-        max_durasi_recovery: 494389,
-        total_dibawah_sla_recovery: 692,
-        total_diatas_sla_recovery: 55,
-        total_response: 745,
-        total_recovery: 747
+        persen_inproses: 0.0,
+        total_durasi_response: 2433074,
+        avg_durasi_response: 409.5656565656566,
+        min_durasi_response: 0,
+        max_durasi_response: 2395440,
+        total_dibawah_sla_response: 93,
+        total_diatas_sla_response: 6,
+        total_durasi_recovery: 2525728,
+        avg_durasi_recovery: 425.1515151515151,
+        min_durasi_recovery: 1,
+        max_durasi_recovery: 2395500,
+        total_dibawah_sla_recovery: 98,
+        total_diatas_sla_recovery: 1,
+        total_response: 99,
+        total_recovery: 99
       },
       {
-        id: '14',
-        id_fasilitas: '111 -> Distribusi -> Penyulang',
-        sub_kelompok: 'CO Branch',
-        kode: '11217',
-        total: 17364,
-        total_selesai: 17364,
-        persen_selesai: 100,
+        id: 13,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'AVR / Kapasitor',
+        kode: '11215',
+        equipment_id: null,
+        total: 0,
+        total_selesai: 0,
+        persen_selesai: 0.0,
         total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 9434964,
-        avg_durasi_response: 9.046101538638853,
-        min_durasi_response: -175685,
-        max_durasi_response: 84720,
-        total_dibawah_sla_response: 16595,
-        total_diatas_sla_response: 758,
-        total_durasi_recovery: 72920963,
-        avg_durasi_recovery: 69.94573732718894,
-        min_durasi_recovery: -175565,
-        max_durasi_recovery: 136440,
-        total_dibawah_sla_recovery: 16387,
-        total_diatas_sla_recovery: 973,
-        total_response: 17353,
-        total_recovery: 17360
+        persen_inproses: 0.0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
+      },
+      {
+        id: 52,
+        id_fasilitas: '112 (Penyulang -> Padam Tidak Terencana -> Distribusi )',
+        sub_kelompok: 'CT / PT kWh Meter Exim',
+        kode: '11216',
+        equipment_id: '11216',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100.0,
+        total_inproses: 0,
+        persen_inproses: 0.0,
+        total_durasi_response: 35,
+        avg_durasi_response: 0.0,
+        min_durasi_response: 35,
+        max_durasi_response: 35,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 95,
+        avg_durasi_recovery: 1.0,
+        min_durasi_recovery: 95,
+        max_durasi_recovery: 95,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
       }
     ]
   }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 9890ec0..a724b57 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -22,6 +23,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -178,7 +180,7 @@
           column="month1"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -186,7 +188,7 @@
           column="month2"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -194,7 +196,7 @@
           column="month3"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -202,7 +204,7 @@
           column="month4"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -210,7 +212,7 @@
           column="month5"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -218,7 +220,7 @@
           column="month6"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -226,7 +228,7 @@
           column="month7"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -234,7 +236,7 @@
           column="month8"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -242,7 +244,7 @@
           column="month9"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -250,7 +252,7 @@
           column="month10"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -258,7 +260,7 @@
           column="month11"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -266,24 +268,24 @@
           column="month12"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 == '%'
@@ -305,7 +307,7 @@
   <DetailDialog
     :open="dialogDetail"
     title="Detail Rekapitulasi Koreksi Transaksi Individual"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -336,6 +338,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -1046,16 +1049,20 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
-const closeDetail = () => {
+const closeDialog = () => {
   dialogDetail.value = false
 }
 
@@ -1089,12 +1096,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    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) => {
@@ -1121,8 +1132,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 97d551a..ec2f91f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -12,6 +12,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -32,6 +33,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -257,49 +259,49 @@
           :show-in-group-footer="true"
           column="total"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_selesai"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="persen_selesai"
           summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_inproses"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="persen_inproses"
           summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_durasi_response"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="avg_durasi_response"
           summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
@@ -320,28 +322,28 @@
           :show-in-group-footer="true"
           column="total_diatas_sla_response"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_dibawah_sla_response"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_durasi_recovery"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="avg_durasi_recovery"
           summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
@@ -362,14 +364,14 @@
           :show-in-group-footer="true"
           column="total_diatas_sla_recovery"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_dibawah_sla_recovery"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
 
@@ -384,43 +386,43 @@
           show-in-column="total"
           column="total"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_selesai"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_selesai"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="total_inproses"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_inproses"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="total_durasi_response"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_response"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="max_durasi_response"
@@ -438,25 +440,25 @@
           column="total_diatas_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_dibawah_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_durasi_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_recovery"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="max_durasi_recovery"
@@ -474,24 +476,24 @@
           column="total_diatas_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_dibawah_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 == '%'
@@ -503,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>
@@ -544,6 +546,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -834,7 +837,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -931,13 +934,17 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const closeDialog = () => {
@@ -974,12 +981,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(data)
 }
 
@@ -1009,8 +1020,6 @@ const filterData = (params: any) => {
       )
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index aeb7408..ddae08d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -262,49 +264,49 @@
           :show-in-group-footer="true"
           column="total"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_selesai"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="persen_selesai"
           summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_inproses"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="persen_inproses"
           summary-type="avg"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_durasi_response"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="avg_durasi_response"
           summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
@@ -325,28 +327,28 @@
           :show-in-group-footer="true"
           column="total_diatas_sla_response"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_dibawah_sla_response"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_durasi_recovery"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="avg_durasi_recovery"
           summary-type="avg"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
@@ -367,14 +369,14 @@
           :show-in-group-footer="true"
           column="total_diatas_sla_recovery"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
           column="total_dibawah_sla_recovery"
           summary-type="sum"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
           css-class="!text-right"
         />
 
@@ -389,43 +391,43 @@
           show-in-column="total"
           column="total"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_selesai"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_selesai"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="total_inproses"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_inproses"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="total_durasi_response"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_response"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="max_durasi_response"
@@ -443,25 +445,25 @@
           column="total_diatas_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_dibawah_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_durasi_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_recovery"
           summary-type="avg"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="max_durasi_recovery"
@@ -479,13 +481,13 @@
           column="total_diatas_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_dibawah_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
@@ -583,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, {
@@ -616,8 +622,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanPerRegu
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index db48b8a..6109a1d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -243,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 == '%'
@@ -261,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>
@@ -302,6 +304,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -596,7 +599,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -691,13 +694,17 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const closeDialog = () => {
@@ -734,12 +741,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    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) => {
@@ -766,8 +777,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanPerTanggal
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 2f3ae5b..bef40e8 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -23,6 +24,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -200,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 == '%'
@@ -234,7 +236,7 @@
   <DetailDialog
     :open="dialogDetail"
     title="Detail Rating Per Posko"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -265,6 +267,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -591,7 +594,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -686,15 +689,19 @@ const getDetail = () => {
   })
 }
 
-const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
 }
-const closeDetail = () => {
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
+}
+const closeDialog = () => {
   dialogDetail.value = false
 }
 
@@ -728,12 +735,16 @@ const onExporting = (e: any) => {
 }
 
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(dataSubSelected)
 }
 
@@ -772,8 +783,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 9c8f11c..9bb3304 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -21,6 +22,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -191,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 == '%'
@@ -215,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>
@@ -225,7 +227,7 @@
   <DetailDialog
     :open="dialogDetail"
     title="Detail Rating Per Regu"
-    @on-close="closeDetail"
+    @on-close="closeDialog"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -256,6 +258,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -582,7 +585,7 @@
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
-          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyeban:</h3>
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
           <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
         </div>
       </div>
@@ -676,16 +679,20 @@ const getDetail = () => {
   })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
-const closeDetail = () => {
+const closeDialog = () => {
   dialogDetail.value = false
 }
 
@@ -719,12 +726,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSubSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
   console.log(dataSubSelected)
 }
 
@@ -757,8 +768,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 545e992..46ac844 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -31,6 +32,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -171,34 +173,34 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -206,7 +208,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.alamat_pelapor"
+          :value="dataSelected?.alamat_pelapor"
           class-name="flex-1"
         />
       </div>
@@ -216,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">
@@ -246,8 +248,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -259,8 +261,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -269,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">
@@ -282,7 +284,7 @@
         <InputText
           :readonly="true"
           type="textarea"
-          :value="dataDetail?.keterangan_media"
+          :value="dataSelected?.keterangan_media"
           class-name="flex-1"
         />
       </div>
@@ -321,20 +323,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+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]
-  console.log(selectedRowsData[0])
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {
@@ -562,8 +572,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index 8998182..c460034 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -18,7 +19,7 @@
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
-      :word-wrap-enabled="true"
+      :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
       <DxPaging :page-size="20" :enabled="true" />
@@ -31,11 +32,11 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
         v-model:visible="loading"
         :enabled="true"
       />
@@ -78,6 +79,7 @@
         data-field="waktu_lapor"
         caption="Tgl Lapor"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -85,6 +87,7 @@
         data-field="waktu_dialihkan"
         caption="Tgl Dialihkan"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -92,6 +95,7 @@
         data-field="waktu_response"
         caption="Tgl Response"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -99,6 +103,7 @@
         data-field="waktu_recovery"
         caption="Tgl Recovery"
         css-class="custom-table-column !align-top"
+        cell-template="formatText"
       />
       <DxColumn
         :width="170"
@@ -196,12 +201,6 @@
         cell-template="formatText"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
         <p class="text-left cursor-pointer">
           {{ data.text }}
@@ -221,15 +220,116 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Keluhan Dialihkan Ke Unit Lain"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
+        <InputText :readonly="true" :value="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="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="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="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">Response Time:</h3>
+        <InputText
+          :readonly="true"
+          :value="
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
+              : '-'
+          "
+          class-name="flex-1"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Recovery Time:</h3>
+        <InputText
+          :readonly="true"
+          class-name="flex-1"
+          :value="
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
+              : '-'
+          "
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="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="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="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="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="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="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="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"
+          type="textarea"
+          :value="dataSelected?.nama_posko"
+          class-name="flex-1"
+        />
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
@@ -259,6 +359,13 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const data = ref<any[]>([])
+const dataSelected = ref<any>({})
+const dialogDetail = ref(false)
+
+const showDetail = () => (dialogDetail.value = true)
+
+const closeDialog = () => (dialogDetail.value = false)
 
 const onExporting = (e: any) => {
   const periode = reportMeta.value.periode ? reportMeta.value.periode.split(' s/d ') : ''
@@ -452,13 +559,19 @@ 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)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  clearSelection()
+  showDetail()
 }
 
-const data = ref<any[]>([])
 const { onResult, onError, loading, refetch } = useQuery(
   queries.keluhan.daftar.keluhanDipindahkanKeIDULPLain,
   {
@@ -493,8 +606,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index d110e33..cdb2aa2 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -31,6 +32,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -177,19 +179,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -201,38 +203,38 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -240,8 +242,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -253,8 +255,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -263,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">
@@ -281,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">
@@ -296,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>
@@ -346,20 +348,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+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]
-  console.log(selectedRowsData[0])
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {
@@ -598,8 +608,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 1b01b6c..fe5ca13 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -47,6 +48,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -178,39 +180,39 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -218,8 +220,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -231,8 +233,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -241,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">
@@ -259,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">
@@ -274,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>
@@ -323,20 +325,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+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]
-  console.log(selectedRowsData[0])
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {
@@ -578,8 +588,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 6b38773..a62e052 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -21,6 +21,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -47,6 +48,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -178,19 +180,19 @@
       />
 
       <template #cellCenter="{ data }">
-        <p class="cursor-pointer" @click="showData()">
+        <p class="cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -202,33 +204,33 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -236,8 +238,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -249,8 +251,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -259,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">
@@ -277,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">
@@ -292,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>
@@ -342,20 +344,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+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]
-  console.log(selectedRowsData[0])
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {
@@ -597,8 +607,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 9b79ad9..d63c4db 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -31,6 +32,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -169,39 +171,39 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Detail Keluhan" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Detail Keluhan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -209,8 +211,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_response_time)
-              ? formatWaktu(dataDetail?.durasi_response_time)
+            parseInt(dataSelected?.durasi_response_time)
+              ? formatWaktu(dataSelected?.durasi_response_time)
               : '-'
           "
           class-name="flex-1"
@@ -222,8 +224,8 @@
         <InputText
           :readonly="true"
           :value="
-            parseInt(dataDetail?.durasi_recovery_time)
-              ? formatWaktu(dataDetail?.durasi_recovery_time)
+            parseInt(dataSelected?.durasi_recovery_time)
+              ? formatWaktu(dataSelected?.durasi_recovery_time)
               : '-'
           "
           class-name="flex-1"
@@ -232,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">
@@ -250,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">
@@ -265,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>
@@ -314,20 +316,28 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+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]
-  console.log(selectedRowsData[0])
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onExporting = (e: any) => {
@@ -557,8 +567,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index ecea426..1df66f5 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -31,6 +32,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -417,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[]>([])
@@ -466,8 +472,6 @@ const filterData = (params: any) => {
 
     reportMeta.value = filters.value
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index ea6e26c..00de229 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -237,7 +239,7 @@
           column="total"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -245,7 +247,7 @@
           column="total_selesai"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -253,7 +255,7 @@
           column="persen_selesai"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -261,7 +263,7 @@
           column="total_inproses"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -269,7 +271,7 @@
           column="persen_inproses"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -277,7 +279,7 @@
           column="avg_durasi_dispatch"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxGroupItem
@@ -302,7 +304,7 @@
           column="total_diatas_sla_dispatch"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -310,7 +312,7 @@
           column="total_dibawah_sla_dispatch"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -318,7 +320,7 @@
           column="avg_durasi_response"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -342,7 +344,7 @@
           column="total_diatas_sla_response"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -350,7 +352,7 @@
           column="total_dibawah_sla_response"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -358,7 +360,7 @@
           column="avg_durasi_recovery"
           summary-type="avg"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -382,7 +384,7 @@
           column="total_diatas_sla_recovery"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -390,18 +392,18 @@
           column="total_dibawah_sla_recovery"
           summary-type="sum"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 == '%'
@@ -413,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>
@@ -454,6 +456,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -834,8 +837,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanAll
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -851,7 +852,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -886,9 +893,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index 891f2dd..ed09da0 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -88,19 +90,19 @@
           display-format="{0}"
           :column="`tgl${i}`"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDetail()">
+        <p class="!text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -112,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>
@@ -153,6 +155,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -539,8 +542,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanBerdasarkanMedia
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -554,7 +555,13 @@ const filterData = (params: any) => {
 
 const getDetail = () => {}
 
+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()
@@ -590,9 +597,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 1f7686f..87fd888 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -293,7 +295,7 @@
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
@@ -332,7 +334,7 @@
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
@@ -363,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 == '%'
@@ -380,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>
@@ -421,6 +423,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -811,8 +814,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -828,7 +829,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -863,9 +870,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 65c093b..4312c34 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -258,7 +260,7 @@
           column="total"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -266,7 +268,7 @@
           column="total_selesai"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -274,7 +276,7 @@
           column="persen_selesai"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -282,7 +284,7 @@
           column="total_inproses"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -290,7 +292,7 @@
           column="persen_inproses"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -298,7 +300,7 @@
           column="total_durasi_response"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -306,7 +308,7 @@
           column="avg_durasi_response"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="min"
@@ -330,7 +332,7 @@
           column="total_diatas_sla_response"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -338,7 +340,7 @@
           column="total_dibawah_sla_response"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -346,7 +348,7 @@
           column="total_durasi_recovery"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -354,7 +356,7 @@
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="min"
@@ -378,7 +380,7 @@
           column="total_diatas_sla_recovery"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -386,7 +388,7 @@
           column="total_dibawah_sla_recovery"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
@@ -400,49 +402,49 @@
           display-format="{0}"
           column="total"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -463,28 +465,28 @@
           display-format="{0}"
           column="total_diatas_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -505,25 +507,25 @@
           display-format="{0}"
           column="total_diatas_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 +537,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDetail()">
+        <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
       </template>
@@ -576,6 +578,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -960,8 +963,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanPerJenisKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -977,7 +978,13 @@ const getDetail = () => {
   // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -1012,9 +1019,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 74e9283..b6befb8 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -257,49 +259,49 @@
           display-format="{0}"
           column="total"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="persen_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="persen_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -320,28 +322,28 @@
           display-format="{0}"
           column="total_diatas_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -362,25 +364,25 @@
           display-format="{0}"
           column="total_diatas_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 == '%'
@@ -392,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>
@@ -433,6 +435,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -818,8 +821,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanPerKelompokKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -835,7 +836,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -870,9 +877,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index d7f77e9..82b4a7b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -256,49 +258,49 @@
           display-format="{0}"
           column="total"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="persen_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="persen_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -319,28 +321,28 @@
           display-format="{0}"
           column="total_diatas_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -361,29 +363,29 @@
           display-format="{0}"
           column="total_diatas_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 == '%'
@@ -395,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>
@@ -436,6 +438,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -818,8 +821,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanPerTanggal
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -835,7 +836,13 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
+  clearSelection()
   dialogDetail.value = true
   getDetail()
 }
@@ -870,9 +877,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 6d72ec1..0415487 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -10,6 +10,7 @@
 
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -257,7 +259,7 @@
           column="total"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -265,7 +267,7 @@
           column="total_selesai"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -273,7 +275,7 @@
           column="persen_selesai"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -281,7 +283,7 @@
           column="total_inproses"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -289,7 +291,7 @@
           column="persen_inproses"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -297,7 +299,7 @@
           column="total_durasi_response"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -305,7 +307,7 @@
           column="avg_durasi_response"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="min"
@@ -329,7 +331,7 @@
           column="total_diatas_sla_response"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -337,7 +339,7 @@
           column="total_dibawah_sla_response"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -345,7 +347,7 @@
           column="total_durasi_recovery"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="avg"
@@ -353,7 +355,7 @@
           column="avg_durasi_recovery"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="min"
@@ -377,7 +379,7 @@
           column="total_diatas_sla_recovery"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           summary-type="sum"
@@ -385,7 +387,7 @@
           column="total_dibawah_sla_recovery"
           css-class="!text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
@@ -399,49 +401,49 @@
           display-format="{0}"
           column="total"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="persen_selesai"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="persen_inproses"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -462,28 +464,28 @@
           display-format="{0}"
           column="total_diatas_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="min"
@@ -504,25 +506,25 @@
           display-format="{0}"
           column="total_diatas_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </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 == '%'
@@ -534,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>
@@ -575,6 +577,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -955,8 +958,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanPerUnit
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
@@ -972,7 +973,13 @@ const getDetail = () => {
   // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
 }
 
+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()
@@ -1008,9 +1015,10 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-  console.log(data)
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 801d59a..df825ee 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -4,6 +4,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -23,6 +24,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -251,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[]>([])
@@ -290,8 +296,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.rekapitulasiKeluhanRatingPerUnit
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index f805c3f..8146853 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/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"
@@ -28,6 +29,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -217,8 +219,6 @@ const filterData = (params: any) => {
       })
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 9559694..58f48a0 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/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"
@@ -28,6 +29,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -204,8 +206,6 @@ const filterData = (params: any) => {
       })
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 48c6b33..8fecaa5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -141,42 +143,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -297,16 +299,19 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaDispatchingTimeGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     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()
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 21ff047..c1c7e08 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -28,6 +29,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -141,28 +143,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
@@ -170,14 +172,14 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -219,8 +221,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
@@ -251,8 +253,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaRekapitulasiEnsGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -286,10 +286,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()
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 2272075..1907d7d 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -27,6 +28,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -80,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 == '%'
@@ -92,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>
@@ -109,28 +111,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="jumlah_informasi"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Detail Gangguan Belum Selesai"
     @on-close="closeDialog"
     :full-width="true"
@@ -163,6 +165,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -468,15 +471,21 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
 const loadingSubData = ref(false)
 
-const showDialog = () => {
-  showDetail.value = true
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dialogDetail.value = true
 }
 
 const closeDialog = () => {
-  showDetail.value = false
+  dialogDetail.value = false
 }
 
 const { onResult, onError, loading, refetch } = useQuery(
@@ -508,8 +517,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaGangguanBelumSelesai
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -545,12 +552,16 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (selectedRowsData[0] != undefined) {
+    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)
 }
 
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index 9160630..becf276 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -28,6 +29,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -96,14 +98,14 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxTotalItem
@@ -174,8 +176,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.gangguanPerJenisGangguan,
@@ -205,8 +207,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaGangguanPerJenisGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -240,10 +240,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()
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index 83a3183..8fc89af 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -28,6 +29,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -234,7 +236,7 @@
           summary-type="sum"
           show-in-column="total_durasi_response_time_bulan_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -242,7 +244,7 @@
           summary-type="sum"
           show-in-column="jumlah_gangguan_rpt_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -250,7 +252,7 @@
           summary-type="sum"
           show-in-column="rpt_gangguan_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -258,7 +260,7 @@
           summary-type="sum"
           show-in-column="total_rct_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -266,7 +268,7 @@
           summary-type="sum"
           show-in-column="jumlah_gangguan_rct_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -274,7 +276,7 @@
           summary-type="sum"
           show-in-column="rct_gangguan_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -282,7 +284,7 @@
           summary-type="sum"
           show-in-column="total_durasi_response_time_tahun_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -290,7 +292,7 @@
           summary-type="sum"
           show-in-column="jumlah_gangguan_rpt_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -298,7 +300,7 @@
           summary-type="sum"
           show-in-column="rpt_gangguan_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -306,7 +308,7 @@
           summary-type="sum"
           show-in-column="total_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -314,7 +316,7 @@
           summary-type="sum"
           show-in-column="jumlah_gangguan_rct_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -322,7 +324,7 @@
           summary-type="sum"
           show-in-column="rch_gangguan_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
@@ -382,8 +384,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.jumlahDurasiRptRctGangguan,
   {
@@ -421,8 +423,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaJumlahDurasiRptRctGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -456,10 +456,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>({
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 4863956..b2c15b1 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -59,8 +61,8 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_uid"
-        caption="Nama UID"
+        data-field="nama_regional"
+        caption="Regional"
         css-class="custom-table-column"
         :group-index="0"
       />
@@ -68,8 +70,8 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="nama_uid"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="1"
       />
@@ -77,11 +79,20 @@
         alignment="center"
         :min-width="170"
         data-type="text"
-        data-field="nama_ulp"
-        caption="Nama ULP"
+        data-field="nama_up3"
+        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
@@ -150,7 +161,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -158,7 +169,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -166,7 +177,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -174,7 +185,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -182,7 +193,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -190,7 +201,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxTotalItem
@@ -204,42 +215,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -362,17 +373,19 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaJumlahKaliGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     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()
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 1d87432..6fd0bc4 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -151,28 +153,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
@@ -180,14 +182,14 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxGroupItem
@@ -206,7 +208,7 @@
           show-in-column="mom_bulan_ini"
           column="mom_bulan_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -215,7 +217,7 @@
           show-in-column="persen_mom"
           column="persen_mom"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -224,7 +226,7 @@
           show-in-column="yoy_tahun_kemarin"
           column="yoy_tahun_kemarin"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -233,7 +235,7 @@
           show-in-column="yoy_tahun_ini"
           column="yoy_tahun_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -242,7 +244,7 @@
           show-in-column="persen_yoy"
           column="persen_yoy"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
     </DxDataGrid>
@@ -286,8 +288,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 const { onResult, onError, loading, refetch } = useQuery(
   queries.monalisa.gangguan.rekap.laporUlangGangguan,
   {
@@ -317,8 +319,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaRekapitulasiLaporUlangGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -352,10 +352,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()
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 4283066..51374f9 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -141,42 +143,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -268,8 +270,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaRecoveryTimeGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -304,10 +304,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()
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 58f3a8e..410faf4 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -141,42 +143,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -268,8 +270,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaResponseTimeGangguan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
@@ -304,10 +304,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()
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 0b78c06..a1af733 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -28,6 +29,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -94,14 +96,14 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -190,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(
@@ -248,8 +254,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaGangguanPerJenisKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index efb9e55..d4f304b 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -236,7 +238,7 @@
           summary-type="sum"
           show-in-column="total_durasi_response_time_bulan_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -244,7 +246,7 @@
           summary-type="sum"
           show-in-column="jumlah_keluhan_rpt_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -252,7 +254,7 @@
           summary-type="sum"
           show-in-column="rpt_keluhan_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -260,7 +262,7 @@
           summary-type="sum"
           show-in-column="total_rct_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -268,7 +270,7 @@
           summary-type="sum"
           show-in-column="jumlah_keluhan_rct_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -276,7 +278,7 @@
           summary-type="sum"
           show-in-column="rct_keluhan_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -284,7 +286,7 @@
           summary-type="sum"
           show-in-column="total_durasi_response_time_tahun_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -292,7 +294,7 @@
           summary-type="sum"
           show-in-column="jumlah_keluhan_rpt_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -300,7 +302,7 @@
           summary-type="sum"
           show-in-column="rpt_keluhan_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -308,7 +310,7 @@
           summary-type="sum"
           show-in-column="total_durasi_recovery_time_tahun_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -316,7 +318,7 @@
           summary-type="sum"
           show-in-column="jumlah_keluhan_rct_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -324,7 +326,7 @@
           summary-type="sum"
           show-in-column="rch_keluhan_sampai_bulan"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
@@ -414,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(
@@ -486,8 +492,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaJumlahDurasiRptRctKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index b50c923..c24df84 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -141,7 +143,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -149,7 +151,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -157,7 +159,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -165,7 +167,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -173,7 +175,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -181,7 +183,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxTotalItem
@@ -195,42 +197,42 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -354,17 +356,20 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaJumlahKaliKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
     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()
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index 0b8706c..d4c99bd 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -102,21 +104,21 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="jumlah_informasi"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -212,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`
@@ -280,8 +286,6 @@ const filterData = (params: any) => {
     }
 
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 2bad012..4d2e245 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -133,28 +135,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="mom_bulan_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_mom"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           column="yoy_tahun_kemarin"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
@@ -162,14 +164,14 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_yoy"
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxGroupItem
@@ -188,7 +190,7 @@
           show-in-column="mom_bulan_ini"
           column="mom_bulan_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -197,7 +199,7 @@
           show-in-column="persen_mom"
           column="persen_mom"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -206,7 +208,7 @@
           show-in-column="yoy_tahun_kemarin"
           column="yoy_tahun_kemarin"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -215,7 +217,7 @@
           show-in-column="yoy_tahun_ini"
           column="yoy_tahun_ini"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :show-in-group-footer="false"
@@ -224,7 +226,7 @@
           show-in-column="persen_yoy"
           column="persen_yoy"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -315,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(
@@ -384,8 +390,6 @@ const filterData = (params: any) => {
     }
 
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index a54dda6..ad86070 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -154,7 +156,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -162,7 +164,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -170,7 +172,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -178,7 +180,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -186,7 +188,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -194,7 +196,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxTotalItem
@@ -209,7 +211,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -217,7 +219,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -225,7 +227,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -233,7 +235,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -241,7 +243,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -249,7 +251,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -374,18 +376,20 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaRecoveryTimeKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
     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()
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index cb0e915..0567ec7 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -154,7 +156,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -162,7 +164,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -170,7 +172,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -178,7 +180,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -186,7 +188,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           :align-by-column="true"
@@ -194,7 +196,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
 
         <DxTotalItem
@@ -209,7 +211,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -217,7 +219,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -225,7 +227,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -233,7 +235,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -241,7 +243,7 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           :align-by-column="true"
@@ -249,7 +251,7 @@
           summary-type="avg"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatPercentage(e.value)"
         />
       </DxSummary>
 
@@ -405,18 +407,20 @@ const filterData = (params: any) => {
       data.value = queryResult.data.monalisaResponseTimeKeluhan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
     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()
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index b43971f..8e6539b 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -175,28 +177,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_gangguan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_recovery_keluhan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_keluhan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="aging_complaint_gangguan"
@@ -204,10 +206,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -216,10 +215,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -228,10 +224,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
 
@@ -243,7 +236,7 @@
           column="avg_durasi_recovery_gangguan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -253,7 +246,7 @@
           column="sla_gangguan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -263,7 +256,7 @@
           column="avg_durasi_recovery_keluhan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -273,7 +266,7 @@
           column="sla_keluhan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -284,10 +277,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -299,10 +289,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -314,10 +301,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
       </DxSummary>
@@ -382,6 +366,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -762,20 +747,23 @@ const getDetail = () => {
   // })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
@@ -818,8 +806,6 @@ const filterData = (params: any) => {
     }
 
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index 7b15af4..d366fa6 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -144,35 +146,35 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="tidak_terencana"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="bencana_alam"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="kpi_ens"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxGroupItem
@@ -183,7 +185,7 @@
           column="terencana"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -193,7 +195,7 @@
           column="tidak_terencana"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -203,7 +205,7 @@
           column="bencana_alam"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -213,7 +215,7 @@
           column="total"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -223,7 +225,7 @@
           column="kpi_ens"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
@@ -315,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(
@@ -350,8 +356,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.energyNotSalesBulanan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index c5f5f26..25263cb 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -150,28 +152,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="gangguan_total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="keluhan_berulang"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="keluhan_total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="komplain_pelanggan"
@@ -179,10 +181,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
 
@@ -194,7 +193,7 @@
           column="gangguan_berulang"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -204,7 +203,7 @@
           column="gangguan_total"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -214,7 +213,7 @@
           column="keluhan_berulang"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -224,7 +223,7 @@
           column="keluhan_total"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -235,10 +234,7 @@
           summary-type="sum"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
       </DxSummary>
@@ -337,10 +333,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(
@@ -380,8 +380,6 @@ const filterData = (params: any) => {
       })
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index b301c74..194351d 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -289,105 +291,105 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_keluhan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_keluhan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_keluhan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="delta_keluhan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="delta_gangguan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="delta_informasi"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_delta_keluhan"
@@ -395,10 +397,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -407,10 +406,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -419,10 +415,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -431,10 +424,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
 
@@ -446,7 +436,7 @@
           column="total_keluhan_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -456,7 +446,7 @@
           column="total_gangguan_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -466,7 +456,7 @@
           column="total_keluhan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -476,7 +466,7 @@
           column="total_gangguan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -486,7 +476,7 @@
           column="total_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -496,7 +486,7 @@
           column="total_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -506,7 +496,7 @@
           column="total_keluhan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -516,7 +506,7 @@
           column="total_gangguan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -526,7 +516,7 @@
           column="total_keluhan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -536,7 +526,7 @@
           column="total_gangguan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -546,7 +536,7 @@
           column="total_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -556,7 +546,7 @@
           column="total_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -566,7 +556,7 @@
           column="delta_keluhan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -576,7 +566,7 @@
           column="delta_gangguan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -586,7 +576,7 @@
           column="delta_informasi"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -597,10 +587,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -612,10 +599,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -627,10 +611,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -642,16 +623,13 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDetail()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -663,13 +641,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>
@@ -710,6 +688,7 @@
             :show-navigation-buttons="true"
           />
           <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
             :position="position"
             :show-indicator="showIndicator"
             :show-pane="showPane"
@@ -1090,20 +1069,23 @@ const getDetail = () => {
   // })
 }
 
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
 const showDetail = () => {
-  if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDetail.value = true
-
-    getDetail()
-  }
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  dataSelected.value = data
-
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
   showDetail()
 }
 
@@ -1145,8 +1127,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.penurunanJumlahKomplainBulanan
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index bc531a2..53a52cb 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -176,28 +178,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_gangguan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="avg_durasi_recovery_keluhan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="sla_keluhan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="aging_complaint_gangguan"
@@ -205,10 +207,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -217,10 +216,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -229,10 +225,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
 
@@ -244,7 +237,7 @@
           column="avg_durasi_recovery_gangguan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -254,7 +247,7 @@
           column="sla_gangguan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -264,7 +257,7 @@
           column="avg_durasi_recovery_keluhan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -274,7 +267,7 @@
           column="sla_keluhan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -285,10 +278,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -300,10 +290,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -315,10 +302,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
       </DxSummary>
@@ -415,10 +399,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(
@@ -449,8 +437,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.agingComplaintKumulatif
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index fe9c4dc..b763ef7 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -144,35 +146,35 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="tidak_terencana"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="bencana_alam"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="kpi_ens"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxGroupItem
@@ -183,7 +185,7 @@
           column="terencana"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -193,7 +195,7 @@
           column="tidak_terencana"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -203,7 +205,7 @@
           column="bencana_alam"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -213,7 +215,7 @@
           column="total"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -223,7 +225,7 @@
           column="kpi_ens"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
       </DxSummary>
 
@@ -315,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(
@@ -353,8 +359,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.energyNotSalesKumulatif
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index d188911..7ba9dc2 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -29,6 +30,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -150,28 +152,28 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="gangguan_total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="keluhan_berulang"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="keluhan_total"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="komplain_pelanggan"
@@ -179,10 +181,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
 
@@ -194,7 +193,7 @@
           column="gangguan_berulang"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -204,7 +203,7 @@
           column="gangguan_total"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -214,7 +213,7 @@
           column="keluhan_berulang"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -224,7 +223,7 @@
           column="keluhan_total"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -235,10 +234,7 @@
           summary-type="sum"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
       </DxSummary>
@@ -337,10 +333,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(
@@ -376,8 +376,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.kepatuhandanAkurasiDalamPelaporanKumulatif
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 83ed81a..c172a58 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -10,6 +10,7 @@
 
   <div id="data">
     <DxDataGrid
+      ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -30,6 +31,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -347,105 +349,105 @@
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_keluhan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_keluhan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_keluhan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_gangguan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="total_tahun_ini"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="delta_keluhan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="delta_gangguan"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="delta_informasi"
           summary-type="sum"
           display-format="{0}"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxTotalItem
           column="persen_delta_keluhan"
@@ -453,10 +455,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -465,10 +464,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -477,10 +473,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxTotalItem
@@ -489,10 +482,7 @@
           display-format="{0}"
           css-class="text-white !text-right"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
 
@@ -504,7 +494,7 @@
           column="total_keluhan_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -514,7 +504,7 @@
           column="total_gangguan_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -524,7 +514,7 @@
           column="total_keluhan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -534,7 +524,7 @@
           column="total_gangguan_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -544,7 +534,7 @@
           column="total_informasi_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -554,7 +544,7 @@
           column="total_tahun_sebelumnya"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -564,7 +554,7 @@
           column="total_keluhan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -574,7 +564,7 @@
           column="total_gangguan_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -584,7 +574,7 @@
           column="total_keluhan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -594,7 +584,7 @@
           column="total_gangguan_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -604,7 +594,7 @@
           column="total_informasi_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -614,7 +604,7 @@
           column="total_tahun_ini"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -624,7 +614,7 @@
           column="delta_keluhan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -634,7 +624,7 @@
           column="delta_gangguan"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -644,7 +634,7 @@
           column="delta_informasi"
           summary-type="sum"
           display-format="{0}"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+          :customize-text="(e: any) => formatNumber(e.value)"
         />
         <DxGroupItem
           css-class="!text-right"
@@ -655,10 +645,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -670,10 +657,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -685,10 +669,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
         <DxGroupItem
@@ -700,10 +681,7 @@
           summary-type="avg"
           display-format="{0}"
           :customize-text="
-            (e: any) =>
-              parseFloat(e.value.toString())
-                ? formatPercentage(parseFloat(e.value.toString()))
-                : '0%'
+            (e: any) => (parseFloat(e.value.toString()) ? formatPercentage(e.value) : '0%')
           "
         />
       </DxSummary>
@@ -802,10 +780,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(
@@ -841,8 +823,6 @@ const filterData = (params: any) => {
       data.value = queryResult.data.penurunanJumlahKomplainKumulatif
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
 
   onError((error) => {
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 4211126..793b8c5 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/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"
@@ -29,6 +30,7 @@
         :show-navigation-buttons="true"
       />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -151,13 +153,13 @@
       />
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showData()">
+        <p class="cursor-pointer !text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -169,58 +171,58 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showData()">
+        <p class="cursor-pointer !text-left">
           {{ data.text }}
         </p>
       </template>
     </DxDataGrid>
   </div>
 
-  <DetailDialog :open="showDetail" title="Daftar Pencarian Report Number" @on-close="closeDetail">
+  <DetailDialog :open="dialogDetail" title="Daftar Pencarian Report Number" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
-        <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">
@@ -256,8 +258,8 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 const filters = ref({
   type: '',
   keyword: '',
@@ -265,17 +267,25 @@ const filters = ref({
   periode: ''
 })
 
-const closeDetail = () => {
-  showDetail.value = false
+const closeDialog = () => {
+  dialogDetail.value = false
 }
 
-const showData = () => {
-  showDetail.value = true
+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]
-  console.log(selectedRowsData[0])
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+  }
+  showDetail()
 }
 
 const { onResult, onError, loading, refetch } = useQuery(
@@ -4968,8 +4978,6 @@ const filterData = (params: any) => {
       }
     }
     console.log(queryResult.data)
-    console.log(queryResult.loading)
-    console.log(queryResult.networkStatus)
   })
   onError((error) => {
     console.log(error)
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index a3045fd..ec01250 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/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"
@@ -23,6 +24,7 @@
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
+        shading-color="rgba(0,0,0,0.4)"
         :position="position"
         :show-indicator="showIndicator"
         :show-pane="showPane"
@@ -151,8 +153,8 @@ const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const dataDetail = ref<any>()
-const showDetail = ref(false)
+const dataSelected = ref<any>()
+const dialogDetail = ref(false)
 const loading = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -182,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) => {
diff --git a/src/main.ts b/src/main.ts
index 207399f..9f739c9 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,11 +27,12 @@ app.use(
     },
     TagsInput: {
       fixedClasses: {
-        input: 'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
+        input:
+          'appearance-none py-0 ring-0 border-0 outline-none focus:ring-0 focus:outline-none focus:shadow-none shadow-none w-full bg-transparent text-gray-800 text-base',
         inputWrapper: 'inline-flex flex-grow bg-transparent',
         tagsWrapper: 'flex flex-wrap overflow-hidden -my-2 py-1 px-1 w-full text-xs',
         tagDeleteButtonIcon: 'w-3 h-3',
-        tagLabel: 'px-3 text-xs',
+        tagLabel: 'px-3 text-xs'
       },
       classes: {
         input: 'min-h-[32px]',
@@ -39,8 +40,8 @@ app.use(
         tagsWrapper: '',
         tagDeleteButtonIcon: '',
         tagLabel: '',
-        trigger: 'bg-gray-200 rounded-lg mb-2 mt-2',
-      },
+        trigger: 'bg-gray-200 rounded-lg mb-2 mt-2'
+      }
     }
   })
 )
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 4869d68..63c172a 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -1,5 +1,84 @@
 //deploy vm
 import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
+import axios from 'axios'
+const controller = new AbortController()
+const url = import.meta.env.VITE_APP_GRAPHQL_ENDPOINT
+const instance = axios.create({
+  baseURL: url,
+  headers: {
+    Accept: 'application/json',
+    'Cache-Control': 'no-cache',
+    'Content-Type': 'application/json'
+  },
+  signal: controller.signal
+})
+
+export const getGangguanDetail = async (data: any) => {
+  // controller.abort()
+  return await instance.post('', {
+    query: `query detailGangguan(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idRegu: Int!
+          $media: String!
+          $idUlp: Int!
+          $namaRegional: String!
+        ) {
+          detailGangguan(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idRegu: $idRegu
+            idUlp: $idUlp
+            namaRegional: $namaRegional
+            media: $media
+          ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            no_laporan
+            pembuat_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
+            durasi_dispatch_time
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            is_marking
+            referensi_marking
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
+            keterangan_pelapor
+            media
+            nama_posko
+            jarak_closing
+            dispatch_oleh
+            diselesaikan_oleh
+            penyebab
+            tindakan
+            kode_gangguan
+            jenis_gangguan
+            nilai_rating
+          }
+        }`,
+    variables: data
+  })
+}
 
 export const apolloClient = () => {
   const httpLink = createHttpLink({
@@ -913,6 +992,7 @@ export const queries = {
             id_fasilitas
             sub_kelompok
             kode
+            equipment_id
             total
             total_selesai
             persen_selesai
@@ -969,16 +1049,14 @@ export const queries = {
             durasi_response_time
             durasi_recovery_time
             status_akhir
-            id_pelnomormeter
-            id_nomormeter
+            referensi_marking
+            idpel_nometer
             nama_pelapor
             alamat_pelapor
             no_telp_pelapor
             keterangan_pelapor
             tindakan
             penyebab
-            is_masih_proses
-            kwh_lost
           }
         }
       `,
@@ -1592,7 +1670,7 @@ export const queries = {
     gangguan: {
       rekap: {
         dispatchingTimeGangguan: gql`
-          query DaftarmonalisaDispatchingTimeGangguan(
+          query monalisaDispatchingTimeGangguan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -1619,7 +1697,7 @@ export const queries = {
           }
         `,
         rekapitulasiEnsGangguan: gql`
-          query DaftarmonalisaRekapitulasiEnsGangguan(
+          query monalisaRekapitulasiEnsGangguan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1653,7 +1731,7 @@ export const queries = {
           }
         `,
         gangguanBelumSelesai: gql`
-          query DaftarmonalisaGangguanBelumSelesai(
+          query monalisaGangguanBelumSelesai(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1683,7 +1761,7 @@ export const queries = {
           }
         `,
         gangguanPerJenisGangguan: gql`
-          query DaftarmonalisaGangguanPerJenisGangguan(
+          query monalisaGangguanPerJenisGangguan(
             #$nama_regional: String
             $idUid: Int
             $idUp3: Int
@@ -1707,7 +1785,7 @@ export const queries = {
           }
         `,
         jumlahDurasiRptRctGangguan: gql`
-          query DaftarmonalisaJumlahDurasiRptRctGangguan(
+          query monalisaJumlahDurasiRptRctGangguan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1745,7 +1823,7 @@ export const queries = {
           }
         `,
         jumlahKaliGangguan: gql`
-          query DaftarMonalisaJumlahKaliGangguan(
+          query monalisaJumlahKaliGangguan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -1761,6 +1839,7 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              nama_regional
               nama_uid
               nama_up3
               nama_ulp
@@ -1774,7 +1853,7 @@ export const queries = {
           }
         `,
         laporUlangGangguan: gql`
-          query DaftarmonalisaRekapitulasiLaporUlangGangguan(
+          query monalisaRekapitulasiLaporUlangGangguan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1807,7 +1886,7 @@ export const queries = {
           }
         `,
         recoveryTimeGangguan: gql`
-          query DaftarmonalisaRecoveryTimeGangguan(
+          query monalisaRecoveryTimeGangguan(
             #$regional: regional
             $idUid: Int
             $idUp3: Int
@@ -1834,7 +1913,7 @@ export const queries = {
           }
         `,
         responseTimeGangguan: gql`
-          query DaftarmonalisaResponseTimeGangguan(
+          query monalisaResponseTimeGangguan(
             #regional: String
             $idUid: Int
             $idUp3: Int
@@ -1865,7 +1944,7 @@ export const queries = {
     keluhan: {
       rekap: {
         jumlahKaliKeluhan: gql`
-          query DaftarMonalisaJumlahKaliKeluhan(
+          query monalisaJumlahKaliKeluhan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1898,7 +1977,7 @@ export const queries = {
           }
         `,
         recoveryTimeKeluhan: gql`
-          query DaftarmonalisaRecoveryTimeKeluhan(
+          query monalisaRecoveryTimeKeluhan(
             #$regional: String
             $idUlp: Int
             $idUid: Int
@@ -1929,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
@@ -1981,7 +2222,7 @@ export const queries = {
           }
         `,
         agingComplaintBulanan: gql`
-          query DaftarAgingComplaintBulanan(
+          query agingComplaintBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2015,7 +2256,7 @@ export const queries = {
           }
         `,
         energyNotSalesBulanan: gql`
-          query DaftarEnergyNotSalesBulanan(
+          query energyNotSalesBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2047,7 +2288,7 @@ export const queries = {
           }
         `,
         kepatuhandanAkurasiDalamPelaporanBulanan: gql`
-          query DaftarkepatuhandanAkurasiDalamPelaporanBulanan(
+          query kepatuhandanAkurasiDalamPelaporanBulanan(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2081,7 +2322,7 @@ export const queries = {
       },
       kumulatif: {
         penurunanJumlahKomplainKumulatif: gql`
-          query DaftarPenurunanJumlahKomplainKumulatif(
+          query penurunanJumlahKomplainKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2127,7 +2368,7 @@ export const queries = {
           }
         `,
         agingComplaintKumulatif: gql`
-          query DaftarAgingComplaintKumulatif(
+          query agingComplaintKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2161,7 +2402,7 @@ export const queries = {
           }
         `,
         energyNotSalesKumulatif: gql`
-          query DaftarEnergyNotSalesKumulatif(
+          query energyNotSalesKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
@@ -2193,7 +2434,7 @@ export const queries = {
           }
         `,
         kepatuhandanAkurasiDalamPelaporanKumulatif: gql`
-          query DaftarkepatuhandanAkurasiDalamPelaporanKumulatif(
+          query kepatuhandanAkurasiDalamPelaporanKumulatif(
             #$regional: String
             $idUid: Int
             $idUp3: Int
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
index 1b8df60..53dc383 100755
--- a/src/utils/numbers.ts
+++ b/src/utils/numbers.ts
@@ -12,17 +12,26 @@ const splitRoutePath = (routePath: string): string[] => {
     return routeArray
 }
 
-const formatNumber = (number: number): string => {
-    return new Intl.NumberFormat('id-ID').format(number)
+const formatNumber = (number: any): string => {
+    if (number == null || number === '' || isNaN(number)) {
+        return '0'
+    }else{
+        const value = parseFloat(number.toString())
+        return new Intl.NumberFormat('id-ID').format(value)
+    }
 }
 
 const formatPercentage = (number: string | number): string => {
-    const value = parseFloat(number.toString())
-    const result = `${value.toFixed(2)}`
-    if (result.includes('.00')) {
-        return `${result.replace('.00', '')}%`
-    } else {
-        return `${result}%`
+    if(number == null || number === ''){
+        return '0%'
+    }else{
+        const value = parseFloat(number.toString())
+        const result = `${value.toFixed(2)}`
+        if (result.includes('.00')) {
+          return `${result.replace('.00', '')}%`
+        } else {
+          return `${result}%`
+        }
     }
 }