diff --git a/build-push.js b/build-push.js
deleted file mode 100644
index 8ca5aa0..0000000
--- a/build-push.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// build-and-push.js
-const { exec } = require('child_process')
-
-function buildAndPush(version) {
-  const build_app = `npm run build`
-  const docker_image_tag = `defuj/apkt-eis:${version}`
-  const docker_account = {
-    username: 'defuj',
-    token: 'dckr_pat_U_kP14Ws82lJun9f-B4mRpJfjW0'
-  }
-  const docker_logout = `docker logout`
-  const docker_login = `docker login -u ${docker_account.username} -p ${docker_account.token}`
-  const docker_build = `docker build . -t ${docker_image_tag}`
-  const docker_push = `docker push ${docker_image_tag}`
-
-  const command = `${build_app} && ${docker_logout} && ${docker_login} && ${docker_build} && ${docker_push}`
-
-  exec(command, (error, stdout, stderr) => {
-    if (error) {
-      console.error(`Error: ${error.message}`)
-      return
-    }
-    if (stderr) {
-      console.error(`stderr: ${stderr}`)
-      return
-    }
-    console.log(`stdout: ${stdout}`)
-  })
-}
-
-// Ambil argumen versi dari command line
-const version = process.argv[2]
-
-if (!version) {
-  console.error('Usage: node build-push.js <version>')
-  process.exit(1)
-}
-
-buildAndPush(version)
diff --git a/deploy.js b/deploy.js
new file mode 100644
index 0000000..5d3fe4a
--- /dev/null
+++ b/deploy.js
@@ -0,0 +1,70 @@
+// build-and-push.js
+const { exec, writeFile } = require('child_process')
+const fs = require('fs')
+
+function buildAndPush(version) {
+  var packageFile = require('./package.json')
+  packageFile = {
+    ...packageFile,
+    version: version
+  }
+  const packageJsonPath = './package.json'
+  fs.writeFile(packageJsonPath, JSON.stringify(packageFile), (err) => {
+    if (err) {
+      console.error('Error writing package.json', err)
+      return
+    }
+    console.log('package.json updated successfully')
+
+    const versionData = {
+      version: version
+    }
+    const versionJsonPath = './public/version.json'
+
+    fs.writeFile(versionJsonPath, JSON.stringify(versionData), (err) => {
+      if (err) {
+        console.error('Error writing version.json', err)
+        return
+      }
+      console.log('version.json updated successfully')
+
+      const build_app = `npm run build`
+      const docker_image_tag = `defuj/apkt-eis:v${version}`
+      const docker_account = {
+        username: 'defuj',
+        token: 'dckr_pat_U_kP14Ws82lJun9f-B4mRpJfjW0'
+      }
+      const docker_logout = `docker logout`
+      const docker_login = `docker login -u ${docker_account.username} -p ${docker_account.token}`
+      const docker_build = `docker build . -t ${docker_image_tag}`
+      const docker_push = `docker push ${docker_image_tag}`
+
+      const command = `${build_app} && ${docker_logout} && ${docker_login} && ${docker_build} && ${docker_push}`
+      // const command = `${docker_logout} && ${docker_login}`
+
+      exec(command, (error, stdout, stderr) => {
+        if (error) {
+          console.error(`Error: ${error.message}`)
+          return
+        }
+        if (stderr) {
+          console.error(`stderr: ${stderr}`)
+          return
+        }
+        console.log(`stdout: ${stdout}`)
+        console.log(`Run Kubernetes Script:`)
+        console.log(`kubectl set image deployment/apkt-eis apkt-eis=defuj/apkt-eis:v${version}`)
+      })
+    })
+  })
+}
+
+// Ambil argumen versi dari command line
+const version = process.argv[2]
+
+if (!version) {
+  console.error('Usage: node deploy.js <version>')
+  process.exit(1)
+}
+
+buildAndPush(version)
diff --git a/package.json b/package.json
index 1b745fb..cb1cc8c 100755
--- a/package.json
+++ b/package.json
@@ -1,83 +1 @@
-{
-  "name": "eis",
-  "version": "0.0.1",
-  "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/",
-    "build-push": "node build-push.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"
-  }
-}
+{"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
diff --git a/public/version.json b/public/version.json
new file mode 100644
index 0000000..42106db
--- /dev/null
+++ b/public/version.json
@@ -0,0 +1 @@
+{"version":"0.0.121-vm"}
\ No newline at end of file
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index 0c6554b..63f39b4 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -27,12 +27,14 @@
     @update:data-sub="dataSub = $event"
     @update:loading-sub-data="loadingSubData = $event"
     @update:marking="marking = $event"
+    @update:data-group="dataByGroup = $event"
   />
 
   <Anomali_LAPPGP_LPP
     :data="dataSub"
     :filters="filters"
     :marking="marking"
+    :data-group="dataByGroup"
     @update:loading-sub-data="loadingSubData = $event"
   />
 
@@ -40,9 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { Anomali_LAPPGP_LPT, Anomali_LAPPGP_LPP } from '../.'
-import { useQuery } from '@vue/apollo-composable'
 import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
@@ -65,6 +66,13 @@ const grouping = ref<any[]>([
   }
 ])
 
+const dataByGroup = ref<any>(
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+)
+
 const client = apolloClient()
 provideApolloClient(client)
 const data = ref<any[]>([])
@@ -83,6 +91,10 @@ const filters = ref({
   up3: 0
 })
 
+const modifyData = (data: any[]) => {
+  dataSub.value = data
+}
+
 const resetData = () => {
   data.value = []
   dataSub.value = []
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 58428a1..5bdabe2 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -29,7 +29,7 @@
 
     <DxColumn
       alignment="center"
-      data-field="nama_ulp"
+      data-field="nama_unit"
       caption="Nama Unit"
       css-class="custom-table-column"
       cell-template="formatText"
@@ -869,7 +869,8 @@ const props = defineProps({
   marking: {
     type: Number,
     default: 0
-  }
+  },
+  dataGroup: Object as () => any
 })
 const filters = computed(() => props.filters)
 const emit = defineEmits(['update:loadingSubData'])
@@ -906,22 +907,42 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
 
   const selected = dataSelected.value
-  const query = {
+  var query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
     namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
     media: parameterRequest.value?.media,
     isMarking: props.marking,
     idPetugas: selected?.id_regu ? selected?.id_regu : 0
   }
 
