Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

2024-03-25 09:29:05 +07:00
parent 3b6f7efccd a59565679f
commit 2236c9d9d3
35 changed files with 2395 additions and 4829 deletions
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@ -339,22 +339,22 @@
          css-class="!text-right"
          :customize-text="(e: any) => formatNumber(e.value)"
        />
-        <!-- <DxGroupItem
+        <DxGroupItem
          :show-in-group-footer="false"
          :align-by-column="true"
          column="persen_selesai"
          summary-type="avg"
          css-class="!text-right"
          :customize-text="(e: any) => formatPercentage(e.value)"
-        /> -->
-        <DxGroupItem
+        />
+        <!-- <DxGroupItem
          :show-in-group-footer="false"
          :align-by-column="true"
          column="persen_selesai"
          name="persenSelesai"
          summary-type="custom"
          css-class="!text-right"
-        />
+        /> -->
        <DxGroupItem
          :show-in-group-footer="false"
          :align-by-column="true"
@ -1070,7 +1070,6 @@ import {
  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
-import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@ -51,10 +51,8 @@
        css-class="custom-table-column"
        :width="50"
        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        data-type="number"
+        data-field="number"
        caption="No"
-        name="number"
        cell-template="formatNumber"
      />
      <DxColumn
@ -556,7 +554,7 @@ const getDetail = () => {

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailGangguanAlihPosko
    }
  })

@ -618,15 +616,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSubSelected.value = selectedRowsData[0]
  }
-  console.log(data)
 }

 const filterData = (params: any) => {
@ -650,9 +647,17 @@ const filterData = (params: any) => {

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanAlihPosko
+      const refs = [...queryResult.data.rekapitulasiGangguanAlihPosko].sort((a: any, b: any) =>
+        a.nama_uid.localeCompare(b.nama_uid)
+      )
+
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
    }
-    console.log(queryResult.data)
  })

  onError((error) => {
@ -667,9 +672,16 @@ const filterData = (params: any) => {
 const filters = ref()
 onMounted(() => {
  if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a, b) =>
+    const refs = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a: any, b: any) =>
      a.nama_uid.localeCompare(b.nama_uid)
    )
+
+    data.value = refs.map((ref: any, index: number) => {
+      return {
+        ...ref,
+        number: index + 1
+      }
+    })
  }
 })
 </script>
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@ -605,15 +605,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSubSelected.value = selectedRowsData[0]
  }
-  console.log(data)
 }

 const filterData = (params: any) => {
@ -639,7 +638,6 @@ const filterData = (params: any) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
    }
-    console.log(queryResult.data)
  })

  onError((error) => {
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@ -797,6 +797,7 @@ const loadingSubData = ref(false)
 const getDetail = () => {
  loadingSubData.value = true
  const dateValue = filters.value.periode.split(' s/d ')
+  const { posko, uid, up3 } = filters.value
  const ref = dataSelected.value

  const query = {
@ -806,19 +807,22 @@ const getDetail = () => {
    dateTo: dateValue[1]
      ? dateValue[1].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
-    posko: ref.id_posko,
-    idUid: ref.id_uid,
-    idUp3: ref.id_up3
+    posko: posko ? posko.id : 0,
+    idUid: uid ? uid.id : 0,
+    idUp3: up3 ? up3.id : 0,
+    idRegu: ref.id_regu
  }

  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.gangguanDiselesaikanMobileAPKTDetail,
    query
  )

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      console.log(queryResult.data.detailGangguanDiselesaikanMobileApkt)
+
+      dataSub.value = queryResult.data.detailGangguanDiselesaikanMobileApkt
    }
  })

@ -880,15 +884,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSubSelected.value = selectedRowsData[0]
  }
