From 9e748c8f8b88cd14c45e0ad62b862870b049c780 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 11:21:31 +0700
Subject: [PATCH 1/5] Update data fields and values in DGangguan_MLD1K.vue

---
 .../Pages/Gangguan/Daftar/DGangguan_MLD1K.vue | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
index 8dc25a2..97cec24 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_MLD1K.vue
@@ -359,7 +359,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="create_date"
             caption="Create Date"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -367,7 +367,7 @@
           <DxColumn
             :width="200"
             alignment="center"
-            data-field=""
+            data-field="create_by"
             caption="User"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -375,7 +375,7 @@
           />
           <DxColumn
             alignment="center"
-            data-field=""
+            data-field="keterangan"
             caption="Keterangan"
             :allow-resizing="false"
             css-class="custom-table-column"
@@ -406,17 +406,17 @@
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Create Date:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.create_date" 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">User:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.create_by" 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">Keterangan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.keterangan" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -488,21 +488,13 @@ const getDetail = async () => {
   const selected = dataSelected.value
 
   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: selected?.id_ulp ? selected?.id_ulp : 0,
-    idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    noLaporan: selected?.no_laporan ? selected?.no_laporan : ''
   }
   loadingSubData.value = false
-  await requestGraphQl(queries.keluhan.rekap.rekapKeluhanAllDetail, query)
+  await requestGraphQl(queries.gangguan.daftar.melaporLebihDariSatuKaliDetail, query)
     .then((result) => {
       if (result.data.data != undefined) {
-        dataSub.value = result.data.data.detailKeluhanAll
+        dataSub.value = result.data.data.detailGangguanLaporLebihDariSatuKali
       } else {
         dataSub.value = []
       }

From fc66533037a94bcc7ef4857d82535eed488c014f Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 11:22:45 +0700
Subject: [PATCH 2/5] Add referensi_marking field to DGangguan_RecoveryTime.vue

---
 .../Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue         | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
index c708906..97a6d04 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_RecoveryTime.vue
@@ -265,6 +265,11 @@
         <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Referensi Marking :</h3>
+        <InputText :readonly="true" :value="dataSelected?.referensi_marking" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
         <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />

From 787884de6a6d21bb51a2a7785af0bb3751cd4fa1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 11:24:55 +0700
Subject: [PATCH 3/5] Update DGangguan_ResponseTime and DGangguan_STIDP
 components

---
 .../Daftar/DGangguan_ResponseTime.vue         |  5 +++++
 .../Pages/Gangguan/Daftar/DGangguan_STIDP.vue | 20 -------------------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
index c1b8bf4..a0ae45d 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_ResponseTime.vue
@@ -242,6 +242,11 @@
         <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Referensi Marking :</h3>
+        <InputText :readonly="true" :value="dataSelected?.referensi_marking" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
         <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
index e67ec9e..d98adb7 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_STIDP.vue
@@ -278,26 +278,6 @@
           class-name="flex-1"
         />
       </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.penyebab"
-          class-name="flex-1"
-        />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.tindakan"
-          class-name="flex-1"
-        />
-      </div>
     </div>
   </DetailDialog>
 </template>

From bd137bcc9b94c7dbee9ebb5b4997c5fd196740dc Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 12:00:55 +0700
Subject: [PATCH 4/5] Refactor code to improve performance and readability

---
 .../Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue    | 185 ++++++++++++++----
 1 file changed, 145 insertions(+), 40 deletions(-)

diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 589f617..3e168e2 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
       ref="dataGridRef"
+      :data-source="data"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
       :show-column-lines="true"
@@ -40,49 +41,54 @@
 
       <DxColumn
         alignment="center"
-        data-field="nama_posko"
+        data-field="nama_ulp"
         caption="Nama Unit"
         css-class="custom-table-column"
+        cell-template="formatText"
       />
       <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="total_wo_cc123"
+            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="total_wo_pln_mobile"
+            data-field="wo_pln_mobile"
             data-type="number"
             caption="b"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo_comcen"
+            data-field="wo_comcen"
             data-type="number"
             caption="c"
             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="total_wo"
+            data-field="wo_total"
             data-type="number"
             caption="d=b+c"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -91,10 +97,11 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="rekomendasi_sistem_mendatangkan_petugas"
+            data-field="rekomendasi_mendatangkan_petugas"
             data-type="number"
             caption="e"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
         <DxColumn
@@ -105,10 +112,11 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="total_wo_loket"
+            data-field="rekomendasi_diberikan_ke_pelanggan"
             data-type="number"
             caption="f"
             css-class="custom-table-column"
+            cell-template="formatNumber"
           />
         </DxColumn>
       </DxColumn>
@@ -116,28 +124,48 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="dlpd"
+          data-field="dpld"
           data-type="number"
           caption="g"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="history_p2ti"
+          data-field="history_p2lt"
           data-type="number"
           caption="h"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <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>
     </DxDataGrid>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -158,8 +186,9 @@ import { Type3 } from '@/components/Form/FiltersType'
 import { useQuery } from '@vue/apollo-composable'
 import Filters from '@/components/Form/Filters.vue'
 import gql from 'graphql-tag'
-import { apolloClient, queries } from '@/utils/api/api.graphql'
+import { apolloClient, queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -205,38 +234,39 @@ const onExporting = (e: any) => {
   }
 }
 
-const filterData = (params: any) => {
-  const { posko, uid, up3 } = params
+const filterData = async (params: any) => {
+  const { posko, uid, up3, ulp } = params
   const dateValue = params.periode.split(' s/d ')
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.cttKwhPeriksa.laporanCttKwhPeriksa,
-    {
-      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
-    }
-  )
+  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),
+    posko: posko ? posko.id : '',
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idUlp: ulp ? ulp.id : 0,
+    namaRegional: ''
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.daftarGangguanDialihkanKePoskoLain
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.cttKwhPeriksa.laporanCttKwhPeriksa, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.laporanCttKwhPeriksa
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const getDetail = () => {
@@ -299,4 +329,79 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 const filters = ref()
+
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12102,
+        nama_ulp: 'ULP LIMA PULUH',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      },
+      {
+        id: 1,
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41230,
+        nama_ulp: 'ULP BACAN',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      },
+      {
+        id: 2,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      },
+      {
+        id: 3,
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31500,
+        nama_up3: 'UP3 TOLITOLI',
+        id_ulp: 31530,
+        nama_ulp: 'ULP BANGKIR',
+        wo_cc123: 14390,
+        wo_pln_mobile: 28344,
+        wo_comcen: 28344,
+        wo_total: 42734,
+        rekomendasi_mendatangkan_petugas: 21,
+        rekomendasi_diberikan_ke_pelanggan: 13,
+        dpld: 43,
+        history_p2lt: 5
+      }
+    ]
+  }
+})
 </script>

