diff --git a/.env.development b/.env.development
index f197ea6..d701d3e 100755
--- a/.env.development
+++ b/.env.development
@@ -3,6 +3,6 @@ VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
 # VITE_APP_GRAPHQL_ENDPOINT=http://10.8.0.13:32169/graphql
-# VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
-VITE_APP_GRAPHQL_ENDPOINT=http://10.8.0.12:32169/graphql
+VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
+# VITE_APP_GRAPHQL_ENDPOINT=http://10.8.0.12:32169/graphql
 VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181
\ No newline at end of file
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 9ca4969..4f74bdb 100755
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -32,7 +32,6 @@ const regional = ref({ id: 0, name: regionalPlaceholder })
 const emit = defineEmits(['update:filters'])
 // Find index of January
 const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
-console.log(bulanSelected)
 // Remove January if found
 if (bulanIndex !== -1) {
   months.splice(bulanIndex, 1)
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index fa247eb..1769ef4 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -11,6 +11,7 @@
 
   <div id="data">
     <DxDataGrid
+      @cell-click="onCellClicked"
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
@@ -642,6 +643,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -661,6 +663,10 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const groupIndex = ref(0)
+const groupData = ref<any>(null)
+const groupDialog = ref(false)
+const agreeToShowDialog = ref(false)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -687,6 +693,47 @@ const grouping = ref<any[]>([
   }
 ])
 
+const parameterRequest = ref<any>({
+  type: null,
+  tahun: new Date().getFullYear(),
+  bulan: new Date().getMonth()
+})
+
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    console.table(e.column.dataField)
+    if (e.column.dataField == 'avg_durasi_recovery_gangguan') {
+      setParameterRequest({
+        type: 'gangguan',
+        tahun: currentYear,
+        bulan: currentMonth
+      })
+    } else if (e.column.dataField == 'avg_durasi_recovery_keluhan') {
+      setParameterRequest({
+        type: 'keluhan',
+        tahun: currentYear,
+        bulan: currentMonth
+      })
+    }
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.type != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
@@ -708,26 +755,61 @@ const onExportingDetail = (e: any) => {
 }
 
 const getDetail = async () => {
-  const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const 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
+  var query = {
+    bulan: parameterRequest.value.bulan,
+    tahun: parameterRequest.value.tahun,
+    namaRegional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+
+  if (groupDialog.value) {
+    if (grouping.value[groupIndex.value].data == 'nama_regional') {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
+      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 = {
+      ...query,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
   }
 
   loadingSubData.value = true
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(
+    parameterRequest.value.type == 'gangguan'
+      ? queries.keluhan.rekap.rekapKeluhanAllDetail
+      : queries.keluhan.rekap.rekapKeluhanAllDetail,
+    query
+  )
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        if (parameterRequest.value.type == 'gangguan') {
+          dataSub.value = result.data.data.detailKeluhanAll
+        } else {
+          dataSub.value = result.data.data.detailKeluhanAll
+        }
       } else {
         dataSub.value = []
       }
@@ -749,7 +831,9 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  getDetail()
+  if (agreeToShowDialog.value) {
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {