From 3ff5e44a276bf246fa6380166e7e0abd6898e1f9 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 1 Apr 2024 03:23:27 +0700
Subject: [PATCH] Update Anomali_LAPPGU_LPP and Anomali_LAPPGP_LPP components

---
 .../Anomali/Gangguan/Anomali_LAPPGP_LPP.vue   |  32 +++
 .../Anomali/Gangguan/Anomali_LAPPGU_LPP.vue   |  31 +++
 .../Pages/Anomali/Keluhan/Anomali_LAPPKU.vue  | 139 ++++++-----
 .../Anomali/Keluhan/Anomali_LAPPKU_LPP.vue    |  56 ++++-
 .../Anomali/Keluhan/Anomali_LAPPKU_LPT.vue    | 229 ++++++++++++++++--
 src/utils/api/api.graphql.ts                  | 113 +++++++++
 6 files changed, 517 insertions(+), 83 deletions(-)

diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 481d60e..bffcc18 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -37,6 +37,37 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+    <!-- <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      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"
+    /> -->
     <DxColumn
       :width="170"
       alignment="center"
@@ -179,6 +210,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
index 2ad931f..441cc5f 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPP.vue
@@ -37,6 +37,37 @@
       css-class="custom-table-column"
       cell-template="formatText"
     />
+    <!-- <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      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"
+    /> -->
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
index cd86335..84f8d4c 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU.vue
@@ -1,10 +1,17 @@
 <template>
-    <Filters @run-search="() => filterData(filters)" class="mb-4">
-        <Type4 @update:filters="(value) => filters = value" />
-    </Filters>
+  <Filters @run-search="() => filterData(filters)" class="mb-4">
+    <Type4
+      @update:filters="(value) => (filters = value)"
+      :jenis-laporan="[
+        { id: 1, name: 'Laporan Berulang Unit' },
+        { id: 2, name: 'Laporan Rating Negatif' },
+        { id: 3, name: 'Laporan Skip Step' }
+      ]"
+    />
+  </Filters>
 
-    <Anomali_LAPPKU_LPT :data="data" />
-    <Anomali_LAPPKU_LPP :data="data" />
+  <Anomali_LAPPKU_LPT :data="data" :loading="loadingData" />
+  <Anomali_LAPPKU_LPP :data="data" />
 </template>
 
 <script setup lang="ts">
@@ -14,66 +21,76 @@ import { Anomali_LAPPKU_LPT, Anomali_LAPPKU_LPP } from '../.'
 import { Type4 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const closedialogDetail = () => (dialogDetail.value = false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)
 
-const GET_laporanCheckInCheckOut = gql`
-  query laporanCheckInCheckOut($dateFrom: Date!, $dateTo: Date!, $posko: String, $idUid: Int, $idUp3: Int) {
-    laporanCheckInCheckOut(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-    avg_durasi_wo_gangguan_individual
-    avg_durasi_wo_penugasan_khusus
-    avg_rct_wo_gangguan_individual
-    avg_rpt_wo_gangguan_individual
-    jumlah_wo_gangguan_individual
-    jumlah_wo_penugasan_khusus
-    personil_yantek
-    user_regu
-    }
+const filters = ref({
+  jenisLaporan: {
+    id: 1,
+    name: 'Laporan Berulang Unit'
+  },
+  ulp: 0,
+  uid: 0,
+  up3: 0
+})
+
+const resetData = () => {
+  data.value = []
+  dataSub.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const { ulp, uid, up3, jenisLaporan } = params
+  console.table('LAPPKU', jenisLaporan)
+  const dateValue = params.periode.split(' s/d ')
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUlp: ulp ? ulp.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    namaRegional: ''
   }
-`
-const filterData = (params: any) => {
-    const { posko, uid, up3 } = params
-    const dateValue = params.periode.split(' s/d ')
-    refetch({
-        dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id : 0,
-        idUp3: up3 ? up3.id : 0
-    })
-    onResult((queryResult) => {
-        if (queryResult.data != undefined) {
-            queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-                data.value = [
-                    ...data.value,
-                    {
-                        ...item,
-                    }
-                ]
-            })
+
+  loadingData.value = true
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.keluhan.unitBerulang
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.keluhan.unitRatingNegatif
+        : queries.anomali.keluhan.unitSkipStep,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif
+        } else {
+          data.value = result.data.data.anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep
         }
-        console.log(queryResult.data)
-        console.log(queryResult.loading)
-        console.log(queryResult.networkStatus)
+      } else {
+        data.value = []
+      }
     })
-    onError((error) => {
-        console.log(error)
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
     })
 }
-const { onResult, onError, loading, refetch } = useQuery(
-    GET_laporanCheckInCheckOut,
-    {
-        dateFrom: new Date().toISOString().slice(0, 10),
-        dateTo: new Date().toISOString().slice(0, 10),
-        posko: '',
-        idUid: 0,
-        idUp3: 0
-    }
-)
-const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
index 5d03e36..9dbff21 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPP.vue
@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -17,6 +18,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping auto-expand-all="false" expand-mode="rowClick" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -26,7 +28,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -40,18 +41,20 @@
 
     <DxColumn
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
     />
     <DxColumn alignment="center" caption="Total WO PLN Mobile" css-class="custom-table-column">
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="wo_total"
         data-type="number"
         caption="a"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -62,10 +65,11 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="total_anomali"
         data-type="number"
         caption="b"
         css-class="custom-table-column"
+        cell-template="formatNumber"
       />
     </DxColumn>
     <DxColumn
