diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index fd154d6..79c44c2 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -235,7 +235,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatText"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 5cc3c1f..9d50c19 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 05c4f66..03110f2 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column !text-right"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index fb40621..8bbac27 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 9dd8fc0..8dc25a2 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -49,7 +49,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
@@ -343,7 +343,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 59fcd98..c708906 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -66,7 +66,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index 3ac1c0f..c1b8bf4 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="cellCenter"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 06d37e8..e67ec9e 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -50,7 +50,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 5899c48..ac43960 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -47,7 +47,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -613,7 +613,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 01a9b1f..528fe39 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -194,7 +194,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index f86c6ee..7b112f6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -51,7 +51,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         data-field="no"
@@ -189,7 +189,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -572,8 +572,10 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (date.value != '') {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
@@ -601,10 +603,7 @@ const onExportingDetail = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
-
-    if (date.value != '') {
-      showDetail()
-    }
+    showDetail()
   }
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 6b076e2..96939a2 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -227,7 +227,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 0c1b48e..fe34a3d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -58,7 +58,7 @@
         <DxColumn
           :width="50"
           alignment="center"
-          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+          :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
           caption="a"
           css-class="custom-table-column"
           cell-template="formatNumber"
@@ -475,7 +475,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index d238afb..bb4025e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -54,7 +54,7 @@
         css-class="custom-table-column"
         :width="60"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="No"
       /> -->
       <DxColumn
@@ -479,7 +479,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 330d3d5..f44c636 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -364,7 +364,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index f0e6198..ffebe46 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -56,7 +56,7 @@
         data-field="no"
         caption="NO"
         css-class="custom-table-column"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         cell-template="formatNumber"
       />
       <DxColumn
@@ -566,7 +566,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index c1f4c16..8a8f771 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -54,7 +54,7 @@
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <DxColumn
         :width="120"
@@ -576,7 +576,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index ebc531e..12a9cbb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -52,7 +52,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
@@ -324,7 +324,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 8c2c79a..10313a9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -293,7 +293,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index b488913..b3a57b6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -50,7 +50,7 @@
         alignment="center"
         caption="NO"
         data-type="number"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         css-class="custom-table-column"
         cell-template="formatNumber"
       />
@@ -283,7 +283,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index 52f46b9..b0a3384 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index ef95ab9..3ad5d0c 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -52,7 +52,7 @@
         css-class="custom-table-column !align-top"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 8701a69..ad4c068 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 26da23b..e62143c 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -69,7 +69,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index c5444af..32a0163 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -69,7 +69,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index 961e948..5717b43 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 7a35133..2a4d353 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -53,7 +53,7 @@
         css-class="custom-table-column !align-top"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index e749689..63e6afa 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -467,7 +467,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -491,7 +491,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="dalam_proses_bidang"
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -500,7 +500,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="selesai_bidang_unit"
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -643,7 +643,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -652,7 +652,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index a1b1a90..3632643 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -49,7 +49,7 @@
       <DxColumn
         :width="100"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         data-field="no"