-  console.log(data)
 }

 const filterData = (params: any) => {
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@ -50,7 +50,13 @@
      />
      <DxColumnFixing :enabled="true" />

-      <DxColumn css-class="custom-table-column" :width="60" alignment="center" caption="No" />
+      <!-- <DxColumn
+        css-class="custom-table-column"
+        :width="60"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="No"
+      /> -->
      <DxColumn
        :width="120"
        alignment="center"
@ -276,7 +282,7 @@
      <DxSummary>
        <DxGroupItem
          :show-in-group-footer="true"
-          column="No"
+          column="Kode"
          display-format="Total"
          css-class="!text-left"
        />
@ -858,7 +864,6 @@ const filterData = (params: any) => {
  onResult((queryResult) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiJenisGangguanSE004
-      console.log(queryResult.data.rekapitulasiJenisGangguanSE004)
    }

    reportMeta.value = filters.value
@ -928,8 +933,8 @@ const showDetail = () => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@ -365,7 +365,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="no_laporan"
            caption="No Laporan"
            css-class="custom-table-column"
            cell-template="formatText"
@ -373,7 +373,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_lapor"
            caption="Tgl Lapor"
            css-class="custom-table-column"
            cell-template="formatText"
@ -381,7 +381,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_lapor_sblm"
            caption="Tgl Lapor Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -389,7 +389,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_lapor_sdh"
            caption="Tgl Lapor Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -397,7 +397,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_penugasan_sblm"
            caption="Tgl Penugasan Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -405,7 +405,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_penugasan_sdh"
            caption="Tgl Penugasan Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -413,7 +413,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_perjalanan_sblm"
            caption="Tgl Perjalanan Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -421,7 +421,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_perjalanan_sdh"
            caption="Tgl Perjalanan Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -429,7 +429,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_pengerjaan_sblm"
            caption="Tgl Pengerjaan Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -437,7 +437,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_pengerjaan_sdh"
            caption="Tgl Pengerjaan Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -445,7 +445,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sementara_sblm"
            caption="Tgl Nyala Sementara Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -453,7 +453,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sementara_sdh"
            caption="Tgl Nyala Sementara Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -461,7 +461,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sblm"
            caption="Tgl Nyala Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -469,7 +469,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_nyala_sdh"
            caption="Tgl Nyala Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -477,7 +477,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_selesai_sblm"
            caption="Tgl Selesai Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -485,7 +485,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_selesai_sdh"
            caption="Tgl Selesai Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -493,31 +493,31 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tgl_selesai_sdh"
            caption="Durasi Respon Time Sebelum"
            css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
          />
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="durasi_response_time_sdh"
            caption="Durasi Respon Time Koreksi"
            css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
          />
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="durasi_recovery_time_sdh"
            caption="Durasi Recovery Time Koreksi"
            css-class="custom-table-column"
-            cell-template="formatText"
+            cell-template="formatTime"
          />
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="kelompok_sblm"
            caption="Kelompok ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -525,7 +525,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="kelompok_sdh"
            caption="Kelompok ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -533,7 +533,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="sub_kelompok_sblm"
            caption="Sub Kelompok ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -541,7 +541,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="sub_kelompok_sdh"
            caption="Sub Kelopok ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -549,7 +549,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="fasilitas_id_sblm"
            caption="Fasilitas ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -557,7 +557,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="fasilitas_id_sdh"
            caption="Fasilitas ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -565,7 +565,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="sub_fasilitas_id_sblm"
            caption="Sub Fasilitas ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -573,7 +573,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="sub_fasilitas_id_sdh"
            caption="Sub Fasilitas ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -581,7 +581,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="equipment_id_sblm"
            caption="Equipment ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -589,7 +589,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="equipment_id_sdh"
            caption="Equipment ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -597,7 +597,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="event_damage_sblm"
            caption="Event Damage ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -605,7 +605,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="event_damage_sdh"
            caption="Event Damage ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -613,7 +613,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="cause_id_sblm"
            caption="Cause ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -621,7 +621,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="cause_id_sdh"
            caption="Cause ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -629,7 +629,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="cause_group_id_sblm"
            caption="Cause Group ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -637,7 +637,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="cause_group_id_sdh"
            caption="Cause Group ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -645,7 +645,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="weather_id_sblm"
            caption="Weather ID Sebelum"
            css-class="custom-table-column"
            cell-template="formatText"
@ -653,7 +653,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="weather_id_sdh"
            caption="Weather ID Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -661,7 +661,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="grup_koreksi"
            caption="Group Koreksi"
            css-class="custom-table-column"
            cell-template="formatText"
@ -669,7 +669,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="alasan"
            caption="ALASAN"
            css-class="custom-table-column"
            cell-template="formatText"
@ -677,7 +677,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="idpel_nometer"
            caption="IDPEL/NO METER"
            css-class="custom-table-column"
            cell-template="formatText"
@ -685,7 +685,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="keterangan_pelapor"
            caption="Keterangan Pelapor"
            css-class="custom-table-column"
            cell-template="formatText"
@ -693,7 +693,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="nama_posko"
            caption="Posko"
            css-class="custom-table-column"
            cell-template="formatText"
@ -701,7 +701,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="tindakan"
            caption="Tindakan"
            css-class="custom-table-column"
            cell-template="formatText"
@ -709,7 +709,7 @@
          <DxColumn
            :width="150"
            alignment="center"
-            data-field=""
+            data-field="penyebab"
            caption="Penyebab"
            css-class="custom-table-column"
            cell-template="formatText"
@ -739,222 +739,346 @@
      <div class="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-[135px] text-gray-800">No Laporan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Lapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor" 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">Tgl Lapor Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_lapor_sblm"
+            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">Tgl Lapor Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_lapor_sdh" 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">Tgl Penugasan Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_penugasan_sblm"
+            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">Tgl Penugasan Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_penugasan_sdh"
+            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">Tgl Perjalanan Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_perjalanan_sblm"
+            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">Tgl Perjalanan Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_perjalanan_sdh"
+            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">Tgl Pengerjaan Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_pengerjaan_sblm"
+            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">Tgl Pengerjaan Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_pengerjaan_sdh"
+            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">Tgl Nyala Sementara Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sementara_sblm"
+            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">Tgl Nyala Sementara Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sementara_sdh"
+            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">Tgl Nyala Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_nyala_sblm"
+            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">Tgl Nyala Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_nyala_sdh" 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">Tgl Selesai Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_selesai_sblm"
+            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">Tgl Selesai Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_selesai_sdh"
+            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">Durasi Respon Time Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_response_time_sblm)
+                ? formatWaktu(dataSelected?.durasi_response_time_sblm)
+                : '-'
+            "
+            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">Durasi Respon Time Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_response_time_sdh)
+                ? formatWaktu(dataSelected?.durasi_response_time_sdh)
+                : '-'
+            "
+            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">Durasi Recovery Time Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSelected?.durasi_recovery_time_sdh)
+                ? formatWaktu(dataSelected?.durasi_recovery_time_sdh)
+                : '-'
+            "
+            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">Kelompok ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.kelompok_sblm" 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">Kelompok ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.kelompok_sdh" 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">Sub Kelompok ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_kelompok_sblm"
+            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">Sub Kelopok ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_kelompok_sdh"
+            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">Fasilitas ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.fasilitas_id_sblm"
+            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">Fasilitas ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.fasilitas_id_sdh"
+            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">Sub Fasilitas ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_fasilitas_id_sblm"
+            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">Sub Fasilitas ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.sub_fasilitas_id_sdh"
+            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">Equipment ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.equipment_id_sblm"
+            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">Equipment ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.equipment_id_sdh"
+            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">Event Damage ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.event_damage_sblm"
+            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">Event Damage ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.event_damage_sdh"
+            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">Cause ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cause_id_sblm" 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">Cause ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cause_id_sdh" 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">Cause Group ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true"  :value="dataSubSelected?.cause_group_id_sblm" 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">Cause Group ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.cause_group_id_sdh" 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">Weather ID Sebelum:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.weather_id_sblm"
+            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">Weather ID Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.weather_id_sdh"
+            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">Group Koreksi:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.grup_koreksi" 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">ALASAN:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.alasan" 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">IDPEL/NO METER:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Keterangan Pelapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">Posko:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" 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">Tindakan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" 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">Penyebab:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
        </div>
      </div>
    </div>
@ -1022,21 +1146,17 @@ const getDetail = () => {
      : new Date().toISOString().slice(0, 10),
    posko: ref?.id_posko ? ref?.id_posko : 0,
    idUid: ref?.id_uid ? ref?.id_uid : 0,
-    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
-    idRegu: ref?.id_regu ? ref?.id_regu : 0,
-    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
-    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
-    media: ref?.media ? ref?.media : ''
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0
  }

  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
+    queries.gangguan.rekap.gangguanKoreksiTransaksiIndividualDetail,
    query
  )

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
+      dataSub.value = queryResult.data.detailGangguanKoreksiTransaksiIndividu
    }
  })