@@ -76,12 +80,45 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="persen_anomali_pln_mobile_marking"
         data-type="number"
         caption="c=b/a"
         css-class="custom-table-column"
+        :calculate-display-value="
+          (rowData: any) => (rowData.total_anomali / rowData.wo_total) * 100
+        "
+        cell-template="formatPercentage"
       />
     </DxColumn>
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
   </DxDataGrid>
 </template>
 
@@ -91,6 +128,7 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
@@ -103,12 +141,18 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { computed, ref } from 'vue'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
 const data = computed(() => props.data)
 const loading = ref(false)
diff --git a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
index 0036aa0..1bd83ff 100755
--- a/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
+++ b/src/components/Pages/Anomali/Keluhan/Anomali_LAPPKU_LPT.vue
@@ -4,6 +4,7 @@
   </div>
   <DxDataGrid
     ref="dataGridRef"
+    :data-source="data"
     :allow-column-reordering="true"
     class="max-h-[calc(100vh-140px)] mb-10"
     :show-column-lines="true"
@@ -18,6 +19,7 @@
     column-resizing-mode="widget"
     :word-wrap-enabled="true"
   >
+    <DxGrouping expand-mode="rowClick" :auto-expand-all="false" />
     <DxSelection mode="single" />
     <DxPaging :enabled="false" />
     <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -27,7 +29,6 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
       v-model:visible="loading"
       :enabled="true"
     />
@@ -42,59 +43,96 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field=""
+      data-field="nama_ulp"
       caption="Nama Unit"
       css-class="custom-table-column"
+      cell-template="formatText"
+    />
+    <DxColumn
+      alignment="center"
+      :min-width="170"
+      data-type="text"
+      data-field=""
+      caption="Semua Unit"
+      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"
     />
     <DxColumn alignment="center" caption="Total WO" css-class="custom-table-column">
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_cc123"
           data-type="number"
           caption="a"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_pln_mobile"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Loket" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_loket"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Lainnya" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_lainnya"
           data-type="number"
           caption="d"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_total"
           data-type="number"
           caption="e=a+b+c+d"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -107,30 +145,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="total_anomali"
           data-type="number"
           caption="f"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="anomali_cc123"
           data-type="number"
           caption="g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="total_anomali"
           data-type="number"
           caption="h=f+g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
     </DxColumn>
@@ -144,33 +185,180 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_pln_mobile"
           data-type="number"
           caption="i=f/e"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_cc123"
           data-type="number"
           caption="j=g/e"
           css-class="custom-table-column"
+          cell-template="formatPercentage"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="persen_anomali_total"
           data-type="number"
           caption="k=i+j"
           css-class="custom-table-column"
+          :calculate-display-value="
+            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+          "
+          cell-template="formatPercentage"
         />
       </DxColumn>
     </DxColumn>
+
+    <template #formatNumber="{ data }">
+      <p class="text-right cursor-pointer">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatPercentage="{ data }">
+      <p class="text-right cursor-pointer">
+        {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+      </p>
+    </template>
+
+    <template #formatText="{ data }">
+      <p class="text-left cursor-pointer">
+        {{ data.text }}
+      </p>
+    </template>
+
+    <template #formatTime="{ data }">
+      <p class="!text-right">
+        {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+      </p>
+    </template>
+
+    <DxSummary>
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_cc123"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_pln_mobile"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_loket"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_lainnya"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="wo_total"
+        summary-type="sum"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="anomali_pln_mobile_marking"
+        summary-type="sum"
+        css-class="!text-right"
+        :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"
+        :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"
+        :customize-text="(e: any) => formatNumber(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_cc123_marking"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_pln_mobile"
+        summary-type="avg"
+        css-class="!text-right"
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+      <DxGroupItem
+        :show-in-group-footer="false"
+        :align-by-column="true"
+        column="persen_anomali_total"
+        summary-type="avg"
+        css-class="!text-right"
+        :calculate-custom-summary="
+          (options: any) => {
+            if (options.summaryProcess === 'start') {
+              options.totalValue = 0
+              options.count = 0
+            }
+            if (options.summaryProcess === 'calculate') {
+              if (options.value) {
+                options.totalValue += options.value
+                options.count++
+              }
+            }
+            if (options.summaryProcess === 'finalize') {
+              return options.totalValue / options.count
+            }
+          }
+        "
+        :calculate-display-value="
+          (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+        "
+        :customize-text="(e: any) => formatPercentage(e.value)"
+      />
+    </DxSummary>
   </DxDataGrid>
 </template>
 
@@ -181,25 +369,34 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
-const loading = ref(false)
 const props = defineProps({
-  data: Array as () => any[]
+  data: Array as () => any[],
+  loading: {
+    type: Boolean,
+    default: false
+  }
 })
+const loading = computed(() => props.loading)
 const data = computed(() => props.data)
 
 const onExporting = (e: any) => {
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 9af4acc..47ed41a 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -3247,6 +3247,119 @@ export const queries = {
           }
         }
       `
+    },
+    keluhan: {
+      unitBerulang: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitBerulang(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `,
+      unitSkipStep: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitSkipStep(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `,
+      unitRatingNegatif: gql`
+        query anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+        ) {
+          anomaliLaporanPenangananPengaduanKeluhanUnitRatingNegatif(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+          ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_lainnya
+            wo_total
+            anomali_pln_mobile
+            anomali_cc123
+            total_anomali
+            persen_anomali_pln_mobile
+            persen_anomali_cc123
+          }
+        }
+      `
     }
   },
   cttKwhPeriksa: {