Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

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,

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,

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) => {

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"

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"

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"

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"

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"

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"

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"

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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,15 +1117,17 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
-
+const currentDataSelected = ref<any>(null)
-const showDialogDataSelected = () => {
+const showDetail = () => {
   if (dataSelected.value != null) {
+    if (currentDataSelected.value == dataSelected.value) {
       dataSub.value = []
       dataSubSelected.value = null
-    dialogDataSelected.value = true
+      dialogDetail.value = true
       getDetail()
     }
   }
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -1262,8 +1263,11 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  if (dataSelected.value != selectedRowsData[0]) {
     dataSelected.value = selectedRowsData[0]
-  showDialogDataSelected()
+    currentDataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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

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

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

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"

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,
+    posko: filters.value?.id_posko ? filters.value.id_posko : 0,
-    idUid: ref.id_uid,
+    idUid: filters.value?.id_uid ? filters.value.id_uid : 0,
-    idUp3: ref.id_up3,
+    idUp3: filters.value?.id_up3 ? filters.value.id_up3 : 0,
-    idEquipment: ref?.id_equipment ? ref.id_equipment : 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

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="loadingData"
-        v-model:visible="loading"
         :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 = () => {
+const getDetail = () => {
-  showDetail.value = true
+  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 filterData = (params: any) => {
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, uid, up3 } = params
+
   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,
+      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) {

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

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

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

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

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"

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"

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"

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"

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"

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"

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"

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   getDetail()
 }
 

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   console.log(dataSelected.value)
   getDetail()
 }

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   getDetail()
 }
 

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   getDetail()
 }
 

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   getDetail()
 }
 

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   getDetail()
 }
 

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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 = () => {
+const showDetail = () => {
-  dialogDataSelected.value = true
+  dialogDetail.value = true
   console.log(dataSelected.value)
   getDetail()
 }

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"

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"

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,

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"

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,

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,

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,

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,

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,

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,

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,

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,

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'

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'

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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) => {

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'

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'

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 dialogDetail = ref(false)
-const closeDialogDataSelected = () => (dialogDataSelected.value = 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) => {

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'

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'

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'

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'

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"

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