+  if (props.dataGroup.data == 'nama_uid') {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0
+    }
+  } else if (props.dataGroup.data == 'nama_up3') {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    }
+  } else if (props.dataGroup.data == 'nama_ulp') {
+    query = {
+      ...query,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0
+    }
+  }
+
   loadingSubData.value = true
   emit('update:loadingSubData', loadingSubData.value)
   await requestGraphQl(
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index eab9e8b..c3d6f93 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -349,7 +349,7 @@
         column="anomali_pln_mobile_marking"
         name="anomali_pln_mobile_marking"
         summary-type="custom"
-        css-class="!text-right"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
@@ -358,7 +358,7 @@
         column="anomali_pln_mobile_non_marking"
         name="anomali_pln_mobile_non_marking"
         summary-type="custom"
-        css-class="!text-right"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
@@ -367,7 +367,7 @@
         column="anomali_cc123_marking"
         name="anomali_cc123_marking"
         summary-type="custom"
-        css-class="!text-right"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
@@ -376,7 +376,7 @@
         column="anomali_cc123_non_marking"
         name="anomali_cc123_non_marking"
         summary-type="custom"
-        css-class="!text-right"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
@@ -385,7 +385,7 @@
         column="total_anomali_marking"
         name="total_anomali_marking"
         summary-type="custom"
-        css-class="!text-right"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
@@ -394,7 +394,7 @@
         column="total_anomali_non_marking"
         name="total_anomali_non_marking"
         summary-type="custom"
-        css-class="!text-right"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
@@ -506,7 +506,12 @@ const props = defineProps({
   },
   loadingData: Boolean
 })
-const emit = defineEmits(['update:dataSub', 'update:loadingSubData', 'update:marking'])
+const emit = defineEmits([
+  'update:dataSub',
+  'update:loadingSubData',
+  'update:marking',
+  'update:data-group'
+])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
@@ -736,7 +741,7 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
 
   const selected = dataSelected.value