@@ -102,7 +102,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setDate(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -114,7 +114,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setDate(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
@@ -174,7 +174,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -508,6 +508,19 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const date = ref('2023-02-04')
+
+const setDate = (value: any) => {
+  if (isNumber(value)) {
+    const tanggal = value < 10 ? `0${value}` : value
+    const dateValue = filters.value.periode.split(' s/d ')
+    const dateYear = dateValue[0].split('-').reverse().join('-').slice(0, -2) + tanggal
+    console.log('date', dateYear)
+    date.value = dateYear
+  } else {
+    date.value = ''
+  }
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -556,7 +569,12 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    isSelesai: 0,
+    media: selected?.media ? selected?.media : '',
+    tanggal: date.value,
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -584,8 +602,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (date.value != '') {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index 32c7eda..8e0ee96 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -49,11 +49,10 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
-        data-field="no"
+        data-field="number"
         caption="No"
         cell-template="formatNumber"
       />
@@ -61,12 +60,22 @@
         :width="120"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
         v-if="filters.groupBy"
       />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Distribusi"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="Distribusi"
+        v-else
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -83,7 +92,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -93,7 +102,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -113,7 +122,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -251,8 +260,8 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Fungsi Bidang"
+          css-class="text-white !text-left"
         />
         <DxTotalItem
           summary-type="sum"
@@ -365,12 +374,48 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -382,7 +427,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left">
+        <p class="cursor-pointer !text-left" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -442,7 +487,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -783,6 +828,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -804,7 +856,19 @@ const filterData = async (params: any) => {
   await requestGraphQl(queries.keluhan.rekap.keluhanPenyelesaianPerFungsiBIidang, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        data.value = result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+        if (filters.value.groupBy) {
+          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang]
+            .sort((a, b) => a.nama_uid.localeCompare(b.nama_uid))
+            .map((item, index) => {
+              return { ...item, number: index + 1 }
+            })
+        } else {
+          data.value = [...result.data.data.rekapitulasiKeluhanPenyelesaianPerFungsiBidang].map(
+            (item, index) => {
+              return { ...item, number: index + 1 }
+            }
+          )
+        }
       } else {
         data.value = []
       }
@@ -830,7 +894,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -858,8 +928,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 5a8e652..46e47fd 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -49,7 +49,7 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
         data-type="number"
         data-field="number"
@@ -81,7 +81,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -91,7 +91,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -111,7 +111,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -247,17 +247,16 @@
 
       <DxSummary>
         <DxGroupItem
-          summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Jenis Keluhan"
+          css-class="!text-left"
           :show-in-group-footer="true"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -265,7 +264,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -273,7 +272,7 @@
           summary-type="avg"
           display-format="{0}%"
           column="persen_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -281,7 +280,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -289,7 +288,7 @@
           summary-type="avg"
           display-format="{0}%"
           column="persen_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(e.value)"
         />
@@ -297,7 +296,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -305,7 +304,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -313,7 +312,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -321,7 +320,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -329,7 +328,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -337,7 +336,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -345,7 +344,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -353,7 +352,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -361,7 +360,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -369,7 +368,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -377,7 +376,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
@@ -385,16 +384,15 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(e.value)"
         />
 
         <DxTotalItem
-          summary-type="sum"
           display-format="Total"
-          show-in-column="no"
-          css-class="text-white !text-right"
+          show-in-column="Jenis Keluhan"
+          css-class="text-white !text-left"
         />
         <DxTotalItem
           summary-type="sum"
@@ -518,13 +516,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -535,7 +533,43 @@
         </p>
       </template>
 
-      <template #formatText="{ data }">
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -596,7 +630,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -620,7 +654,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -629,7 +663,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -656,7 +690,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -710,7 +744,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -719,7 +753,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -728,7 +762,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -772,7 +806,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -781,7 +815,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -857,7 +891,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -875,7 +909,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -932,6 +966,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -986,7 +1027,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -1014,8 +1061,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 4566c6e..0e38f64 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -49,23 +49,33 @@
 
       <DxColumn
         css-class="custom-table-column"
-        :width="100"
+        :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
       />
-      <!-- <DxColumn
+      <DxColumn
         :width="120"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="0"
         name="NamaUID"
         v-if="filters.groupBy"
-      /> -->
+      />
+      <DxColumn
+        :width="120"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Distribusi"
+        css-class="custom-table-column"
+        :group-index="0"
+        name="Distribusi"
+        v-else
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -82,7 +92,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -92,7 +102,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -112,7 +122,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -250,7 +260,7 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="kelompok"
           css-class="text-white !text-left"
         />
         <DxTotalItem
@@ -375,13 +385,49 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -393,7 +439,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p class="!text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -453,7 +499,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -477,7 +523,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -486,7 +532,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -513,7 +559,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -567,7 +613,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -576,7 +622,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -585,7 +631,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -629,7 +675,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -638,7 +684,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -714,7 +760,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -732,7 +778,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -788,6 +834,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -835,7 +888,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -863,8 +922,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 51a6739..6eb926d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -48,13 +48,12 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="100"
+        :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         data-type="number"
-        data-field="no"
         cell-template="formatNumber"
       />
       <DxColumn
@@ -69,11 +68,20 @@
         :width="170"
         alignment="center"
         data-field="nama_uid"
-        caption="Nama UID"
+        caption="UID"
         css-class="custom-table-column"
         :group-index="0"
         v-if="filters.groupBy"
       />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field=""
+        caption="Seluruh Distribusi"
+        css-class="custom-table-column"
+        :group-index="0"
+        v-else
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
           :width="150"
@@ -82,7 +90,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -92,7 +100,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -112,7 +120,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -250,7 +258,7 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="tanggal_lapor"
           css-class="text-white !text-left"
         />
         <DxTotalItem
@@ -375,17 +383,53 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #percent="{ data }">
-        <p class="cursor-pointer">{{ data.text }}%</p>
+        <p class="cursor-pointer" @click="setAgreementDialog(false, 0)">{{ data.text }}%</p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -397,7 +441,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -457,7 +501,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -481,7 +525,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -490,7 +534,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -517,7 +561,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -571,7 +615,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -580,7 +624,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -589,7 +633,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -633,7 +677,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -642,7 +686,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -718,7 +762,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -736,7 +780,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -777,6 +821,7 @@ import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { reformatDate } from '@/utils/texts'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -792,6 +837,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -839,7 +891,15 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: selected?.tanggal_lapor
+      ? reformatDate(selected?.tanggal_lapor, 'dd/MM/yyyy', 'yyyy-MM-dd')
+      : '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -867,8 +927,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 3a11b01..06c3f6a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -47,7 +47,7 @@
       <DxColumnFixing :enabled="true" />
 
       <DxColumn
-        :width="100"
+        :width="50"
         alignment="center"
         caption="NO"
         css-class="custom-table-column"
@@ -81,7 +81,7 @@
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberLaporanTotal"
         />
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
@@ -91,7 +91,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberLaporanJmlSelesai"
           />
           <DxColumn
             :width="70"
@@ -111,6 +111,7 @@
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
+            cell-template="formatNumberLaporanJmlBelumSelesai"
           />
           <DxColumn
             :width="70"
@@ -248,7 +249,7 @@
         <DxGroupItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="nama_ulp"
           css-class="!text-left"
           :show-in-group-footer="true"
         />
@@ -392,7 +393,7 @@
         <DxTotalItem
           summary-type="sum"
           display-format="Total"
-          show-in-column="no"
+          show-in-column="nama_ulp"
           css-class="text-white !text-left"
         />
         <DxTotalItem
@@ -517,13 +518,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right">
+        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -534,7 +535,43 @@
         </p>
       </template>
 
-      <template #formatText="{ data }">
+      <template #formatNumberLaporanTotal="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberLaporanJmlBelumSelesai="{ data }">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -595,7 +632,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -619,7 +656,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_response"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -628,7 +665,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="waktu_recovery"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -655,7 +692,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -709,7 +746,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -718,7 +755,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -727,7 +764,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -771,7 +808,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Dalam Proses Bidang:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.dalam_proses_bidang"
+            :value="dataSubSelected?.waktu_response"
             class-name="flex-1"
           />
         </div>
@@ -780,7 +817,7 @@
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Selesai Bidang Unit:</h3>
           <InputText
             :readonly="true"
-            :value="dataSubSelected?.selesai_bidang_unit"
+            :value="dataSubSelected?.waktu_recovery"
             class-name="flex-1"
           />
         </div>
@@ -856,7 +893,7 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Rayon:</h3>
-          <InputText :readonly="true" :value="dataSubSelected?.rayon" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -874,7 +911,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -931,6 +968,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const progressSelected = ref(0)
+
+const setAgreementDialog = (status: boolean, progress: number) => {
+  agreeToShowDialog.value = status
+  progressSelected.value = progress
+}
 
 const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
@@ -984,7 +1028,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
@@ -1012,8 +1062,10 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
index 4039e95..399ca8e 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_RatingPerUnit.vue
@@ -44,7 +44,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 8b6e500..c0501fb 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -48,7 +48,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index d066976..20571fd 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -48,7 +48,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
       />
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 414653a..5a43aac 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -183,7 +183,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
index ff912e3..fbea456 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.vue
@@ -48,7 +48,7 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index 27792ae..bff808a 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -377,7 +377,13 @@ const getDetail = async () => {
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    isSelesai: 0,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
   }
 
   loadingSubData.value = true
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
index 553ad85..4db83e7 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_GangguanPerJenisKeluhan.vue
@@ -48,7 +48,7 @@
       <DxColumn
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 1b60842..8af0c4c 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -383,7 +383,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 4a9c960..d3c4c62 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -707,7 +707,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 85d159f..d19f71e 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -49,7 +49,7 @@
         css-class="custom-table-column"
         :width="50"
         alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
         cell-template="formatNumber"
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index e3b2a78..f24e66e 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -436,6 +436,14 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             kelompok
             total
             total_selesai
@@ -678,6 +686,7 @@ export const queries = {
             keterangan_pelapor
             respon_pelanggan
             is_selesai
+            uraian
           }
         }
       `
diff --git a/src/utils/texts.ts b/src/utils/texts.ts
index 8524300..a8a8df3 100755
--- a/src/utils/texts.ts
+++ b/src/utils/texts.ts
@@ -62,4 +62,40 @@ const getMonthNumber = (monthName: string) => {
   ]
   return months.indexOf(monthName) + 1
 }
-export { splitRoutePath, getMonthName, getMonthNameShort, getMonthNumber }
+
+const reformatDate = (inputDate: string, originalFormat: string, targetFormat: string): string => {
+  // Parsing tanggal dari format asli
+  const originalDate = parseDate(inputDate, originalFormat)
+
+  // Format tanggal dalam format yang diinginkan
+  const formattedDate = formatDateToString(originalDate, targetFormat)
+
+  return formattedDate
+}
+
+const parseDate = (inputDate: string, format: string): Date => {
+  // Pisahkan tanggal, bulan, dan tahun dari input berdasarkan format
+  const parts = inputDate.split(/[^0-9]+/)
+  const formatParts = format.split(/[^a-zA-Z]+/)
+
+  // Buat objek tanggal baru dengan mengambil nilai dari format yang diberikan
+  const dateValues: any = {}
+  for (let i = 0; i < formatParts.length; i++) {
+    if (formatParts[i]) {
+      dateValues[formatParts[i]] = parseInt(parts[i], 10)
+    }
+  }
+
+  // Format tanggal dalam format yang diinginkan
+  return new Date(dateValues['yyyy'], dateValues['MM'] - 1, dateValues['dd'])
+}
+
+const formatDateToString = (date: Date, format: string): string => {
+  const day = date.getDate().toString().padStart(2, '0')
+  const month = (date.getMonth() + 1).toString().padStart(2, '0')
+  const year = date.getFullYear().toString()
+
+  // Ganti placeholder dengan nilai tanggal, bulan, dan tahun
+  return format.replace('yyyy', year).replace('MM', month).replace('dd', day)
+}
+export { reformatDate, splitRoutePath, getMonthName, getMonthNameShort, getMonthNumber }