From ee034bacf9458a93228a5e1624db51d0fd18c1af Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Fri, 19 Apr 2024 19:34:54 +0700
Subject: [PATCH] Refactor code to update version numbers and fix bugs in
 Gangguan and Monalisa components

---
 package.json                                  |   2 +-
 public/version.json                           |   2 +-
 .../Anomali/Gangguan/Anomali_LAPPGP_LPP.vue   |  39 ++--
 .../Anomali/Gangguan/Anomali_LAPPGP_LPT.vue   |  11 +-
 .../Anomali/Gangguan/Anomali_LAPPGU_LPT.vue   |  10 +-
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    |   9 +-
 .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue    |  11 +-
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  |   3 +-
 .../Pages/Gangguan/Rekap/RGangguan_ALL.vue    |  24 +--
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   |   2 +-
 .../Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue |  18 +-
 .../Rekap/RGangguan_JenisGangguanSE.vue       |  20 +--
 .../Gangguan/Rekap/RGangguan_PerPosko.vue     |  20 +--
 .../Gangguan/Rekap/RGangguan_PerRegu.vue      |  22 +--
 .../Gangguan/Rekap/RGangguan_PerTanggal.vue   |  20 +--
 .../Rekap/RGangguan_RatingPerPosko.vue        |   4 +-
 .../Pages/Keluhan/Rekap/RKeluhan_ALL.vue      |  18 +-
 .../Rekap/RKeluhan_PerFungsiBidang.vue        |  20 +--
 .../Rekap/RKeluhan_PerJenisKeluhan.vue        |  20 +--
 .../Rekap/RKeluhan_PerKelompokKeluhan.vue     |  20 +--
 .../Keluhan/Rekap/RKeluhan_PerTanggal.vue     |  22 +--
 .../Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue  |  20 +--
 .../MonalisaGR_DispatchingTimeGangguan.vue    |  90 +++++++++-
 .../Rekap/MonalisaGR_GangguanBelumSelesai.vue | 161 +++++++++++++++--
 .../Rekap/MonalisaKR_KeluhanBelumSelesai.vue  | 167 ++++++++++++++++--
 .../Bulanan/MonalisaLB_AgingComplaint.vue     |   8 +-
 .../MonalisaLB_PenurunanJumlahKomplain.vue    |   8 +-
 src/utils/api/api.graphql.ts                  |   4 +
 28 files changed, 570 insertions(+), 205 deletions(-)