@ -1098,8 +1218,8 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -1131,7 +1251,6 @@ const filterData = (params: any) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiGangguanKoreksiTransaksiIndividual
    }
-    console.log(queryResult.data)
  })

  onError((error) => {
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@ -983,15 +983,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSubSelected.value = selectedRowsData[0]
  }
-  console.log(data)
 }

 const filterData = (params: any) => {
@ -1015,11 +1014,10 @@ const filterData = (params: any) => {

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerPosko.sort((a: any, b: any) =>
-        a.nama_up3 > b.nama_up3 ? 1 : -1
-      )
+      const result: any[] = [...queryResult.data.rekapitulasiGangguanPerPosko]
+      console.table(result)
+      data.value = result.sort((a: any, b: any) => a?.nama_up3.localeCompare(b?.nama_up3))
    }
-    console.log(queryResult.data)
  })

  onError((error) => {
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@ -19,7 +19,7 @@
      :show-borders="true"
      :row-alternation-enabled="true"
      :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
      :column-width="100"
      @exporting="onExporting"
      :allow-column-resizing="true"
@ -35,8 +35,7 @@
        :show-indicator="showIndicator"
        :show-pane="showPane"
        :shading="shading"
-        v-if="loading"
-        v-model:visible="loading"
+        v-model:visible="loadingData"
        :enabled="true"
      />
      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@ -522,19 +521,352 @@
      </template>
    </DxDataGrid>
  </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Per Regu"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExporting"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            shading-color="rgba(0,0,0,0.4)"
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="true"
+          />
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="referensi_marking"
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_posko"
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tidakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="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-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Tgl Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" 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">Tgl Datang:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            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">Tgl Nyala:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            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">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            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">Durasi Recovery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            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">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Referensi Marking:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.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-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.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-[135px] text-gray-800">Posko:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_posko" 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">Tindakan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" 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">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>

 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type9 from '@/components/Form/FiltersType/Type9.vue'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
  DxColumn,
  DxColumnFixing,
  DxExport,
  DxLoadPanel,
+  DxPager,
  DxPaging,
  DxScrolling,
  DxSearchPanel,
@ -550,13 +882,82 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'

+const client = apolloClient()
+provideApolloClient(client)
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
+const loadingSubData = ref(false)

+const getDetail = () => {
+  loadingSubData.value = true
+  const dateValue = filters.value?.periode.split(' s/d ')
+  const ref = 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),
+    posko: ref?.id_posko ? ref?.id_posko : 0,
+    idUid: ref?.id_uid ? ref?.id_uid : 0,
+    idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+    idRegu: ref?.id_regu ? ref?.id_regu : 0,
+    idUlp: ref?.id_ulp ? ref?.id_ulp : 0,
+    namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+    media: ref?.media ? ref?.media : ''
+  }
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanAllDetail,
+    query
+  )
+
+  onResult((queryResult) => {
+    if (queryResult.data != undefined) {
+      dataSub.value = queryResult.data.detailGangguan
+    }
+  })
+
+  onError((error) => {
+    console.log(error)
+  })
+
+  watch(loading, (value) => {
+    loadingSubData.value = value
+  })
+}
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+  getDetail()
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
 const onExporting = (e: any) => {
  if (e.format === 'pdf') {
    const doc = new jsPDF()
@ -585,28 +986,25 @@ const onExporting = (e: any) => {
    e.cancel = true
  }
 }
-const dataGridRef = ref<DxDataGrid | null>(null)
-const clearSelection = () => {
-  const dataGrid = dataGridRef.value!.instance!
-  dataGrid.clearSelection()
-}
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
-  clearSelection()
+
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }

