diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index baca03e..5899c48 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -28,15 +28,6 @@
     >
       <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <!-- <DxPaging :page-size="40" :enabled="true" />
-      <DxPager
-        :visible="true"
-        :allowed-page-sizes="[20, 40, 60]"
-        display-mode="full"
-        :show-page-size-selector="true"
-        :show-info="true"
-        :show-navigation-buttons="true"
-      /> -->
       <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index cec10e5..e749689 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -9,6 +9,7 @@
   </Filters>
   <div>
     <DxDataGrid
+      @cell-click="onCellClicked"
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
@@ -23,10 +24,8 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" />
       <DxSelection mode="single" />
-      <DxPaging :enabled="false" />
-      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
       <DxLoadPanel
         shading-color="rgba(0,0,0,0.4)"
         :position="position"
@@ -42,7 +41,6 @@
         :formats="['pdf', 'xlsx', 'document']"
         :allow-export-selected-data="false"
       />
-      <!-- <DxColumnFixing :enabled="true" /> -->
 
       <DxColumn
         alignment="center"
@@ -493,7 +491,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="dalam_proses_bidang"
             caption="Dalam Proses Bidang"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -502,7 +500,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="selesai_bidang_unit"
             caption="Selesai Bidang Unit"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -529,7 +527,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_akhir"
             caption="Status"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -583,7 +581,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -592,7 +590,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="uraian"
             caption="Uraian"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -601,7 +599,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="respon_pelanggan"
             caption="Respon Pelanggan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -621,7 +619,7 @@
           </template>
 
           <template #formatTime="{ data }">
-            <p>
+            <p class="text-right cursor-pointer">
               {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
             </p>
           </template>
@@ -730,7 +728,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">
@@ -748,7 +746,7 @@
           <InputText
             :readonly="true"
             type="textarea"
-            :value="dataSubSelected?.response_pelanggan"
+            :value="dataSubSelected?.respon_pelanggan"
             class-name="flex-1"
           />
         </div>
@@ -804,8 +802,77 @@ 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 groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+
+const onCellClicked = (e: any) => {
+  console.log('cell clicked', e)
+  //   console.log('group cell clicked', e.column.caption)
+  //   console.log('value', e.values[e.row.groupIndex])
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    setAgreementDialog(e.column.caption)
+    if (e.row.groupIndex == 0) {
+      //
+    } else if (e.row.groupIndex == 1) {
+      if (e.row.isExpanded) {
+        const data = e.data.items[0].collapsedItems[0].items[0]
+        groupData.value = data
+      } else {
+        const data = e.data.collapsedItems[0].items[0].items[0]
+        groupData.value = data
+      }
+    } else if (e.row.groupIndex == 2) {
+      if (e.row.isExpanded) {
+        const data = e.data.items[0].collapsedItems[0]
+        groupData.value = data
+      } else {
+        const data = e.data.collapsedItems[0].items[0]
+        groupData.value = data
+      }
+    } else if (e.row.groupIndex == 3) {
+      if (e.row.isExpanded) {
+        const data = e.data.items[0]
+        groupData.value = data
+      } else {
+        const data = e.data.collapsedItems[0]
+        groupData.value = data
+      }
+    }
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+const setAgreementDialog = (column: string) => {
+  if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
+    agreeToShowDialog.value = true
+    if (column == 'Total') {
+      progressSelected.value = 0
+    } else if (column == 'Selesai') {
+      progressSelected.value = 1
+    } else {
+      progressSelected.value = 2
+    }
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+  dataSelected.value = null
+  dataSubSelected.value = null
+}
 
 const filterData = async (params: any) => {
+  resetData()
   const { ulp, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
@@ -842,16 +909,67 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : 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
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
+    isSelesai: progressSelected.value,
+    media: '',
+    tanggal: '',
+    namaIssuetype: '',
+    namaSubissuetype: ''
+  }
+
+  if (groupDialog.value) {
+    if (groupIndex.value == 0) {
+      query = {
+        ...query,
+        isSelesai: progressSelected.value
+      }
+    } else if (groupIndex.value == 1) {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 2) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (groupIndex.value == 3) {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : 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,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      media: selected?.media ? selected?.media : '',
+      isSelesai: progressSelected.value,
+      tanggal: '',
+      namaIssuetype: '',
+      namaSubissuetype: ''
+    }
   }
 
   loadingSubData.value = true
@@ -881,10 +999,12 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  dataSub.value = []
-  dataSubSelected.value = null
-  dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 1e9b312..e3b2a78 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -636,6 +636,12 @@ export const queries = {
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
+          $namaRegional: String
+          $isSelesai: Int!
+          $media: String
+          $tanggal: String
+          $namaIssuetype: String
+          $namaSubissuetype: String
         ) {
           detailKeluhanAll(
             dateFrom: $dateFrom
@@ -643,14 +649,25 @@ export const queries = {
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
+            namaRegional: $namaRegional
+            isSelesai: $isSelesai
+            media: $media
+            tanggal: $tanggal
+            namaIssuetype: $namaIssuetype
+            namaSubissuetype: $namaSubissuetype
           ) {
             id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             no_laporan
-            pembuat_laporan
             waktu_lapor
             waktu_response
             waktu_recovery
-            durasi_dispatch_time
             durasi_response_time
             durasi_recovery_time
             status_akhir
@@ -659,14 +676,8 @@ export const queries = {
             alamat_pelapor
             no_telp_pelapor
             keterangan_pelapor
-            media
-            jarak_closing
-            dispatch_oleh
-            diselesaikan_oleh
-            penyebab
-            tindakan
-            kode_gangguan
-            jenis_gangguan
+            respon_pelanggan
+            is_selesai
           }
         }
       `