From f671f423dc82ce31e267c749eabebd90e3e4e938 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 30 Mar 2024 13:37:06 +0700
Subject: [PATCH 5/5] Refactor detail dialog in Gangguan pages

---
 .../Pages/Gangguan/Daftar/DGangguan_BM.vue    |  61 +++---
 .../Gangguan/Daftar/DGangguan_DMAPKT.vue      |  26 +--
 .../Rekap/RGangguan_JenisGangguan.vue         | 174 +++++++++---------
 3 files changed, 119 insertions(+), 142 deletions(-)

diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
index 9d50c19..8daefbc 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_BM.vue
@@ -182,17 +182,38 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Daftar Gangguan Berdasarkan Media"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
         <InputText :readonly="true" :value="dataSelected.no_laporan" class-name="flex-1" />
       </div>
 
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
+        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
+      </div>
+
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
@@ -234,36 +255,6 @@
         />
       </div>
 
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Status :</h3>
-        <InputText :readonly="true" :value="dataSelected?.status_akhir" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">IDPEL/NOMETER:</h3>
-        <InputText :readonly="true" :value="dataSelected?.idpel_nometer" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Alamat Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.alamat_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Telp Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.no_telp_pelapor" class-name="flex-1" />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Keterangan Pelapor:</h3>
-        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
-      </div>
-
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumper Lapor:</h3>
         <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