-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSubSelected.value = selectedRowsData[0]
+  }
+}

 const filterData = (params: any) => {
  const dateValue = params.periode.split(' s/d ')
  const { posko, uid, up3 } = params
-  refetch({
+
+  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
    dateFrom: dateValue[0]
      ? dateValue[0].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
@ -617,18 +1015,27 @@ const filterData = (params: any) => {
    idUid: uid ? uid.id : 0,
    idUp3: up3 ? up3.id : 0
  })
+
  onResult((queryResult) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiGangguanPerRegu
    }
-    console.log(queryResult.data)
  })
+
  onError((error) => {
    console.log(error)
  })
+
+  watch(loading, (value) => {
+    loadingData.value = value
+  })
 }

 const filters = ref({
+  uid: 0,
+  up3: 0,
+  posko: 0,
+  periode: '',
  groupBy: false
 })

--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerTanggal.vue
@ -743,8 +743,8 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
  if (selectedRowsData[0] != undefined) {
    dataSelected.value = selectedRowsData[0]
+    showDetail()
  }
-  showDetail()
 }

 const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
@ -754,6 +754,7 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
 }

 const filterData = (params: any) => {
+  loadingData.value = true
  const dateValue = params.periode.split(' s/d ')
  const { posko, uid, up3 } = params

@ -776,15 +777,24 @@ const filterData = (params: any) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiGangguanPerTanggal
    }