diff --git a/package.json b/package.json
index cb1cc8c..23b17f4 100755
--- a/package.json
+++ b/package.json
@@ -1 +1 @@
-{"name":"eis","version":"0.0.121-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
\ No newline at end of file
+{"name":"eis","version":"0.0.122-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
\ No newline at end of file
diff --git a/public/version.json b/public/version.json
index 42106db..a5c0722 100644
--- a/public/version.json
+++ b/public/version.json
@@ -1 +1 @@
-{"version":"0.0.121-vm"}
\ No newline at end of file
+{"version":"0.0.122-vm"}
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 5bdabe2..8bd9f7f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -176,7 +176,8 @@
         class="text-right cursor-pointer"
         @click="
           setParameterRequest({
-            media: null
+            media: null,
+            value: data.text
           })
         "
       >
@@ -195,7 +196,8 @@
         class="text-right"
         @click="
           setParameterRequest({
-            media: null
+            media: null,
+            value: data.text
           })
         "
       >
@@ -214,7 +216,8 @@
         class="text-right cursor-pointer"
         @click="
           setParameterRequest({
-            media: 'PLN Mobile'
+            media: 'PLN Mobile',
+            value: data.text
           })
         "
       >
@@ -233,7 +236,8 @@
         class="text-right cursor-pointer"
         @click="
           setParameterRequest({
-            media: 'Call PLN 123'
+            media: 'Call PLN 123',
+            value: data.text
           })
         "
       >
@@ -252,7 +256,8 @@
         class="text-right cursor-pointer"
         @click="
           setParameterRequest({
-            media: ''
+            media: '',
+            value: data.text
           })
         "
       >
@@ -271,7 +276,8 @@
         class="text-right"
         @click="
           setParameterRequest({
-            media: null
+            media: null,
+            value: data.text
           })
         "
       >
@@ -284,7 +290,8 @@
         class="text-left"
         @click="
           setParameterRequest({
-            media: null
+            media: null,
+            value: data.text
           })
         "
       >
@@ -297,7 +304,8 @@
         class="!text-right"
         @click="
           setParameterRequest({
-            media: null
+            media: null,
+            value: data.text
           })
         "
       >
@@ -880,9 +888,10 @@ const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const parameterRequest = ref<any>({
-  media: null
+  media: null,
+  value: 0
 })
 const closedialogDetail = () => (dialogDetail.value = false)
 
@@ -890,9 +899,13 @@ const setParameterRequest = (data: any) => {
   parameterRequest.value = data
   const parameter = parameterRequest.value
   if (parameter.media != null) {
-    agreeToShowDialog.value = true
+    if (parameter.value != 0) {
+      isDialogEnabled.value = true
+    } else {
+      isDialogEnabled.value = false
+    }
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -990,7 +1003,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index c3d6f93..86d7f5f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -519,7 +519,7 @@ const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const reportMeta = ref<any>(computed(() => props.filters))
 const parameterRequest = ref<any>({
   media: null,
@@ -535,9 +535,9 @@ const setParameterRequest = (data: any) => {
 
   if (parameter.media != null && parameter.marking != null) {
     emit('update:marking', parameter.marking)
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -545,6 +545,9 @@ const onCellClicked = (e: any) => {
   if (e.rowType == 'group') {
     groupDialog.value = true
     groupIndex.value = e.row.groupIndex
+    console.log(e.data)
+    console.log('columnIndex', e)
+    console.log('columnValue', e.data.aggregates[e.column.columnIndex])
 
     if (e.column.dataField == 'anomali_pln_mobile_marking') {
       setParameterRequest({ media: 'PLN Mobile', marking: 1 })
@@ -839,7 +842,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 4d62093..0c1f409 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -1053,7 +1053,6 @@ import {
   DxExport,
   DxGroupItem,
   DxGrouping,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxScrolling,
@@ -1074,7 +1073,6 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPT'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { getDataRowGroup } from '@/utils/helper'
 
 const position = { of: '#data' }
@@ -1099,7 +1097,7 @@ const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const reportMeta = ref<any>(computed(() => props.filters))
 const parameterRequest = ref<any>({
   media: null,
@@ -1113,9 +1111,9 @@ const setParameterRequest = (data: any) => {
   parameterRequest.value = data
   const parameter = parameterRequest.value
   if (parameter.media != null && parameter.marking != null) {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -1451,7 +1449,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 2f99d18..3051b7d 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -734,7 +734,6 @@ import {
   DxExport,
   DxGroupItem,
   DxGrouping,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxScrolling,
@@ -783,7 +782,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const mediaSelected = ref<any>(null)
 const reportMeta = ref<any>(computed(() => props.filters))
 const groupDialog = ref(false)
@@ -794,9 +793,9 @@ const setParameterRequest = (media: any) => {
   mediaSelected.value = media
 
   if (media != null) {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -1066,7 +1065,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index a023f76..1eadc04 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -897,7 +897,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -905,7 +905,6 @@ import {
   DxExport,
   DxGroupItem,
   DxGrouping,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxScrolling,
@@ -946,7 +945,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const requirementData = ref<any>({
   woType: 0,
   rekomendasiSistem: 0,
@@ -984,7 +983,7 @@ const onCellClicked = (e: any) => {
   if (e.rowType == 'group') {
     groupDialog.value = true
     groupIndex.value = e.row.groupIndex
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
 
     if (e.column.dataField == 'wo_cc123') {
       setRequirementData({
@@ -1043,7 +1042,7 @@ const onCellClicked = (e: any) => {
         historyP2tl: 1
       })
     } else {
-      agreeToShowDialog.value = false
+      isDialogEnabled.value = false
     }
 
     groupData.value = getDataRowGroup(e.data)
@@ -1286,7 +1285,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 7b509c3..7151895 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -22,7 +22,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
-      <DxPaging :page-size="20" :enabled="true" />
+      <DxPaging :page-size="20" :enabled="true" :page-index="0" />
       <DxPager
         :visible="true"
         :allowed-page-sizes="[20, 50, 100]"
@@ -351,7 +351,6 @@ import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxExport,
-  DxLoadPanel,
   DxPager,
   DxPaging,
   DxSearchPanel,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 2033454..f4cd40f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -589,13 +589,13 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-left cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -607,7 +607,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -616,7 +616,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 5 ? 'text-green-500' : 'text-red-500']"
-          @click="setAgreementDialog(data.column.caption)"
+          @click="setDialogStatus(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -632,7 +632,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 45 ? 'text-green-500' : 'text-red-500']"
-          @click="setAgreementDialog(data.column.caption)"
+          @click="setDialogStatus(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -648,7 +648,7 @@
         <p
           class="text-right cursor-pointer"
           :class="[data.text < 180 ? 'text-green-500' : 'text-red-500']"
-          @click="setAgreementDialog(data.column.caption)"
+          @click="setDialogStatus(data.column.caption)"
         >
           {{
             isNumber(data.text)
@@ -1191,7 +1191,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const groupIndex = ref(0)
 const groupDialog = ref(false)
@@ -1226,7 +1226,7 @@ const onCellClicked = (e: any) => {
     groupDialog.value = true
     groupIndex.value = e.row.groupIndex
 
-    setAgreementDialog(e.column.caption)
+    setDialogStatus(e.column.caption)
     groupData.value = getDataRowGroup(e.data)
     showDetail()
   } else {
@@ -1234,9 +1234,9 @@ const onCellClicked = (e: any) => {
   }
 }
 
-const setAgreementDialog = (column: string) => {
+const setDialogStatus = (column: string) => {
   if (column == 'Total' || column == 'Selesai' || column == 'In Progress') {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
     if (column == 'Total') {
       progressSelected.value = 0
     } else if (column == 'Selesai') {
@@ -1245,7 +1245,7 @@ const setAgreementDialog = (column: string) => {
       progressSelected.value = 2
     }
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -1580,7 +1580,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     dataSub.value = []
     dataSubSelected.value = null
     getDetail()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index bb46c6a..89cee7e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -480,7 +480,7 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const monthSelected = ref<any>(null)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const groupIndex = ref(0)
 const groupDialog = ref(false)
 const groupData = ref<any>(null)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 644aac2..93db3f6 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -334,13 +334,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-left" @click="setDialogStatus(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -352,13 +352,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-right" @click="setDialogStatus(data.column.caption)">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right" @click="setAgreementDialog(data.column.caption)">
+        <p class="!text-right" @click="setDialogStatus(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -797,7 +797,7 @@ const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const progressSelected = ref(0)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -805,9 +805,9 @@ const reportMeta = ref({
   periode: ''
 })
 
-const setAgreementDialog = (column: string) => {
+const setDialogStatus = (column: string) => {
   if (column == 'd=(e+g)' || column == 'e' || column == 'g') {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
     if (column == 'd=(e+g)') {
       progressSelected.value = 0
     } else if (column == 'e') {
@@ -816,7 +816,7 @@ const setAgreementDialog = (column: string) => {
       progressSelected.value = 2
     }
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -864,7 +864,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     dataSub.value = []
     dataSubSelected.value = null
     getDetail()
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index ddf3c30..3435dd1 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -277,13 +277,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-left cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -295,7 +295,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -307,7 +307,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -319,7 +319,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -331,7 +331,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="!text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -1011,7 +1011,7 @@ const reportMeta = ref({
   posko: { id: 0, name: 'Semua Posko' },
   periode: ''
 })
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 
 let total = 0
@@ -1131,8 +1131,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1248,7 +1248,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index f7ca401..1d9f5c3 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -557,13 +557,13 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-left cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -575,7 +575,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -587,7 +587,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -599,7 +599,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -611,7 +611,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="!text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -999,7 +999,7 @@ const reportMeta = ref({
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
   periode: ''
 })
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 
 let total = 0
@@ -1119,8 +1119,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1173,7 +1173,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 6b596f4..cf37356 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -560,19 +560,19 @@
       </DxSummary>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-left cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumbering="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.rowIndex }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -584,7 +584,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -596,7 +596,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -608,7 +608,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -619,7 +619,7 @@
         </p>
       </template>
 
-      <template #formatTime="{ data }" @click="setAgreementDialog(false, 0)">
+      <template #formatTime="{ data }" @click="setDialogStatus(false, 0)">
         <p class="!text-right">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
@@ -1014,7 +1014,7 @@ const grouping = ref<any[]>([
     caption: 'Seluruh Unit'
   }
 ])
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
 
@@ -1135,8 +1135,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1189,7 +1189,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index f1e92b7..a317c41 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -267,13 +267,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-left cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -285,7 +285,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -297,7 +297,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -309,7 +309,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -321,7 +321,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="!text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -859,12 +859,12 @@ const grouping = ref<any[]>([
     caption: 'Seluruh Unit'
   }
 ])
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -960,7 +960,7 @@ const showDetail = () => {
   clearSelection()
   dataSub.value = []
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 7e2b85e..cd22681 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -956,8 +956,8 @@ const getDetail = async () => {
       dialogDetail.value = true
     })
 }
-// const setAgreementDialog = (status: boolean, progress: number) => {
-//   agreeToShowDialog.value = status
+// const setDialogStatus = (status: boolean, progress: number) => {
+//   isDialogEnabled.value = status
 //   progressSelected.value = progress
 // }
 
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index d1f183f..128a1da 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -431,7 +431,7 @@
       </template>
 
       <template #formatNumberTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -443,7 +443,7 @@
       </template>
 
       <template #formatNumberSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -455,7 +455,7 @@
       </template>
 
       <template #formatNumberProgress="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -857,7 +857,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const groupIndex = ref(0)
 const groupDialog = ref(false)
@@ -1009,7 +1009,7 @@ const onCellClicked = (e: any) => {
     groupDialog.value = true
     groupIndex.value = e.row.groupIndex
 
-    setAgreementDialog(e.column.caption)
+    setDialogStatus(e.column.caption)
     groupData.value = getDataRowGroup(e.data)
     showDetail()
   } else {
@@ -1017,9 +1017,9 @@ const onCellClicked = (e: any) => {
   }
 }
 
-const setAgreementDialog = (column: string) => {
+const setDialogStatus = (column: string) => {
   if (column == 'Total' || column == 'Selesai' || column == 'InProgress') {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
     if (column == 'Total') {
       progressSelected.value = 0
     } else if (column == 'Selesai') {
@@ -1028,7 +1028,7 @@ const setAgreementDialog = (column: string) => {
       progressSelected.value = 2
     }
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -1215,7 +1215,7 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     dataSub.value = []
     dataSubSelected.value = null
     getDetail()
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index f406d9a..5a1638a 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -593,12 +593,12 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
+        <p class="cursor-pointer !text-right" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -610,7 +610,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -622,7 +622,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -634,7 +634,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -646,7 +646,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="cursor-pointer !text-left" @click="setAgreementDialog(false, 0)">
+        <p class="cursor-pointer !text-left" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -1044,7 +1044,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
 const reportMeta = ref({
@@ -1172,8 +1172,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1378,7 +1378,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index c143d62..198923d 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -566,13 +566,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
+        <p class="cursor-pointer !text-right" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -584,7 +584,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -596,7 +596,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -608,7 +608,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -619,7 +619,7 @@
         </p>
       </template>
 
-      <template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
+      <template #formatText="{ data }" @click="setDialogStatus(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -1018,7 +1018,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -1144,8 +1144,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1245,7 +1245,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
index 116547c..0199969 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerKelompokKeluhan.vue
@@ -409,13 +409,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="!text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -427,7 +427,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -439,7 +439,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -451,7 +451,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -463,7 +463,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="!text-left cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -854,7 +854,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
 const reportMeta = ref({
@@ -988,8 +988,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1201,7 +1201,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
index 49b7859..ead4c24 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerTanggal.vue
@@ -409,17 +409,17 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="!text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #percent="{ data }">
-        <p class="cursor-pointer" @click="setAgreementDialog(false, 0)">{{ data.text }}%</p>
+        <p class="cursor-pointer" @click="setDialogStatus(false, 0)">{{ data.text }}%</p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -431,7 +431,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -443,7 +443,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -455,7 +455,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -467,7 +467,7 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-left cursor-pointer" @click="setDialogStatus(false, 0)">
           {{ data.text }}
         </p>
       </template>
@@ -859,7 +859,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const isGroupBy = ref(false)
 const reportMeta = ref({
@@ -993,8 +993,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1183,7 +1183,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index 960850f..7e436c0 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -566,13 +566,13 @@
       </DxSummary>
 
       <template #formatTime="{ data }">
-        <p class="cursor-pointer !text-right" @click="setAgreementDialog(false, 0)">
+        <p class="cursor-pointer !text-right" @click="setDialogStatus(false, 0)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(false, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(false, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -584,7 +584,7 @@
       </template>
 
       <template #formatNumberLaporanTotal="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 0)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 0)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -596,7 +596,7 @@
       </template>
 
       <template #formatNumberLaporanJmlSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 1)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 1)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -608,7 +608,7 @@
       </template>
 
       <template #formatNumberLaporanJmlBelumSelesai="{ data }">
-        <p class="text-right cursor-pointer" @click="setAgreementDialog(true, 2)">
+        <p class="text-right cursor-pointer" @click="setDialogStatus(true, 2)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -619,7 +619,7 @@
         </p>
       </template>
 
-      <template #formatText="{ data }" @click="setAgreementDialog(false, 0)">
+      <template #formatText="{ data }" @click="setDialogStatus(false, 0)">
         <p class="text-left cursor-pointer">
           {{ data.text }}
         </p>
@@ -1011,7 +1011,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const progressSelected = ref(0)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -1136,8 +1136,8 @@ const calculateCustomSummary = (options: any) => {
   }
 }
 
-const setAgreementDialog = (status: boolean, progress: number) => {
-  agreeToShowDialog.value = status
+const setDialogStatus = (status: boolean, progress: number) => {
+  isDialogEnabled.value = status
   progressSelected.value = progress
 }
 
@@ -1240,7 +1240,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
index d203a61..e0ae5dc 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue
@@ -12,6 +12,7 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @cell-click="onCellClicked"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -27,7 +28,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
+      <DxGrouping expand-mode="" :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -1013,6 +1014,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -1035,9 +1037,13 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const isDialogEnabled = ref(false)
 const dataType = ref('')
 const dataYear = ref(new Date().getFullYear())
 const dataMonth = ref(new Date().getMonth())
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -1068,6 +1074,38 @@ const grouping = ref<any[]>([
   }
 ])
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    setDialogStatus(e.column.caption)
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+const setDialogStatus = (column: string) => {
+  if (column == `${getMonthName(lastMonth.value)} ${lastYearMoM.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('mom', lastMonth.value, lastYearMoM.value)
+  } else if (column == `${getMonthName(currentMonth.value)} ${currentYear.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('mom', currentMonth.value, currentYear.value)
+  } else if (column == `s.d ${getMonthName(currentMonth.value)} ${lastYear.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('yoy', currentMonth.value, lastYear.value)
+  } else if (column == `s.d ${getMonthName(currentMonth.value)} ${currentYear.value}`) {
+    isDialogEnabled.value = true
+    setRequirements('yoy', currentMonth.value, currentYear.value)
+  } else {
+    isDialogEnabled.value = false
+    setRequirements('', 0, 0)
+  }
+}
+
 let mom_bulan_kemarin = 0
 let count_mom_bulan_kemarin = 0
 let cal_mom_bulan_kemarin = 0
@@ -1217,6 +1255,12 @@ const setRequirements = (type: string, month: number, year: number) => {
   dataType.value = type
   dataYear.value = year
   dataMonth.value = month
+
+  if (dataType.value == 'yoy' || dataType.value == 'mom') {
+    isDialogEnabled.value = true
+  } else {
+    isDialogEnabled.value = false
+  }
 }
 
 const onExporting = (e: any) => {
@@ -1336,12 +1380,44 @@ const filterData = async (params: any) => {
 const getDetail = async () => {
   const selected = dataSelected.value
 
-  const query = {
+  var query = {
     bulan: dataMonth.value,
     tahun: dataYear.value,
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: ''
+  }
+
+  if (groupDialog.value) {
+    if (grouping.value[groupIndex.value].data == 'nama_regional') {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      bulan: dataMonth.value,
+      tahun: dataYear.value,
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
+    }
   }
 
   loadingSubData.value = true
@@ -1380,7 +1456,9 @@ const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
   if (dataType.value == 'yoy' || dataType.value == 'mom') {
-    getDetail()
+    if (isDialogEnabled.value) {
+      getDetail()
+    }
   }
 }
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index a4a1930..6e563f5 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -11,6 +11,7 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @cell-click="onCellClicked"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -26,7 +27,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" expand-mode="" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -65,7 +66,7 @@
           data-type="number"
           caption="Gangguan"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberGangguan"
         />
         <DxColumn
           :width="150"
@@ -74,7 +75,7 @@
           data-type="number"
           caption="Informasi"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberInformasi"
         />
         <DxColumn
           :width="150"
@@ -87,7 +88,55 @@
         />
       </DxColumn>
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p
+          class="text-right"
+          @click="
+            setParameterRequest({
+              type: '',
+              value: data.text
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberGangguan="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'Gangguan',
+              value: data.text
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberInformasi="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'Informasi',
+              value: data.text
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -99,7 +148,15 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p
+          class="!text-left"
+          @click="
+            setParameterRequest({
+              type: '',
+              value: data.text
+            })
+          "
+        >
           {{ data.text }}
         </p>
       </template>
@@ -521,6 +578,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -539,6 +597,10 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const isDialogEnabled = ref(false)
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -548,6 +610,10 @@ const reportMeta = ref({
   tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
   periode: ''
 })
+const parameterRequest = ref<any>({
+  type: '',
+  value: 0
+})
 
 const grouping = ref<any[]>([
   {
@@ -564,6 +630,46 @@ const grouping = ref<any[]>([
   }
 ])
 
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.type == 'Gangguan' || parameter.type == 'Informasi') {
+    if (parameter.value != 0) {
+      isDialogEnabled.value = true
+    } else {
+      isDialogEnabled.value = false
+    }
+  } else {
+    isDialogEnabled.value = false
+  }
+}
+
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    if (e.column.caption == 'Gangguan' || e.column.caption == 'Informasi') {
+      console.log(e.data)
+      console.log('columnIndex', e)
+      console.log('columnValue', e.data.aggregates[e.column.columnIndex])
+      if (e.data.aggregates[e.column.columnIndex] != 0) {
+        setParameterRequest({
+          type:
+            e.column.caption == 'Gangguan' || e.column.caption == 'Informasi'
+              ? e.column.caption
+              : '',
+          value: e.data.aggregates[e.column.columnIndex]
+        })
+        groupData.value = getDataRowGroup(e.data)
+        showDetail()
+      }
+    }
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const closeDialog = () => {
   dialogDetail.value = false
 }
@@ -681,13 +787,44 @@ const getDetail = async () => {
 
   const { bulan, tahun } = filters.value
 
-  const query = {
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+  var query = {
     bulan: bulan.id,
     tahun: tahun.id,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
+    type: parameterRequest.value.type
+  }
+
+  if (groupDialog.value) {
+    if (grouping.value[groupIndex.value].data == 'nama_regional') {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      ...query,
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
+    }
   }
 
   loadingSubData.value = true
@@ -716,7 +853,9 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  getDetail()
+  if (isDialogEnabled.value) {
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
index c941d87..8e3d267 100755
--- a/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai.vue
@@ -12,6 +12,7 @@
   <div id="data">
     <DxDataGrid
       ref="dataGridRef"
+      @cell-click="onCellClicked"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :data-source="data"
@@ -66,7 +67,7 @@
           data-type="number"
           caption="Keluhan"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberKeluhan"
         />
         <DxColumn
           :width="150"
@@ -75,7 +76,7 @@
           data-type="number"
           caption="Informasi"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberInformasi"
         />
         <DxColumn
           :width="150"
@@ -150,7 +151,55 @@
       </DxSummary>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p
+          class="text-right"
+          @click="
+            setParameterRequest({
+              type: '',
+              value: data.text
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberKeluhan="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'Keluhan',
+              value: data.text
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberInformasi="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setParameterRequest({
+              type: 'Informasi',
+              value: data.text
+            })
+          "
+        >
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -162,16 +211,18 @@
       </template>
 
       <template #formatText="{ data }">
-        <p class="!text-left cursor-pointer">
+        <p
+          class="!text-left"
+          @click="
+            setParameterRequest({
+              type: '',
+              value: data.text
+            })
+          "
+        >
           {{ data.text }}
         </p>
       </template>
-
-      <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
-          {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
-        </p>
-      </template>
     </DxDataGrid>
   </div>
 
@@ -529,6 +580,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Monalisa/Keluhan/Rekap/MonalisaKR_KeluhanBelumSelesai'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -548,6 +600,10 @@ const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
 const lastYear = ref(currentYear.value - 1)
 const filters = ref()
+const isDialogEnabled = ref(false)
+const groupIndex = ref(0)
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -557,6 +613,10 @@ const reportMeta = ref({
   tahun: { id: new Date().getFullYear(), name: new Date().getFullYear().toString() },
   periode: ''
 })
+const parameterRequest = ref<any>({
+  type: '',
+  value: 0
+})
 
 const grouping = ref<any[]>([
   {
@@ -573,6 +633,46 @@ const grouping = ref<any[]>([
   }
 ])
 
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.type == 'Keluhan' || parameter.type == 'Informasi') {
+    if (parameter.value != 0) {
+      isDialogEnabled.value = true
+    } else {
+      isDialogEnabled.value = false
+    }
+  } else {
+    isDialogEnabled.value = false
+  }
+}
+
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    if (e.column.caption == 'Keluhan' || e.column.caption == 'Informasi') {
+      console.log(e.data)
+      console.log('columnIndex', e)
+      console.log('columnValue', e.data.aggregates[e.column.columnIndex])
+      if (e.data.aggregates[e.column.columnIndex] != 0) {
+        setParameterRequest({
+          type:
+            e.column.caption == 'Keluhan' || e.column.caption == 'Informasi'
+              ? e.column.caption
+              : '',
+          value: e.data.aggregates[e.column.columnIndex]
+        })
+        groupData.value = getDataRowGroup(e.data)
+        showDetail()
+      }
+    }
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
@@ -596,13 +696,44 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+  var query = {
     bulan: currentMonth.value,
-    tahun: currentYear.value
+    tahun: currentYear.value,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
+    type: parameterRequest.value.type
+  }
+
+  if (groupDialog.value) {
+    if (grouping.value[groupIndex.value].data == 'nama_regional') {
+      query = {
+        ...query,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      ...query,
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : ''
+    }
   }
 
   loadingSubData.value = true
@@ -631,7 +762,9 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  getDetail()
+  if (isDialogEnabled.value) {
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index c9b82a3..8a5997c 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -736,7 +736,7 @@ const loadingSubData = ref(false)
 const groupIndex = ref(0)
 const groupData = ref<any>(null)
 const groupDialog = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const reportMeta = ref({
   regional: { id: 0, name: 'Semua Regional' },
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
@@ -805,9 +805,9 @@ const setParameterRequest = (data: any) => {
   parameterRequest.value = data
   const parameter = parameterRequest.value
   if (parameter.type != null) {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -908,7 +908,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
index 74e5825..45b96b5 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_PenurunanJumlahKomplain.vue
@@ -1194,7 +1194,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
-const agreeToShowDialog = ref(false)
+const isDialogEnabled = ref(false)
 const groupIndex = ref(0)
 const groupDialog = ref(false)
 const groupData = ref<any>(null)
@@ -1277,9 +1277,9 @@ const setParameterRequest = (data: any) => {
   parameterRequest.value = data
   const parameter = parameterRequest.value
   if (parameter.type != null) {
-    agreeToShowDialog.value = true
+    isDialogEnabled.value = true
   } else {
-    agreeToShowDialog.value = false
+    isDialogEnabled.value = false
   }
 }
 
@@ -1380,7 +1380,7 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  if (agreeToShowDialog.value) {
+  if (isDialogEnabled.value) {
     getDetail()
   }
 }
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 860540d..6781fdc 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -2617,6 +2617,7 @@ export const queries = {
             $idUlp: Int!
             $idUid: Int!
             $idUp3: Int!
+            $namaRegional: String!
           ) {
             detailMonalisaDispatchingTimeGangguanYoY(
               bulan: $bulan
@@ -2624,6 +2625,7 @@ export const queries = {
               idUlp: $idUlp
               idUid: $idUid
               idUp3: $idUp3
+              namaRegional: $namaRegional
             ) {
               id
               id
@@ -2672,6 +2674,7 @@ export const queries = {
             $idUlp: Int!
             $idUid: Int!
             $idUp3: Int!
+            $namaRegional: String!
           ) {
             detailMonalisaDispatchingTimeGangguanMoM(
               bulan: $bulan
@@ -2679,6 +2682,7 @@ export const queries = {
               idUlp: $idUlp
               idUid: $idUid
               idUp3: $idUp3
+              namaRegional: $namaRegional
             ) {
               id
               id