diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index b4e12cd..7b112f6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -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/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index e489ee2..3632643 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -602,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) => {
@@ -638,10 +640,7 @@ const onExporting = (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/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 8eba582..6eb926d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -821,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)
@@ -890,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
@@ -918,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 958d451..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>
@@ -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/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 }