index 8bbac27..7286b1b 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DMAPKT.vue
@@ -182,11 +182,7 @@
     </DxDataGrid>
   </div>
 
-  <DetailDialog
-    :open="dialogDetail"
-    title="Daftar Gangguan Diselesaikan Mobile APKT"
-    @on-close="closeDialog"
-  >
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan" @on-close="closeDialog">
     <div class="w-full p-4 space-y-2 bg-white rounded-xl">
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">No Laporan:</h3>
@@ -278,26 +274,6 @@
           class-name="flex-1"
         />
       </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.penyebab"
-          class-name="flex-1"
-        />
-      </div>
-
-      <div class="flex flex-row items-center justify-between w-full">
-        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tindakan:</h3>
-        <InputText
-          :readonly="true"
-          type="textarea"
-          :value="dataSelected?.tindakan"
-          class-name="flex-1"
-        />
-      </div>
     </div>
   </DetailDialog>
 </template>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
index faaed93..18836d3 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguan.vue
@@ -69,10 +69,13 @@
         :width="120"
         alignment="center"
         data-field="sub_kelompok"
-        caption="Kelompok"
         css-class="custom-table-column"
-        group-index="0"
+        :group-index="0"
+        caption=""
         cell-template="formatText"
+        :calculate-group-value="
+          (rowData: any) => `${rowData.sub_kelompok} (${rowData.nama_sub_kelompok})`
+        "
       />
       <DxColumn
         :width="150"
@@ -562,6 +565,7 @@ const filterData = async (params: any) => {
             return {
               no: ++index,
               sub_kelompok: item.sub_kelompok,
+              nama_sub_kelompok: item.nama_sub_kelompok,
               kode: item.kode,
               jenisGangguan: item.tipe_permasalahan,
               laporan: {
@@ -620,119 +624,125 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = [
       {
-        id: 0,
-        kode: '01a',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Pelebur pembatas putus/rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01a',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 1,
-        kode: '01b',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'MCB pembatas rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01b',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 2,
-        kode: '01c',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'RELAY dan / atau CB rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01c',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 3,
-        kode: '01d',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Pelebur putus dan LBS jatuh atau rusak',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '01d',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       },
       {
-        id: 4,
-        kode: '06a',
+        nama_sub_kelompok: 'Kelompok sambungan tenaga listrik dan APP ',
+        sub_kelompok: '00',
+        avg_durasi_recovery: 0.0,
+        avg_durasi_response: 0.0,
+        max_durasi_recovery: 0,
+        max_durasi_response: 0,
+        min_durasi_recovery: 0,
+        min_durasi_response: 0,
+        persen_inproses: 0.0,
+        persen_selesai: 0.0,
         tipe_permasalahan: 'Kubikel APP/komponennya rusak atau gagal bekerja',
         total: 0,
-        total_selesai: 0,
-        persen_selesai: 0,
-        total_inproses: 0,
-        persen_inproses: 0,
-        total_durasi_response: 0,
-        avg_durasi_response: 0,
-        min_durasi_response: 0,
-        max_durasi_response: 0,
-        total_dibawah_sla_response: 0,
-        total_diatas_sla_response: 0,
+        kode: '06a',
         total_durasi_recovery: 0,
-        avg_durasi_recovery: 0,
-        min_durasi_recovery: 0,
-        max_durasi_recovery: 0,
+        total_durasi_response: 0,
+        total_diatas_sla_recovery: 0,
+        total_diatas_sla_response: 0,
         total_dibawah_sla_recovery: 0,
-        total_diatas_sla_recovery: 0
+        total_dibawah_sla_response: 0,
+        total_inproses: 0,
+        total_selesai: 0
       }
     ].map((item: any, index: number) => {
       return {
         no: ++index,
         sub_kelompok: item.sub_kelompok,
+        nama_sub_kelompok: item.nama_sub_kelompok,
         kode: item.kode,
         jenisGangguan: item.tipe_permasalahan,
         laporan: {