Update page sizes in pagination components

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
@@ -871,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()
   }
 }
@@ -911,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

@@ -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"
@@ -1037,12 +1037,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 ')
 
@@ -1115,13 +1116,15 @@ const getDetail = () => {
     loadingSubData.value = value
   })
 }
-
+const currentDataSelected = ref<any>(null)
-const showDialogDataSelected = () => {
+const showDetail = () => {
   if (dataSelected.value != null) {
-    dataSub.value = []
+    if (currentDataSelected.value == dataSelected.value) {
-    dataSubSelected.value = null
+      dataSub.value = []
-    dialogDataSelected.value = true
+      dataSubSelected.value = null
-    getDetail()
+      dialogDetail.value = true
+      getDetail()
+    }
   }
 }
 
@@ -1155,8 +1158,11 @@ const onExporting = (e: any) => {
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
-  dataSelected.value = selectedRowsData[0]
+  if (dataSelected.value != selectedRowsData[0]) {
-  showDialogDataSelected()
+    dataSelected.value = selectedRowsData[0]
+    currentDataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue

@@ -164,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"

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"

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"

src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue

@@ -449,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"
@@ -889,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(

src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue

@@ -326,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"

src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue

@@ -534,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"

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"

src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue

@@ -255,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"

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"

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

@@ -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

@@ -363,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 == '%'
@@ -380,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>
@@ -388,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">
@@ -411,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"
@@ -775,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)
 
@@ -828,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

@@ -517,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 == '%'
@@ -535,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>
@@ -543,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">
@@ -566,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"
@@ -923,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)
 
@@ -977,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

@@ -374,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 == '%'
@@ -392,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>
@@ -400,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">
@@ -423,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"
@@ -781,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)
 
@@ -835,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

@@ -373,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 == '%'
@@ -395,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>
@@ -403,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">
@@ -426,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"
@@ -784,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)
 
@@ -835,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

@@ -516,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 == '%'
@@ -534,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>
@@ -542,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">
@@ -565,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"
@@ -921,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)
 
@@ -972,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_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/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue

@@ -349,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">
@@ -372,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"
@@ -699,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)
 
@@ -762,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()
   }
@@ -776,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_PenurunanJumlahKomplain.vue

@@ -651,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 == '%'
@@ -663,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>
@@ -677,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">
@@ -700,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"
@@ -1027,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)
 
@@ -1090,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()
   }
@@ -1104,7 +1104,7 @@ const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataSelected.value = data
 
-  showDialogDataSelected()
+  showDetail()
 }
 
 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {

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