From 13dce362c5321d7b76184b9e9d91a8c9b13c9047 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 18 Apr 2024 10:22:43 +0700
Subject: [PATCH 1/3] fix: anomali keluhan

---
 .../Pages/Anomali/Keluhan/Anomali_LAPPKU.vue  |  57 +++-
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    | 277 +++++++++++++++---
 2 files changed, 285 insertions(+), 49 deletions(-)

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)

From 6a6b31cfe30c58211635f2759e9dc70e85b08f1a Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 18 Apr 2024 10:35:40 +0700
Subject: [PATCH 2/3] fix: ens in report monalisa gangguan per jenis gangguan

---
 .../Gangguan/Rekap/MonalisaGR_GangguanPerJenisGangguan.ts   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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
     }
   ])

From a4293c21444e1b5d949ff1bfabfcf498194b61ea Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 18 Apr 2024 11:04:20 +0700
Subject: [PATCH 3/3] fix: ctt dan kwh

---
 .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue    | 233 +++++++++++++++---
 src/utils/api/api.graphql.ts                  |   2 -
 2 files changed, 196 insertions(+), 39 deletions(-)

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/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index c34e990..4995ce7 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -4972,7 +4972,6 @@ export const queries = {
         $rekomendasiSistem: String
         $isDlpd: Int!
         $idUlp: Int!
-        $idPosko: Int!
         $idUid: Int!
         $idUp3: Int!
         $namaRegional: String
@@ -4985,7 +4984,6 @@ export const queries = {
           rekomendasiSistem: $rekomendasiSistem
           isDlpd: $isDlpd
           idUlp: $idUlp
-          idPosko: $idPosko
           idUid: $idUid
           idUp3: $idUp3
           namaRegional: $namaRegional