-  let query = {
+  var query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -768,12 +773,7 @@ const getDetail = async () => {
     }
   } else {
     query = {
-      dateFrom: dateValue[0]
-        ? dateValue[0].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
-      dateTo: dateValue[1]
-        ? dateValue[1].split('-').reverse().join('-')
-        : new Date().toISOString().slice(0, 10),
+      ...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,
@@ -806,7 +806,18 @@ const getDetail = async () => {
       } else {
         dataSub.value = []
       }
+      dataSub.value = dataSub.value.map((e: any) => ({
+        ...e,
+        nama_unit: groupDialog.value
+          ? props.grouping[groupIndex.value].data == 'nama_uid'
+            ? e.nama_uid
+            : props.grouping[groupIndex.value].data == 'nama_up3'
+              ? e.nama_up3
+              : 'Semua Unit'
+          : e.nama_ulp
+      }))
       emit('update:dataSub', dataSub.value)
+      emit('update:data-group', props.grouping[groupIndex.value])
     })
     .catch((err) => {
       console.error(err)
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index 626a5a6..f18c344 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -22,6 +22,7 @@
     :data="data"
     :filters="filters"
     :loading-data="loadingData"
+    :grouping="grouping"
     @update:loading-sub-data="loadingData = $event"
   />
   <Anomali_LAPPGU_LPP :data="dataSecond" :filters="filters" />
@@ -60,11 +61,66 @@ const resetData = () => {
   dataSecond.value = []
 }
 
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
+
 const filterData = async (params: any) => {
   resetData()
   const { ulp, uid, up3, jenisLaporan } = params
   console.table('LAPPGU', jenisLaporan)
 
+  var groupList: any[] = [
+    {
+      data: '',
+      caption: 'Semua Unit'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Semua Unit') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   const dateValue = params.periode.split(' s/d ')
   const query = {
     dateFrom: dateValue[0]
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 76d5f2c..4d62093 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -4,6 +4,7 @@
   </div>
 
   <DxDataGrid
+    @cell-click="onCellClicked"
     ref="dataGridRef"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
@@ -21,7 +22,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
-    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
+    <DxGrouping :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -44,35 +45,15 @@
     />
 
     <DxColumn
+      v-if="grouping.length > 0"
+      v-for="(group, index) in grouping"
+      :width="150"
       alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field=""
-      caption="Semua Unit"
+      :data-field="group.data"
+      :caption="group.caption"
       css-class="custom-table-column"
-      :group-index="0"
-    />
-    <DxColumn
-      alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field="id_uid"
-      caption="UID"
-      css-class="custom-table-column"
-      :group-index="1"
-      name="namaUID"
-      :calculate-group-value="(rowData: any) => rowData.nama_uid"
-    />
-    <DxColumn
-      alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field="id_up3"
-      caption="UP3"
-      css-class="custom-table-column"
-      :group-index="1"
-      name="namaUID"
-      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      cell-template="formatText"
+      :group-index="index"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
@@ -400,12 +381,13 @@
       </p>
     </template>
 
-    <DxSummary>
+    <DxSummary :calculate-custom-summary="calculateCustomSummary">
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_cc123"
-        summary-type="sum"
+        name="wo_cc123"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -413,7 +395,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_pln_mobile"
-        summary-type="sum"
+        name="wo_pln_mobile"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -421,7 +404,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_loket"
-        summary-type="sum"
+        name="wo_loket"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -429,7 +413,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_lainnya"
-        summary-type="sum"
+        summary-type="custom"
+        name="wo_lainnya"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -437,7 +422,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_total"
-        summary-type="sum"
+        name="wo_total"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -445,55 +431,62 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_pln_mobile_marking"
-        summary-type="sum"
-        css-class="!text-right"
+        name="anomali_pln_mobile_marking"
+        summary-type="custom"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_pln_mobile_non_marking"
-        summary-type="sum"
-        css-class="!text-right"
+        name="anomali_pln_mobile_non_marking"
+        summary-type="custom"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_cc123_marking"
-        summary-type="sum"
-        css-class="!text-right"
+        name="anomali_cc123_marking"
+        summary-type="custom"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_cc123_non_marking"
-        summary-type="sum"
-        css-class="!text-right"
+        name="anomali_cc123_non_marking"
+        summary-type="custom"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="total_anomali_marking"
-        summary-type="sum"
-        css-class="!text-right"
+        name="total_anomali_marking"
+        summary-type="custom"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="total_anomali_non_marking"
-        summary-type="sum"
-        css-class="!text-right"
+        name="total_anomali_non_marking"
+        summary-type="custom"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_pln_mobile_marking"
-        summary-type="avg"
+        name="persen_anomali_pln_mobile_marking"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
@@ -501,7 +494,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_pln_mobile_non_marking"
-        summary-type="avg"
+        name="persen_anomali_pln_mobile_non_marking"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
@@ -509,7 +503,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_cc123_marking"
-        summary-type="avg"
+        name="persen_anomali_cc123_marking"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
@@ -517,7 +512,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_cc123_non_marking"
-        summary-type="avg"
+        name="persen_anomali_cc123_non_marking"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
@@ -525,7 +521,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_marking"
-        summary-type="avg"
+        name="persen_anomali_marking"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
@@ -533,7 +530,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_non_marking"
-        summary-type="avg"
+        name="persen_anomali_non_marking"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
@@ -1077,6 +1075,7 @@ import {
   exportDetailToDOCX
 } from '@/report/Anomali/Gangguan/Anomali_LAPPGU_LPT'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { getDataRowGroup } from '@/utils/helper'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -1085,7 +1084,11 @@ const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
   filters: Object as () => any,
-  loadingData: Boolean
+  loadingData: Boolean,
+  grouping: {
+    type: Array as () => any[],
+    default: []
+  }
 })
 const emit = defineEmits(['update:loadingSubData'])
 const filters = ref<any>(computed(() => props.filters))
@@ -1102,6 +1105,9 @@ const parameterRequest = ref<any>({
   media: null,
   marking: null
 })
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+const groupIndex = ref(0)
 
 const setParameterRequest = (data: any) => {
   parameterRequest.value = data
@@ -1113,6 +1119,234 @@ const setParameterRequest = (data: any) => {
   }
 }
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    if (e.column.dataField == 'anomali_pln_mobile_marking') {
+      setParameterRequest({ media: 'PLN Mobile', marking: 1 })
+    } else if (e.column.dataField == 'anomali_pln_mobile_non_marking') {
+      setParameterRequest({ media: 'PLN Mobile', marking: 2 })
+    } else if (e.column.dataField == 'anomali_cc123_marking') {
+      setParameterRequest({ media: 'Call PLN 123', marking: 1 })
+    } else if (e.column.dataField == 'anomali_cc123_non_marking') {
+      setParameterRequest({ media: 'Call PLN 123', marking: 2 })
+    } else if (e.column.dataField == 'total_anomali_marking') {
+      setParameterRequest({ media: '', marking: 1 })
+    } else if (e.column.dataField == 'total_anomali_non_marking') {
+      setParameterRequest({ media: '', marking: 2 })
+    } else {
+      setParameterRequest({ media: null, marking: null })
+    }
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
+let wo_cc123 = 0
+let wo_pln_mobile = 0
+let wo_loket = 0
+let wo_lainnya = 0
+let wo_total = 0
+let anomali_pln_mobile_marking = 0
+let anomali_pln_mobile_non_marking = 0
+let anomali_cc123_marking = 0
+let anomali_cc123_non_marking = 0
+let total_anomali_marking = 0
+let total_anomali_non_marking = 0
+let persen_anomali_pln_mobile_marking = 0
+let persen_anomali_pln_mobile_non_marking = 0
+let persen_anomali_cc123_marking = 0
+let persen_anomali_cc123_non_marking = 0
+let persen_anomali_marking = 0
+let persen_anomali_non_marking = 0
+
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'wo_cc123') {
+    if (options.summaryProcess === 'calculate') {
+      wo_cc123 += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_cc123
+    }
+  }
+
+  if (options.name === 'wo_pln_mobile') {
+    if (options.summaryProcess === 'calculate') {
+      wo_pln_mobile += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_pln_mobile
+    }
+  }
+
+  if (options.name === 'wo_loket') {
+    if (options.summaryProcess === 'calculate') {
+      wo_loket += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_loket
+    }
+  }
+
+  if (options.name === 'wo_lainnya') {
+    if (options.summaryProcess === 'calculate') {
+      wo_lainnya += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_lainnya
+    }
+  }
+
+  if (options.name === 'wo_total') {
+    if (options.summaryProcess === 'start') {
+      wo_cc123 = 0
+      wo_pln_mobile = 0
+      wo_loket = 0
+      wo_lainnya = 0
+    } else if (options.summaryProcess === 'calculate') {
+      wo_total = wo_cc123 + wo_pln_mobile + wo_loket + wo_lainnya
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_cc123 + wo_pln_mobile + wo_loket + wo_lainnya
+    }
+  }
+
+  if (options.name === 'anomali_pln_mobile_marking') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_pln_mobile_marking += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile_marking
+    }
+  }
+
+  if (options.name === 'anomali_pln_mobile_non_marking') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_pln_mobile_non_marking += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile_non_marking
+    }
+  }
+
+  if (options.name === 'anomali_cc123_marking') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_cc123_marking += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_cc123_marking
+    }
+  }
+
+  if (options.name === 'anomali_cc123_non_marking') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_cc123_non_marking += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_cc123_non_marking
+    }
+  }
+
+  if (options.name === 'total_anomali_marking') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile_marking = 0
+      anomali_cc123_marking = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile_marking + anomali_cc123_marking
+    }
+  }
+
+  if (options.name === 'total_anomali_non_marking') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile_non_marking = 0
+      anomali_cc123_non_marking = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile_non_marking + anomali_cc123_non_marking
+    }
+  }
+
+  if (options.name === 'persen_anomali_pln_mobile_marking') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile_marking = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_pln_mobile_marking =
+        !isFinite(anomali_pln_mobile_marking / wo_total) || anomali_pln_mobile_marking == 0
+          ? 0
+          : (anomali_pln_mobile_marking / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_pln_mobile_marking / wo_total) || anomali_pln_mobile_marking == 0
+          ? 0
+          : (anomali_pln_mobile_marking / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'persen_anomali_pln_mobile_non_marking') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile_non_marking = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_pln_mobile_non_marking =
+        !isFinite(anomali_pln_mobile_non_marking / wo_total) || anomali_pln_mobile_non_marking == 0
+          ? 0
+          : (anomali_pln_mobile_non_marking / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_pln_mobile_non_marking / wo_total) || anomali_pln_mobile_non_marking == 0
+          ? 0
+          : (anomali_pln_mobile_non_marking / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'persen_anomali_cc123_marking') {
+    if (options.summaryProcess === 'start') {
+      anomali_cc123_marking = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_cc123_marking =
+        !isFinite(anomali_cc123_marking / wo_total) || anomali_cc123_marking == 0
+          ? 0
+          : (anomali_cc123_marking / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_cc123_marking / wo_total) || anomali_cc123_marking == 0
+          ? 0
+          : (anomali_cc123_marking / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'persen_anomali_cc123_non_marking') {
+    if (options.summaryProcess === 'start') {
+      anomali_cc123_non_marking = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_cc123_non_marking =
+        !isFinite(anomali_cc123_non_marking / wo_total) || anomali_cc123_non_marking == 0
+          ? 0
+          : (anomali_cc123_non_marking / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_cc123_non_marking / wo_total) || anomali_cc123_non_marking == 0
+          ? 0
+          : (anomali_cc123_non_marking / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'persen_anomali_marking') {
+    if (options.summaryProcess === 'start') {
+      persen_anomali_pln_mobile_marking = 0
+      persen_anomali_cc123_marking = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = persen_anomali_pln_mobile_marking + persen_anomali_cc123_marking
+    }
+  }
+
+  if (options.name === 'persen_anomali_non_marking') {
+    if (options.summaryProcess === 'start') {
+      persen_anomali_cc123_non_marking = 0
+      persen_anomali_pln_mobile_non_marking = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = persen_anomali_pln_mobile_non_marking + persen_anomali_cc123_non_marking
+    }
+  }
+}
+
 const resetData = () => {
   dataSub.value = []
   dataSubSelected.value = null
@@ -1124,21 +1358,53 @@ const getDetail = async () => {
 
   const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
-  const query = {
+  let query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
     namaRegional: '',
     media: parameterRequest.value?.media,
     isMarking: parameterRequest.value?.marking
   }
 
+  if (groupDialog.value) {
+    if (props.grouping[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 (props.grouping[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      media: parameterRequest.value?.media,
+      isMarking: parameterRequest.value?.marking
+    }
+  }
+
   loadingSubData.value = true
   emit('update:loadingSubData', true)
   await requestGraphQl(
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
index 20bbb4c..9957d49 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -18,7 +18,7 @@
     />
   </Filters>
 
-  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :filters="filters" />
+  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" :grouping="grouping" :filters="filters" />
   <Anomali_LAPPKU_LPP :data="dataSecond" :filters="filters" />
 </template>
 
@@ -43,6 +43,21 @@ const filters = ref({
   up3: 0
 })
 
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
+
 const resetData = () => {
   data.value = []
   dataSecond.value = []
@@ -53,6 +68,46 @@ const filterData = async (params: any) => {
   const { ulp, uid, up3, jenisLaporan } = params
   console.table('LAPPGU', jenisLaporan)
 
+  var groupList: any[] = [
+    {
+      data: '',
+      caption: 'Semua Unit'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Semua Unit') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   const dateValue = params.periode.split(' s/d ')
   const query = {
     dateFrom: dateValue[0]
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 689b122..2f99d18 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -3,6 +3,7 @@
     <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan Total</h1>
   </div>
   <DxDataGrid
+    @cell-click="onCellClicked"
     ref="dataGridRef"
     :data-source="data"
     v-if="loading == false"
@@ -20,7 +21,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
-    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
+    <DxGrouping :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -42,35 +43,15 @@
       cell-template="formatText"
     />
     <DxColumn
+      v-if="grouping.length > 0"
+      v-for="(group, index) in grouping"
+      :width="150"
       alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field=""
-      caption="Semua Unit"
+      :data-field="group.data"
+      :caption="group.caption"
       css-class="custom-table-column"
-      :group-index="0"
-    />
-    <DxColumn
-      alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field="id_uid"
-      caption="UID"
-      css-class="custom-table-column"
-      :group-index="1"
-      name="namaUID"
-      :calculate-group-value="(rowData: any) => rowData.nama_uid"
-    />
-    <DxColumn
-      alignment="center"
-      :min-width="170"
-      data-type="text"
-      data-field="id_up3"
-      caption="UP3"
-      css-class="custom-table-column"
-      :group-index="1"
-      name="namaUID"
-      :calculate-group-value="(rowData: any) => rowData.nama_up3"
+      cell-template="formatText"
+      :group-index="index"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
@@ -275,12 +256,13 @@
       </p>
     </template>
 
-    <DxSummary>
+    <DxSummary :calculate-custom-summary="calculateCustomSummary">
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_cc123"
-        summary-type="sum"
+        name="wo_cc123"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -288,7 +270,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_pln_mobile"
-        summary-type="sum"
+        name="wo_pln_mobile"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -296,7 +279,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_loket"
-        summary-type="sum"
+        name="wo_loket"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -304,7 +288,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_lainnya"
-        summary-type="sum"
+        name="wo_lainnya"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -312,7 +297,8 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="wo_total"
-        summary-type="sum"
+        name="wo_total"
+        summary-type="custom"
         css-class="!text-right"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
@@ -320,24 +306,27 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_pln_mobile"
-        summary-type="sum"
-        css-class="!text-right"
+        summary-type="custom"
+        name="anomali_pln_mobile"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="anomali_cc123"
-        summary-type="sum"
-        css-class="!text-right"
+        summary-type="custom"
+        name="anomali_cc123"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="total_anomali"
-        summary-type="sum"
-        css-class="!text-right"
+        summary-type="custom"
+        name="total_anomali"
+        css-class="!text-right cursor-pointer"
         :customize-text="(e: any) => formatNumber(e.value)"
       />
 
@@ -345,24 +334,27 @@
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_pln_mobile"
-        summary-type="avg"
+        summary-type="custom"
         css-class="!text-right"
+        name="persen_anomali_pln_mobile"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="persen_anomali_cc123"
-        summary-type="avg"
+        summary-type="custom"
         css-class="!text-right"
+        name="persen_anomali_cc123"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
       <DxGroupItem
         :show-in-group-footer="false"
         :align-by-column="true"
         column="total_persen_anomali"
-        summary-type="avg"
+        summary-type="custom"
         css-class="!text-right"
+        name="total_persen_anomali"
         :customize-text="(e: any) => formatPercentage(e.value)"
       />
     </DxSummary>
@@ -730,7 +722,7 @@
     </div>
   </DetailDialog>
 
-  <BufferDialog v-if="loading" />
+  <BufferDialog v-if="loading || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -764,6 +756,7 @@ import {
   exportDetailToDOCX
 } from '@/report/Anomali/Keluhan/Anomali_LAPPKU_LPT'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { getDataRowGroup } from '@/utils/helper'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -775,6 +768,10 @@ const props = defineProps({
   loading: {
     type: Boolean,
     default: false
+  },
+  grouping: {
+    type: Array as () => any[],
+    default: []
   }
 })
 const filters = ref<any>(computed(() => props.filters))
@@ -789,6 +786,9 @@ const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
 const mediaSelected = ref<any>(null)
 const reportMeta = ref<any>(computed(() => props.filters))
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+const groupIndex = ref(0)
 
 const setParameterRequest = (media: any) => {
   mediaSelected.value = media
@@ -800,6 +800,27 @@ const setParameterRequest = (media: any) => {
   }
 }
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+
+    if (e.column.dataField == 'anomali_pln_mobile') {
+      setParameterRequest('PLN Mobile')
+    } else if (e.column.dataField == 'anomali_cc123') {
+      setParameterRequest('Call PLN 123')
+    } else if (e.column.dataField == 'total_anomali') {
+      setParameterRequest('')
+    } else {
+      setParameterRequest(null)
+    }
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
 const resetData = () => {
   dataSub.value = []
   dataSubSelected.value = null
@@ -814,20 +835,51 @@ const getDetail = async () => {
 
   const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
-  const query = {
+  let query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
     namaRegional: '',
     media: mediaSelected.value
   }
 
+  if (groupDialog.value) {
+    if (props.grouping[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 (props.grouping[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      media: mediaSelected.value
+    }
+  }
+
   loadingSubData.value = true
   await requestGraphQl(
     jenisLaporan.name == 'Laporan Berulang Unit'
@@ -862,6 +914,135 @@ const getDetail = async () => {
     })
 }
 
+let wo_cc123 = 0
+let wo_pln_mobile = 0
+let wo_loket = 0
+let wo_lainnya = 0
+let wo_total = 0
+let anomali_pln_mobile = 0
+let anomali_cc123 = 0
+let total_anomali = 0
+let persen_anomali_pln_mobile = 0
+let persen_anomali_cc123 = 0
+let total_persen_anomali = 0
+
+const calculateCustomSummary = (options: any) => {
+  if (options.name === 'wo_cc123') {
+    if (options.summaryProcess === 'calculate') {
+      wo_cc123 += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_cc123
+    }
+  }
+
+  if (options.name === 'wo_pln_mobile') {
+    if (options.summaryProcess === 'calculate') {
+      wo_pln_mobile += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_pln_mobile
+    }
+  }
+
+  if (options.name === 'wo_loket') {
+    if (options.summaryProcess === 'calculate') {
+      wo_loket += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_loket
+    }
+  }
+
+  if (options.name === 'wo_lainnya') {
+    if (options.summaryProcess === 'calculate') {
+      wo_lainnya += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_lainnya
+    }
+  }
+
+  if (options.name === 'wo_total') {
+    if (options.summaryProcess === 'start') {
+      wo_cc123 = 0
+      wo_pln_mobile = 0
+      wo_loket = 0
+      wo_lainnya = 0
+    } else if (options.summaryProcess === 'calculate') {
+      wo_total = wo_cc123 + wo_pln_mobile + wo_loket + wo_lainnya
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = wo_cc123 + wo_pln_mobile + wo_loket + wo_lainnya
+    }
+  }
+
+  if (options.name === 'anomali_pln_mobile') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_pln_mobile += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile
+    }
+  }
+
+  if (options.name === 'anomali_cc123') {
+    if (options.summaryProcess === 'calculate') {
+      anomali_cc123 += options.value
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_cc123
+    }
+  }
+
+  if (options.name === 'total_anomali') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile = 0
+      anomali_cc123 = 0
+    } else if (options.summaryProcess === 'calculate') {
+      total_anomali = anomali_pln_mobile + anomali_cc123
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = anomali_pln_mobile + anomali_cc123
+    }
+  }
+
+  if (options.name === 'persen_anomali_pln_mobile') {
+    if (options.summaryProcess === 'start') {
+      anomali_pln_mobile = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_pln_mobile =
+        !isFinite(anomali_pln_mobile / wo_total) || anomali_pln_mobile == 0
+          ? 0
+          : (anomali_pln_mobile / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_pln_mobile / wo_total) || anomali_pln_mobile == 0
+          ? 0
+          : (anomali_pln_mobile / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'persen_anomali_cc123') {
+    if (options.summaryProcess === 'start') {
+      anomali_cc123 = 0
+      wo_total = 0
+    } else if (options.summaryProcess === 'calculate') {
+      persen_anomali_cc123 =
+        !isFinite(anomali_cc123 / wo_total) || anomali_cc123 == 0
+          ? 0
+          : (anomali_cc123 / wo_total) * 100
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue =
+        !isFinite(anomali_cc123 / wo_total) || anomali_cc123 == 0
+          ? 0
+          : (anomali_cc123 / wo_total) * 100
+    }
+  }
+
+  if (options.name === 'total_persen_anomali') {
+    if (options.summaryProcess === 'start') {
+      persen_anomali_pln_mobile = 0
+      persen_anomali_cc123 = 0
+    } else if (options.summaryProcess === 'finalize') {
+      options.totalValue = persen_anomali_pln_mobile + persen_anomali_cc123
+    }
+  }
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     exportToPDF(reportMeta.value, data.value)
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 72192c8..a023f76 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -5,6 +5,7 @@
 
   <div id="data">
     <DxDataGrid
+      @cell-click="onCellClicked"
       ref="dataGridRef"
       :data-source="data"
       v-if="loadingData == false"
@@ -21,7 +22,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
-      <DxGrouping :auto-expand-all="false" expand-mode="rowClick" />
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -34,30 +35,15 @@
       />
       <DxColumnFixing :enabled="true" />
       <DxColumn
+        v-if="grouping.length > 0"
+        v-for="(group, index) in grouping"
+        :width="150"
         alignment="center"
-        data-field=""
-        caption="Semua Unit"
+        :data-field="group.data"
+        :caption="group.caption"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="id_uid"
-        caption="UID"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="1"
-        :calculate-display-value="(dataRow: any) => dataRow.nama_uid"
-      />
-      <DxColumn
-        alignment="center"
-        data-field="id_up3"
-        caption="UP3"
-        css-class="custom-table-column"
-        cell-template="formatText"
-        :group-index="2"
-        :calculate-display-value="(dataRow: any) => dataRow.nama_up3"
+        :group-index="index"
       />
       <DxColumn
         alignment="center"
@@ -365,7 +351,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="wo_pln_mobile"
@@ -374,7 +360,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="wo_comcen"
@@ -383,7 +369,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="wo_total"
@@ -392,7 +378,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="rekomendasi_mendatangkan_petugas"
@@ -400,7 +386,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="rekomendasi_diberikan_ke_pelanggan"
@@ -408,7 +394,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="dpld"
@@ -416,7 +402,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
         <DxGroupItem
           column="history_p2lt"
@@ -424,7 +410,7 @@
           :customize-text="(e: any) => formatNumber(e.value)"
           :show-in-group-footer="false"
           :align-by-column="true"
-          css-class="!text-right"
+          css-class="!text-right cursor-pointer"
         />
       </DxSummary>
     </DxDataGrid>
@@ -944,6 +930,7 @@ import {
   exportToDOCX,
   exportDetailToDOCX
 } from '@/report/Ctt/CTT_LaporanCttKwhPeriksa'
+import { getDataRowGroup } from '@/utils/helper'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -959,6 +946,7 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
 const requirementData = ref<any>({
   woType: 0,
   rekomendasiSistem: 0,
@@ -971,9 +959,100 @@ const reportMeta = ref({
   ulp: { id: 0, name: 'Semua Unit Layanan Pelanggan' },
   periode: ''
 })
+const groupDialog = ref(false)
+const groupData = ref<any>(null)
+const groupIndex = ref(0)
+
+const grouping = ref<any[]>([
+  {
+    data: '',
+    caption: 'Semua Unit'
+  },
+  {
+    data: 'nama_uid',
+    caption: 'UID'
+  },
+  {
+    data: 'nama_up3',
+    caption: 'UP3'
+  }
+])
 
 const setRequirementData = (data: any) => (requirementData.value = data)
 
+const onCellClicked = (e: any) => {
+  if (e.rowType == 'group') {
+    groupDialog.value = true
+    groupIndex.value = e.row.groupIndex
+    agreeToShowDialog.value = true
+
+    if (e.column.dataField == 'wo_cc123') {
+      setRequirementData({
+        woType: 1,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'wo_pln_mobile') {
+      setRequirementData({
+        woType: 2,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'wo_comcen') {
+      setRequirementData({
+        woType: 3,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'wo_total') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'rekomendasi_mendatangkan_petugas') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 1,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'rekomendasi_diberikan_ke_pelanggan') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 2,
+        dlpd: 0,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'dpld') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 0,
+        dlpd: 1,
+        historyP2tl: 0
+      })
+    } else if (e.column.dataField == 'history_p2lt') {
+      setRequirementData({
+        woType: 0,
+        rekomendasiSistem: 0,
+        dlpd: 0,
+        historyP2tl: 1
+      })
+    } else {
+      agreeToShowDialog.value = false
+    }
+
+    groupData.value = getDataRowGroup(e.data)
+    showDetail()
+  } else {
+    groupDialog.value = false
+  }
+}
+
 let cc123 = 0
 let plnMobile = 0
 let comcen = 0
@@ -1044,6 +1123,46 @@ const filterData = async (params: any) => {
   const { posko, uid, up3, ulp } = params
   const dateValue = params.periode.split(' s/d ')
 
+  var groupList: any[] = [
+    {
+      data: '',
+      caption: 'Semua Unit'
+    },
+    {
+      data: 'nama_uid',
+      caption: 'UID'
+    },
+    {
+      data: 'nama_up3',
+      caption: 'UP3'
+    }
+  ]
+
+  if (uid?.id != 0) {
+    groupList.forEach((item, index) => {
+      if (item.caption == 'Semua Unit') {
+        groupList.splice(index, 1)
+      }
+    })
+
+    if (up3?.id != 0) {
+      groupList.forEach((item, index) => {
+        if (item.caption == 'UID') {
+          groupList.splice(index, 1)
+        }
+      })
+
+      if (ulp?.id != 0) {
+        groupList.forEach((item, index) => {
+          if (item.caption == 'UP3') {
+            groupList.splice(index, 1)
+          }
+        })
+      }
+    }
+  }
+  grouping.value = groupList
+
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -1081,18 +1200,17 @@ const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
-  const query = {
+  let query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
-    idPosko: selected?.id_posko ? selected?.id_posko : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    namaRegional: '',
     tipeWo: requirementData.value?.woType ? requirementData.value?.woType : '',
     rekomendasiSistem: requirementData.value?.rekomendasiSistem
       ? requirementData.value?.rekomendasiSistem == 1
@@ -1103,6 +1221,44 @@ const getDetail = async () => {
     isHistoriP2tl: requirementData.value?.historyP2tl ? requirementData.value?.historyP2tl : 0
   }
 
+  if (groupDialog.value) {
+    if (grouping.value[groupIndex.value].data == 'nama_uid') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    } else if (grouping.value[groupIndex.value].data == 'nama_up3') {
+      query = {
+        ...query,
+        idUid: groupData.value?.id_uid ? groupData.value?.id_uid : 0,
+        idUp3: groupData.value?.id_up3 ? groupData.value?.id_up3 : 0,
+        namaRegional: groupData.value?.nama_regional ? groupData.value?.nama_regional : ''
+      }
+    }
+  } else {
+    query = {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+      idUid: selected?.id_uid ? selected?.id_uid : 0,
+      idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+      namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+      tipeWo: requirementData.value?.woType ? requirementData.value?.woType : '',
+      rekomendasiSistem: requirementData.value?.rekomendasiSistem
+        ? requirementData.value?.rekomendasiSistem == 1
+          ? 'Mendatangkan Petugas'
+          : 'Diberikan ke Pelanggan'
+        : '',
+      isDlpd: requirementData.value?.dlpd ? requirementData.value?.dlpd : 0,
+      isHistoriP2tl: requirementData.value?.historyP2tl ? requirementData.value?.historyP2tl : 0
+    }
+  }
+
   loadingSubData.value = true
   await requestGraphQl(queries.cttKwhPeriksa.laporanCttKwhPeriksaDetail, query)
     .then((result) => {
@@ -1128,8 +1284,11 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
+  dataSub.value = []
   dataSubSelected.value = null
-  getDetail()
+  if (agreeToShowDialog.value) {
+    getDetail()
+  }
 }
 
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 967e2a2..28bd81d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -325,7 +325,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="pembuat_laporan"
             caption="Nama Petugas"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -333,7 +333,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko_lama"
             caption="Posko Asal"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -341,7 +341,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_posko_baru"
             caption="Posko Tujuan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -477,17 +477,29 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Petugas:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.pembuat_laporan"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko Asal:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_posko_lama"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko Tujuan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.nama_posko_baru"
+            class-name="flex-1"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index f39f1d4..644aac2 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 cursor-pointer">
+        <p class="text-left" @click="setAgreementDialog(data.column.caption)">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="setAgreementDialog(data.column.caption)">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -352,13 +352,13 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right" @click="setAgreementDialog(data.column.caption)">
           {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right cursor-pointer">
+        <p class="!text-right" @click="setAgreementDialog(data.column.caption)">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -796,6 +796,8 @@ const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const progressSelected = ref(0)
+const agreeToShowDialog = ref(false)
 const reportMeta = ref({
   uid: { id: 0, name: 'Semua Unit Induk Distribusi/Wilayah' },
   up3: { id: 0, name: 'Semua Unit Pelaksanaan Pelayanan Pelanggan' },
@@ -803,6 +805,21 @@ const reportMeta = ref({
   periode: ''
 })
 
+const setAgreementDialog = (column: string) => {
+  if (column == 'd=(e+g)' || column == 'e' || column == 'g') {
+    agreeToShowDialog.value = true
+    if (column == 'd=(e+g)') {
+      progressSelected.value = 0
+    } else if (column == 'e') {
+      progressSelected.value = 1
+    } else {
+      progressSelected.value = 2
+    }
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
 const getDetail = async () => {
   loadingSubData.value = true
   const dateValue = filters.value.periode.split(' s/d ')
@@ -819,7 +836,8 @@ const getDetail = async () => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    idRegu: ref.id_regu
+    idRegu: ref?.id_regu ? ref.id_regu : 0,
+    isSelesai: progressSelected.value
   }
 
   await requestGraphQl(queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail, query)
@@ -846,10 +864,11 @@ const clearSelection = () => {
 }
 const showDetail = () => {
   clearSelection()
-  dataSub.value = []
-  dataSubSelected.value = null
-  // dialogDetail.value = true
-  getDetail()
+  if (agreeToShowDialog.value) {
+    dataSub.value = []
+    dataSubSelected.value = null
+    getDetail()
+  }
 }
 
 const closeDialog = () => {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
index cbc1d45..f1e92b7 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@@ -871,21 +871,68 @@ const setAgreementDialog = (status: boolean, progress: number) => {
 const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
   const ref = dataSelected.value
+  const { posko, uid, up3 } = filters.value
 
-  const query = {
+  var query = {
     dateFrom: ref?.tanggal ? reformatDate(ref?.tanggal, 'yyyy/MM/dd', 'yyyy-MM-dd') : '',
     dateTo: ref?.tanggal ? reformatDate(ref?.tanggal, 'yyyy/MM/dd', 'yyyy-MM-dd') : '',
-    posko: progressSelected.value == 0 ? 0 : ref?.id_posko ? ref?.id_posko : 0,
-    idUid: progressSelected.value == 0 ? 0 : ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: progressSelected.value == 0 ? 0 : ref?.id_up3 ? ref?.id_up3 : 0,
-    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: progressSelected.value == 0 ? 0 : ref?.id_ulp ? ref?.id_ulp : 0,
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+    idUlp: 0,
+    idRegu: 0,
     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
     media: ref?.media ? ref?.media : '',
     isSelesai: progressSelected.value,
     tanggal: ref?.tanggal ? reformatDate(ref?.tanggal, 'yyyy/MM/dd', 'yyyy-MM-dd') : ''
   }
 
+  if (isGroupBy.value) {
+    query = {
+      ...query,
+      idUid: ref?.id_uid
+    }
+    if (uid.id != 0) {
+      query = {
+        ...query,
+        idUp3: ref?.id_up3
+      }
+
+      if (up3.id != 0) {
+        query = {
+          ...query,
+          posko: ref?.id_posko
+        }
+
+        if (posko.id != 0) {
+          query = {
+            ...query,
+            idUlp: ref?.id_ulp
+          }
+        }
+      }
+    }
+  } else {
+    if (uid.id != 0) {
+      query = {
+        ...query,
+        idUid: uid.id
+      }
+      if (up3.id != 0) {
+        query = {
+          ...query,
+          idUp3: up3.id
+        }
+        if (posko.id != 0) {
+          query = {
+            ...query,
+            posko: posko.id
+          }
+        }
+      }
+    }
+  }
+
   loadingSubData.value = true
   await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
     .then((result) => {
diff --git a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
index 5758cfa..c9b82a3 100755
--- a/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
+++ b/src/components/Pages/Monalisa/Laporan/Bulanan/MonalisaLB_AgingComplaint.vue
@@ -876,8 +876,8 @@ const getDetail = async () => {
   loadingSubData.value = true
   await requestGraphQl(
     parameterRequest.value.type == 'gangguan'
-      ? queries.keluhan.rekap.rekapKeluhanAllDetail
-      : queries.keluhan.rekap.rekapKeluhanAllDetail,
+      ? queries.monalisa.laporan.bulanan.agingComplaintBulananDetail
+      : queries.monalisa.laporan.bulanan.agingComplaintBulananDetail,
     query
   )
     .then((result) => {
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
index 84c5317..b0a549a 100755
--- a/src/components/Pages/Welcome.vue
+++ b/src/components/Pages/Welcome.vue
@@ -129,6 +129,7 @@
       <dt class="text-xs text-center text-gray-500">
         Copyright © 2023 PT PLN (Persero). All Rights Reserved
       </dt>
+      <dt class="mt-4 text-xs font-bold text-center text-gray-800">Version {{ version }}</dt>
     </div>
   </div>
 </template>
@@ -142,6 +143,7 @@ import { type RouteRecordRaw } from 'vue-router'
 import { routes, extractLeafRoutes } from '@/router'
 import { navigationIcon } from '@/utils/route'
 import { detectOS } from '@/utils/helper'
+import { version } from '../../../package.json'
 
 const os = ref(detectOS())
 const command = useCommandPalattesStore()
diff --git a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
index a5cba1b..5fde2df 100644
--- a/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
+++ b/src/report/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts
@@ -15,7 +15,8 @@ const formatData = (rawData: any) => {
 
   const total: any = {
     jumlah: 0,
-    persen: []
+    persen: [],
+    ens: 0
   }
 
   rawData.forEach((data: any, index: any) => {
@@ -29,6 +30,7 @@ const formatData = (rawData: any) => {
 
     total.jumlah += data.jumlah
     total.persen.push(data.persen)
+    total.ens += data.ens
   })
 
   formattedData.push([
@@ -46,7 +48,7 @@ const formatData = (rawData: any) => {
       colSpan: 3
     },
     {
-      content: '19.169.174,65',
+      content: formatNumber(total.ens),
       colSpan: 2
     }
   ])
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 826b39b..1068cee 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -1723,6 +1723,7 @@ export const queries = {
           $is_cleansing_transaksi_tm: Int!
           $is_koreksi_transaksi_tm: Int!
           $is_koreksi_gangguan_dan_anev: Int!
+          $namaRegional: String
         ) {
           detailGangguanKoreksiTransaksiIndividu(
             bulan: $bulan
@@ -1736,6 +1737,7 @@ export const queries = {
             is_cleansing_transaksi_tm: $is_cleansing_transaksi_tm
             is_koreksi_transaksi_tm: $is_koreksi_transaksi_tm
             is_koreksi_gangguan_dan_anev: $is_koreksi_gangguan_dan_anev
+            namaRegional: $namaRegional
           ) {
             id
             no_laporan
@@ -1959,6 +1961,7 @@ export const queries = {
           $idUid: Int!
           $idUp3: Int!
           $idRegu: Int!
+          $isSelesai: Int!
         ) {
           detailGangguanDiselesaikanMobileApkt(
             dateFrom: $dateFrom
@@ -1967,6 +1970,7 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
             idRegu: $idRegu
+            isSelesai: $isSelesai
           ) {
             id
             nama_regional
@@ -2330,6 +2334,8 @@ export const queries = {
             no_telp_pelapor
             keterangan_pelapor
             media
+            nama_posko_baru
+            nama_posko_lama
           }
         }
       `
@@ -3395,6 +3401,44 @@ export const queries = {
             }
           }
         `,
+        agingComplaintBulananDetail: gql`
+          query detailAgingComplaintBulanan(
+            $bulan: Int!
+            $tahun: Int!
+            $namaRegional: String!
+            $idUlp: Int!
+            $idUid: Int!
+            $idUp3: Int!
+          ) {
+            detailAgingComplaintBulanan(
+              bulan: $bulan
+              tahun: $tahun
+              namaRegional: $namaRegional
+              idUlp: $idUlp
+              idUid: $idUid
+              idUp3: $idUp3
+            ) {
+              id
+              nama_regional
+              id_uid
+              nama_uid
+              id_up3
+              nama_up3
+              id_ulp
+              nama_ulp
+              no_laporan
+              alamat_pelapor
+              no_telp_pelapor
+              keterangan_pelapor
+              penyebab
+              kode_gangguan
+              jenis_gangguan
+              durasi_response_time
+              durasi_recovery_time
+              waktu_lapor
+            }
+          }
+        `,
         agingComplaintBulanan: gql`
           query agingComplaintBulanan(
             $namaRegional: String
@@ -4933,7 +4977,6 @@ export const queries = {
         $rekomendasiSistem: String
         $isDlpd: Int!
         $idUlp: Int!
-        $idPosko: Int!
         $idUid: Int!
         $idUp3: Int!
         $namaRegional: String
@@ -4946,7 +4989,6 @@ export const queries = {
           rekomendasiSistem: $rekomendasiSistem
           isDlpd: $isDlpd
           idUlp: $idUlp
-          idPosko: $idPosko
           idUid: $idUid
           idUp3: $idUp3
           namaRegional: $namaRegional
diff --git a/src/utils/api/api.rest.ts b/src/utils/api/api.rest.ts
index 655cca7..20977cf 100755
--- a/src/utils/api/api.rest.ts
+++ b/src/utils/api/api.rest.ts
@@ -5,6 +5,10 @@ const instance = axios.create({
   baseURL: url
 })
 
+const ax = axios.create({
+  baseURL: window.location.origin
+})
+
 const getUid = async () => await instance.get('/uid')
 const getUidRegional = async (regional: number) => await instance.get('/uid?regional=' + regional)
 const getRegional = async () => await instance.get('/regional')
@@ -13,6 +17,7 @@ const getJenisTransaksi = async () => await instance.get('/jenisTransaksi')
 const getUp3 = async (uid: number) => await instance.get('/up3?uid=' + uid)
 const getUlp = async (up3: number) => await instance.get('/ulp?up3=' + up3)
 const getPosko = async (uppp: number) => await instance.get('/posko?up3=' + uppp)
+const getVersion = async () => await ax.get('/version.json')
 export {
   getUid,
   getUp3,
@@ -21,5 +26,6 @@ export {
   getMedia,
   getJenisTransaksi,
   getUidRegional,
-  getRegional
+  getRegional,
+  getVersion
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index d3dc71f..02dd69f 100755
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,7 +3,48 @@ import MenuProvider from '@/components/Pages/MenuProvider.vue'
 import Navigation from '@/components/Navigation/Navigation.vue'
 import { useMenuStore } from '@/stores/menu'
 import { RouterView } from 'vue-router'
+import { useDialogStore } from '@/stores/dialog'
+import { onMounted } from 'vue'
+import { getVersion } from '@/utils/api/api.rest'
 const menu = useMenuStore()
+const dialog = useDialogStore()
+
+const showDialogUpdate = () => {
+  dialog.type = 'success'
+  dialog.title = 'Update Aplikasi'
+  dialog.content =
+    'Aplikasi telah diperbarui. Silahkan muat ulang aplikasi untuk melihat perubahan.'
+  dialog.confirmText = 'Muat Ulang'
+  dialog.showCancelButton = false
+  dialog.onConfirm = () => {
+    window.location.reload()
+  }
+  dialog.dismissOnAction = false
+  dialog.open = true
+}
+
+const checkVersion = () => {
+  getVersion().then((response) => {
+    if (response.data.version) {
+      const version = response.data.version
+      const localVersion = localStorage.getItem('version')
+      if (localVersion) {
+        if (localVersion !== version) {
+          localStorage.setItem('version', version)
+          showDialogUpdate()
+        }
+      } else {
+        localStorage.setItem('version', version)
+      }
+    }
+
+    setTimeout(() => {
+      checkVersion()
+    }, 60000)
+  })
+}
+
+onMounted(() => checkVersion())
 </script>
 
 <template>