diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 72192c8..a023f76 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      @cell-click="onCellClicked"
       ref="dataGridRef"
       :data-source="data"
       v-if="loadingData == false"
@@ -21,7 +22,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -34,30 +35,15 @@
       />
       <DxColumnFixing :enabled="true" />
       <DxColumn
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field=""
-        caption="Semua Unit"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="id_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="1"
-        :calculate-display-value="(dataRow: any) => dataRow.nama_uid"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="id_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="2"
-        :calculate-display-value="(dataRow: any) => dataRow.nama_up3"
+        :group-index="index"
       />
       <DxColumn
         alignment="center"
@@ -365,7 +351,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="wo_pln_mobile"
@@ -374,7 +360,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="wo_comcen"
@@ -383,7 +369,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="wo_total"
@@ -392,7 +378,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="rekomendasi_mendatangkan_petugas"
@@ -400,7 +386,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="rekomendasi_diberikan_ke_pelanggan"
@@ -408,7 +394,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="dpld"
@@ -416,7 +402,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="history_p2lt"
@@ -424,7 +410,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
       </DxSummary>
     </DxDataGrid>
@@ -944,6 +930,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Ctt/CTT_LaporanCttKwhPeriksa'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -959,6 +946,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
 const requirementData = ref<any>({
   woType: 0,
   rekomendasiSistem: 0,
@@ -971,9 +959,100 @@ const reportMeta = ref({
   ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
   periode: ''
 })
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+const groupIndex = ref(0)
+
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
 
 const setRequirementData = (data: any) => (requirementData.value = data)
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    agreeToShowDialog.value = true
+
+    if (e.column.dataField == 'wo_cc123') {
+      setRequirementData({
+        woType: 1,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'wo_pln_mobile') {
+      setRequirementData({
+        woType: 2,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'wo_comcen') {
+      setRequirementData({
+        woType: 3,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'wo_total') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'rekomendasi_mendatangkan_petugas') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 1,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'rekomendasi_diberikan_ke_pelanggan') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 2,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'dpld') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 0,
+        dlpd: 1,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'history_p2lt') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 1
+      })
+    } else {
+      agreeToShowDialog.value = false
+    }
+
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
 let cc123 = 0
 let plnMobile = 0
 let comcen = 0
@@ -1044,6 +1123,46 @@ const filterData = async (params: any) => {
   const { posko, uid, up3, ulp } = params
   const dateValue = params.periode.split(' s/d ')
 
+  var groupList: any[] = [
+    {
+      data: '',
+      caption: 'Semua Unit'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Semua Unit') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -1081,18 +1200,17 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  let 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,
-    idPosko: selected?.id_posko ? selected?.id_posko : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
     tipeWo: requirementData.value?.woType ? requirementData.value?.woType : '',
     rekomendasiSistem: requirementData.value?.rekomendasiSistem
       ? requirementData.value?.rekomendasiSistem == 1
@@ -1103,6 +1221,44 @@ const getDetail = async () => {
     isHistoriP2tl: requirementData.value?.historyP2tl ? requirementData.value?.historyP2tl : 0
   }
 
+  if (groupDialog.value) {
+    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 = {
+      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 : '',
+      tipeWo: requirementData.value?.woType ? requirementData.value?.woType : '',
+      rekomendasiSistem: requirementData.value?.rekomendasiSistem
+        ? requirementData.value?.rekomendasiSistem == 1
+          ? 'Mendatangkan Petugas'
+          : 'Diberikan ke Pelanggan'
+        : '',
+      isDlpd: requirementData.value?.dlpd ? requirementData.value?.dlpd : 0,
+      isHistoriP2tl: requirementData.value?.historyP2tl ? requirementData.value?.historyP2tl : 0
+    }
+  }
+
   loadingSubData.value = true
   await requestGraphQl(queries.cttKwhPeriksa.laporanCttKwhPeriksaDetail, query)
     .then((result) => {
@@ -1128,8 +1284,11 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSub.value = []
   dataSubSelected.value = null
-  getDetail()
+  if (agreeToShowDialog.value) {
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index c34e990..4995ce7 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -4972,7 +4972,6 @@ export const queries = {
         $rekomendasiSistem: String
         $isDlpd: Int!
         $idUlp: Int!
-        $idPosko: Int!
         $idUid: Int!
         $idUp3: Int!
         $namaRegional: String
@@ -4985,7 +4984,6 @@ export const queries = {
           rekomendasiSistem: $rekomendasiSistem
           isDlpd: $isDlpd
           idUlp: $idUlp
-          idPosko: $idPosko
           idUid: $idUid
           idUp3: $idUp3
           namaRegional: $namaRegional