-    console.log(queryResult.data)
+
+    if (queryResult.networkStatus == 7) {
+      loadingData.value = false
+    }
+    console.log('loading', queryResult.loading)
+    console.log('networkStatus', queryResult.networkStatus)
+    console.log('stale', queryResult.stale)
  })

  onError((error) => {
    console.log(error)
+    // loadingData.value = false
  })

+  loadingData.value = loading.value
+
  watch(loading, (value) => {
-    loadingData.value = value
+    // loadingData.value = value
  })
 }

--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@ -44,8 +44,8 @@
      <DxColumn
        :width="50"
        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
        caption="NO"
+        data-field="number"
        data-type="number"
        css-class="custom-table-column"
        cell-template="formatNumber"
@ -447,7 +447,7 @@
          </template>

          <template #formatRating="{ data }">
-            <p class="cursor-pointer">
+            <div class="flex justify-center cursor-pointer">
              <vue3starRatings
                v-model="data.text"
                :starSize="20"
@ -456,7 +456,7 @@
                :numberOfStars="5"
                :disableClick="true"
              />
-            </p>
+            </div>
          </template>
        </DxDataGrid>
      </div>
@ -780,9 +780,16 @@ const filterData = (params: any) => {
  })
  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerPosko
+      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerPosko].sort((a: any, b: any) =>
+        a.nama_up3.localeCompare(b.nama_up3)
+      )
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
    }
-    console.log(queryResult.data)
  })
  onError((error) => {
    console.log(error)
@ -1201,6 +1208,13 @@ onMounted(() => {
        persen_nonrating: 5.88235294117647
      }
    ]
+      .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
  }
 })
 </script>
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@ -42,12 +42,21 @@
      <DxColumn
        :width="50"
        alignment="center"
-        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
        caption="NO"
+        data-field="number"
        data-type="number"
        css-class="custom-table-column"
        cell-template="formatNumber"
      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
      <DxColumn
        :width="150"
        alignment="center"
@ -438,7 +447,7 @@
          </template>

          <template #formatRating="{ data }">
-            <p class="cursor-pointer">
+            <div class="flex justify-center cursor-pointer">
              <vue3starRatings
                v-model="data.text"
                :starSize="20"
@ -447,7 +456,7 @@
                :numberOfStars="5"
                :disableClick="true"
              />
-            </p>
+            </div>
          </template>
        </DxDataGrid>
      </div>
@ -765,7 +774,15 @@ const filterData = (params: any) => {
  })
  onResult((queryResult) => {
    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
+      const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
+        a.nama_up3.localeCompare(b.nama_up3)
+      )
+      data.value = refs.map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
    }
    console.log(queryResult.data)
  })
@ -1183,6 +1200,13 @@ onMounted(() => {
        persen_nonrating: 0
      }
    ]
+      .sort((a: any, b: any) => a.nama_up3.localeCompare(b.nama_up3))
+      .map((ref: any, index: number) => {
+        return {
+          ...ref,
+          number: index + 1
+        }
+      })
  }
 })
 </script>