diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 187a810..8e4ec78 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -18,6 +18,7 @@
     :word-wrap-enabled="true"
     :data-source="data"
   >
+    <DxGrouping expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -358,6 +359,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index af5182c..8d4a7c9 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -18,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -438,6 +439,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Cico/LaporanCICO.vue b/src/components/Pages/Cico/LaporanCICO.vue
index dd214cc..e150440 100755
--- a/src/components/Pages/Cico/LaporanCICO.vue
+++ b/src/components/Pages/Cico/LaporanCICO.vue
@@ -111,13 +111,13 @@
       />
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -181,9 +181,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Daftar Detail Jumlah WO Gangguan Individu"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -204,10 +204,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -829,11 +829,11 @@ const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
-const dialogDataSelected = ref(false)
+const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const closedialogDetail = () => (dialogDetail.value = false)
 
 const getDetail = () => {
   loadingSubData.value = true
@@ -857,8 +857,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
@@ -873,11 +871,11 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
-const showDialogDataSelected = () => {
+const showDetail = () => {
   if (dataSelected.value != null) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDataSelected.value = true
+    dialogDetail.value = true
     getDetail()
   }
 }
@@ -913,7 +911,7 @@ const onExporting = (e: any) => {
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   dataSelected.value = selectedRowsData[0]
-  showDialogDataSelected()
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 553ee14..f0f8607 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -20,10 +20,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index ddca80d..6e744e7 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -21,10 +21,10 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index 4293075..ed7932e 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -20,10 +20,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index ef27623..021fbbc 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -20,10 +20,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index 0ffd1b2..09bb77f 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -36,10 +36,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index b38035f..7338532 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -20,10 +20,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index 8463394..38615e0 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -20,10 +20,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 37ce3cf..9467ca8 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -23,7 +23,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxGrouping :auto-expand-all="false" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <!-- <DxPaging :page-size="40" :enabled="true" />
       <DxPager
@@ -320,13 +320,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -338,7 +338,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p @click="showDialogDataSelected()">
+        <p @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -510,9 +510,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Detail Gangguan All"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -533,10 +533,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -1038,12 +1038,13 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
 const filterData = (params: any) => {
+  loadingData.value = true
   const { posko, uid, up3 } = params
   const dateValue = params.periode.split(' s/d ')
 
@@ -1102,8 +1103,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
@@ -1118,13 +1117,15 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
-
-const showDialogDataSelected = () => {
+const currentDataSelected = ref<any>(null)
+const showDetail = () => {
   if (dataSelected.value != null) {
-    dataSub.value = []
-    dataSubSelected.value = null
-    dialogDataSelected.value = true
-    getDetail()
+    if (currentDataSelected.value == dataSelected.value) {
+      dataSub.value = []
+      dataSubSelected.value = null
+      dialogDetail.value = true
+      getDetail()
+    }
   }
 }
 
@@ -1262,8 +1263,11 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
-  showDialogDataSelected()
+  if (dataSelected.value != selectedRowsData[0]) {
+    dataSelected.value = selectedRowsData[0]
+    currentDataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 9f2cb9b..4052e95 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -163,10 +164,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -496,7 +497,8 @@ import {
   DxSelection,
   DxSummary,
   DxGroupItem,
-  DxPager
+  DxPager,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -549,8 +551,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index b776ae5..eface3a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -157,10 +157,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -538,8 +538,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index b1dbbcf..ddb089d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -437,10 +437,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -813,8 +813,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index 01a096c..2bb3eb4 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -45,7 +45,7 @@
       />
       <DxColumnFixing :enabled="true" />
       <DxGroupPanel :visible="true" />
-      <DxGrouping :auto-expand-all="true" />
+      <DxGrouping :auto-expand-all="true" :context-menu-enabled="true" expand-mode="rowClick" />
 
       <DxColumn
         :width="60"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 50d5149..cd74093 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -27,6 +27,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -448,10 +449,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -777,7 +778,8 @@ import {
   DxSelection,
   DxSummary,
   DxGroupItem,
-  DxPager
+  DxPager,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -887,10 +889,10 @@ const getDetail = () => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
-    idUid: ref.id_uid,
-    idUp3: ref.id_up3,
-    idEquipment: ref?.id_equipment ? ref.id_equipment : 0
+    posko: filters.value?.id_posko ? filters.value.id_posko : 0,
+    idUid: filters.value?.id_uid ? filters.value.id_uid : 0,
+    idUp3: filters.value?.id_up3 ? filters.value.id_up3 : 0,
+    idEquipment: ref?.kode ? ref.kode : 0
   }
 
   const { onResult, onError, loading, refetch } = useQuery(
@@ -898,8 +900,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 55b1b05..9890ec0 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -17,7 +17,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxGrouping :auto-expand-all="false" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -26,8 +26,7 @@
         :show-indicator="showIndicator"
         :show-pane="showPane"
         :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
         :enabled="true"
       />
 
@@ -272,19 +271,19 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showData()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showData()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -304,7 +303,7 @@
   </div>
 
   <DetailDialog
-    :open="showDetail"
+    :open="dialogDetail"
     title="Detail Rekapitulasi Koreksi Transaksi Individual"
     @on-close="closeDetail"
     :full-width="true"
@@ -327,10 +326,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -962,7 +961,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type18 from '@/components/Form/FiltersType/Type18.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -989,7 +988,11 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
 
+const client = apolloClient()
+provideApolloClient(client)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -998,15 +1001,62 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref()
 const dataSubSelected = ref()
-const showDetail = ref(false)
+const dialogDetail = ref(false)
+const loadingData = ref(false)
 const loadingSubData = ref(false)
 
-const showData = () => {
-  showDetail.value = true
+const getDetail = () => {
+  loadingSubData.value = true
+  const dateValue = filters.value.periode.split(' s/d ')
+  const ref = 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),
+    posko: ref?.id_posko ? ref?.id_posko : 0,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
+  }
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanAllDetail,
+    query
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailGangguan
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+
+const showDetail = () => {
+  if (dataSelected.value != null) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    dialogDetail.value = true
+    getDetail()
+  }
 }
 
 const closeDetail = () => {
-  showDetail.value = false
+  dialogDetail.value = false
 }
 
 const onExporting = (e: any) => {
@@ -1040,38 +1090,31 @@ const onExporting = (e: any) => {
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   dataSelected.value = selectedRowsData[0]
-  console.log(data)
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = selectedRowsData[0]
-  console.log(dataSubSelected)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
-  {
-    dateFrom: new Date().toISOString().slice(0, 10),
-    dateTo: new Date().toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
-  refetch({
-    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),
-    posko: posko ? posko.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
+    {
+      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),
+      idPosko: posko ? posko.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0
+    }
+  )
 
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
@@ -1081,10 +1124,16 @@ const filterData = (params: any) => {
     console.log(queryResult.loading)
     console.log(queryResult.networkStatus)
   })
+
   onError((error) => {
     console.log(error)
   })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }
+
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index b2ed3eb..97d551a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -27,6 +27,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -533,10 +534,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -852,6 +853,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPager,
   DxPaging,
@@ -914,8 +916,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index 16f8a88..db48b8a 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -292,10 +292,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -676,8 +676,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index ac5c386..2f3ae5b 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -18,6 +18,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -254,10 +255,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -606,6 +607,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPager,
   DxPaging,
@@ -669,8 +671,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index a2bf2a7..9c8f11c 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -246,10 +246,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -661,8 +661,6 @@ const getDetail = () => {
     query
   )
 
-  refetch(query)
-
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       dataSub.value = queryResult.data.detailGangguan
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
index bec32a6..545e992 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_BerdasarMedia.vue
@@ -21,10 +21,10 @@
       :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index 3ef44c5..8998182 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -21,10 +21,10 @@
       :word-wrap-enabled="true"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 782a978..d110e33 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -21,10 +21,10 @@
       :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
index 28b7830..1b01b6c 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_RecoveryTime.vue
@@ -37,10 +37,10 @@
       :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
index 5f856ba..6b38773 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_ResponseTime.vue
@@ -37,10 +37,10 @@
       :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
index dcb1fe3..9b79ad9 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_STIDP.vue
@@ -21,10 +21,10 @@
       :word-wrap-enabled="false"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
index 5ec3c3a..ecea426 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_SelesaiCC.vue
@@ -21,10 +21,10 @@
       :word-wrap-enabled="true"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 2ddf17b..ea6e26c 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -24,7 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :auto-expand-all="false" />
+      <DxGrouping :auto-expand-all="false" :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -395,13 +395,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -413,7 +413,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-left" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -421,9 +421,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Detail Rekapitulasi Keluhan All"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -444,10 +444,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -800,8 +800,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -851,8 +851,8 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
 }
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index a817bfe..891f2dd 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -100,7 +100,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -112,7 +112,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -120,9 +120,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Rekapitulasi Keluhan Berdasarkan Media"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -143,10 +143,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -500,8 +500,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -554,8 +554,8 @@ const filterData = (params: any) => {
 
 const getDetail = () => {}
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   console.log(dataSelected.value)
   getDetail()
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index ab97df9..1f7686f 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -362,12 +363,12 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -379,7 +380,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-left" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -387,9 +388,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Rekapitulasi Keluhan Per Fungsi Bidang"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -410,10 +411,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -752,7 +753,8 @@ import {
   DxTotalItem,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -773,8 +775,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -826,8 +828,8 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
 }
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index a9fbc8d..65c093b 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -516,13 +517,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -534,7 +535,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -542,9 +543,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Rekapitulasi Keluhan Per Jenis Keluhan"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -565,10 +566,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -900,7 +901,8 @@ import {
   DxScrolling,
   DxSearchPanel,
   DxSelection,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -921,8 +923,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -975,8 +977,8 @@ const getDetail = () => {
   // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
 }
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index ff8fc60..74e9283 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -373,13 +374,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -391,7 +392,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="!text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -399,9 +400,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Detail Rekapitulasi  Keluhan Per Kelompok Keluhan"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -422,10 +423,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -758,7 +759,8 @@ import {
   DxTotalItem,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -779,8 +781,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -833,8 +835,8 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerKelompokKeluhan
 }
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index c62e1ca..d7f77e9 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -372,17 +373,17 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #percent="{ data }">
-        <p class="cursor-pointer" @click="showDialogDataSelected()">{{ data.text }}%</p>
+        <p class="cursor-pointer" @click="showDetail()">{{ data.text }}%</p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -394,7 +395,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -402,9 +403,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Rekapitulasi Keluhan Per Tanggal"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -425,10 +426,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -761,7 +762,8 @@ import {
   DxTotalItem,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -782,8 +784,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -833,8 +835,8 @@ const getDetail = () => {
   dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerTanggal
 }
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 1e1c270..6d72ec1 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -515,13 +516,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="showDialogDataSelected()">
+        <p class="cursor-pointer !text-right" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="!text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -533,7 +534,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -541,9 +542,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Rekapitulasi Keluhan Per Unit"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -564,10 +565,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -899,7 +900,8 @@ import {
   DxScrolling,
   DxSearchPanel,
   DxSelection,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -919,8 +921,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>()
 const dataSubSelected = ref<any>()
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -970,8 +972,8 @@ const getDetail = () => {
   // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
 }
 
-const showDialogDataSelected = () => {
-  dialogDataSelected.value = true
+const showDetail = () => {
+  dialogDetail.value = true
   console.log(dataSelected.value)
   getDetail()
 }
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 3f9d4fe..f805c3f 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -18,10 +18,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 3c740da..9559694 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -18,10 +18,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index 9fcbd78..48c6b33 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -209,6 +210,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 8fb0985..2272075 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -153,10 +153,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
index 93e158f..83a3183 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahDDRPTRCTGangguan.vue
@@ -23,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -356,6 +357,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
index 10ccf06..4863956 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_JumlahKaliGangguan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -274,6 +275,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
index 3752c3e..4283066 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_RecoveryTimeGangguan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -209,6 +210,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
index 7c2b2c1..58f3a8e 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ResponseTimeGangguan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -209,6 +210,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
index 3399981..efb9e55 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahDDRPTRCTKeluhan.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -358,6 +359,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
index 8b03561..b50c923 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_JumlahKaliKeluhan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -265,6 +266,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index e2656c8..0b8706c 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -155,6 +156,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
index 63cbc55..2bad012 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_LaporUlangKeluhan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -257,6 +258,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
index 96444f9..a54dda6 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_RecoveryTimeKeluhan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -289,7 +290,8 @@ import {
   DxSelection,
   DxSummary,
   DxGroupItem,
-  DxTotalItem
+  DxTotalItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
index 81a826c..cb0e915 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_ResponseTimeKeluhan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -289,7 +290,8 @@ import {
   DxSelection,
   DxSummary,
   DxGroupItem,
-  DxTotalItem
+  DxTotalItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 2b9d95d..b43971f 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -348,9 +349,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Detail (Monalisa) Aging Complaint"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -371,10 +372,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -671,7 +672,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -697,8 +699,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -760,11 +762,11 @@ const getDetail = () => {
   // })
 }
 
-const showDialogDataSelected = () => {
+const showDetail = () => {
   if (dataSelected.value != null) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDataSelected.value = true
+    dialogDetail.value = true
 
     getDetail()
   }
@@ -774,7 +776,7 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSelected.value = data
 
-  showDialogDataSelected()
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
index c3ff754..7b15af4 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_EnergyNotSales.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -263,7 +264,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
index c9edfc0..c5f5f26 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_KADDalamPelaporan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -285,7 +286,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 9ab2a5b..b301c74 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -650,7 +651,7 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -662,13 +663,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="showDialogDataSelected()">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
@@ -676,9 +677,9 @@
   </div>
 
   <DetailDialog
-    :open="dialogDataSelected"
+    :open="dialogDetail"
     title="Detail (Monalisa) Penurunan Jumlah Komplain"
-    @on-close="closeDialogDataSelected"
+    @on-close="closedialogDetail"
     :full-width="true"
   >
     <div class="w-full mb-4 lg:w-[70%] lg:float-left">
@@ -699,10 +700,10 @@
           column-resizing-mode="widget"
         >
           <DxSelection mode="single" />
-          <DxPaging :page-size="5" :enabled="true" />
+          <DxPaging :page-size="20" :enabled="true" />
           <DxPager
             :visible="true"
-            :allowed-page-sizes="[5, 10, 20]"
+            :allowed-page-sizes="[20, 50, 100]"
             display-mode="full"
             :show-page-size-selector="true"
             :show-info="true"
@@ -999,7 +1000,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -1025,8 +1027,8 @@ const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
-const dialogDataSelected = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = false)
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 
@@ -1088,11 +1090,11 @@ const getDetail = () => {
   // })
 }
 
-const showDialogDataSelected = () => {
+const showDetail = () => {
   if (dataSelected.value != null) {
     dataSub.value = []
     dataSubSelected.value = null
-    dialogDataSelected.value = true
+    dialogDetail.value = true
 
     getDetail()
   }
@@ -1102,7 +1104,7 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSelected.value = data
 
-  showDialogDataSelected()
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
index 881533c..bc531a2 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_AgingComplaint.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -365,7 +366,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
index 4003fba..fe9c4dc 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_EnergyNotSales.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -263,7 +264,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
index 0060890..d188911 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_KDADPelaporan.vue
@@ -24,6 +24,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -285,7 +286,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
index 4c6fbb0..83ed81a 100755
--- a/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Kumulatif/MonalisaLK_PenurunanJumlahKomplain.vue
@@ -25,6 +25,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -750,7 +751,8 @@ import {
   DxSelection,
   DxSummary,
   DxTotalItem,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
diff --git a/src/components/Pages/PencarianData/PencarianData.vue b/src/components/Pages/PencarianData/PencarianData.vue
index 16ea407..4211126 100755
--- a/src/components/Pages/PencarianData/PencarianData.vue
+++ b/src/components/Pages/PencarianData/PencarianData.vue
@@ -19,10 +19,10 @@
       column-resizing-mode="widget"
     >
       <DxSelection mode="single" />
-      <DxPaging :page-size="5" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" />
       <DxPager
         :visible="true"
-        :allowed-page-sizes="[5, 10, 20]"
+        :allowed-page-sizes="[20, 50, 100]"
         display-mode="full"
         :show-page-size-selector="true"
         :show-info="true"
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index a665cdf..4869d68 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -909,9 +909,6 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            id_posko
-            id_uid
-            id_up3
             id
             id_fasilitas
             sub_kelompok