From 0d67631964a55a0d53d2aaa6482707aab04cb45c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Wed, 13 Mar 2024 15:51:35 +0700
Subject: [PATCH] Refactor API queries and update table column widths

---
 .../Pages/Gangguan/Rekap/RGangguan_CTTM.vue   |  184 ++-
 .../Pages/Gangguan/Rekap/RGangguan_KTI.vue    | 1316 ++++++++++++++++-
 .../Rekap/RGangguan_RatingPerPosko.vue        |   16 +-
 .../Rekap/RGangguan_RatingPerRegu.vue         |  990 ++++++++++++-
 src/utils/api/api.graphql.ts                  |   76 +-
 5 files changed, 2403 insertions(+), 179 deletions(-)

diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 26c7a41..1dc5add 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -1,48 +1,147 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="uid"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="januari"
+          data-type="number"
+          caption="Januari"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="februari"
+          data-type="number"
+          caption="Februari"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="maret"
+          data-type="number"
+          caption="Maret"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="april"
+          data-type="number"
+          caption="April"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="mei"
+          data-type="number"
+          caption="Mei"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="juni"
+          data-type="number"
+          caption="Juni"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="juli"
+          data-type="number"
+          caption="Juli"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="agustus"
+          data-type="number"
+          caption="Agustus"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="september"
+          data-type="number"
+          caption="September"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="oktober"
+          data-type="number"
+          caption="Oktober"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="november"
+          data-type="number"
+          caption="November"
+          css-class="custom-table-column"
+        />
+        <DxColumn
+          :width="100"
+          alignment="center"
+          data-field="desember"
+          data-type="number"
+          caption="Desember"
+          css-class="custom-table-column"
+        />
       </DxColumn>
     </DxDataGrid>
   </div>
@@ -109,13 +208,16 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.rekapGangguanAlihPosko, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: '',
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.rekap.rekapGangguanAlihPosko,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
@@ -143,4 +245,4 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index b1c5473..7e67a17 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -1,67 +1,960 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type18 @update:filters="(value) => filters = value" />
+    <Type18 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn alignment="center" data-field="uid" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="NamaUnitGroup"
+        :group-index="0"
+      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
-        <DxColumn :width="100" alignment="center" data-field="januari" data-type="number" caption="Januari"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="februari" data-type="number" caption="Februari"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="maret" data-type="number" caption="Maret"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="april" data-type="number" caption="April"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="mei" data-type="number" caption="Mei"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="juni" data-type="number" caption="Juni"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="juli" data-type="number" caption="Juli"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="agustus" data-type="number" caption="Agustus"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="september" data-type="number" caption="September"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="oktober" data-type="number" caption="Oktober"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="november" data-type="number" caption="November"
-          css-class="custom-table-column" />
-        <DxColumn :width="100" alignment="center" data-field="desember" data-type="number" caption="Desember"
-          css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          data-field="month1"
+          data-type="number"
+          caption="Januari"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month2"
+          data-type="number"
+          caption="Februari"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month3"
+          data-type="number"
+          caption="Maret"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month4"
+          data-type="number"
+          caption="April"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month5"
+          data-type="number"
+          caption="Mei"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month6"
+          data-type="number"
+          caption="Juni"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month7"
+          data-type="number"
+          caption="Juli"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month8"
+          data-type="number"
+          caption="Agustus"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month9"
+          data-type="number"
+          caption="September"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month10"
+          data-type="number"
+          caption="Oktober"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month11"
+          data-type="number"
+          caption="November"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          alignment="center"
+          data-field="month12"
+          data-type="number"
+          caption="Desember"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
+      <DxSummary>
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month1"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month2"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month3"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month4"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month5"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month6"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month7"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month8"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month9"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month10"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month11"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          column="month12"
+          summary-type="sum"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
+
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatPercentage="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }">
+        <p class="!text-right cursor-pointer">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Detail Rekapitulasi Koreksi Transaksi Individual"
+    @on-close="closeDetail"
+    :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
+          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="5" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[5, 10, 20]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            :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=""
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Penugasan Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Penugasan Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Perjalanan Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Perjalanan Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Pengerjaan Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Pengerjaan Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala Sementara Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala Sementara Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Selesai Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Selesai Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Respon Time Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Respon Time Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Recovery Time Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Kelompok ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Kelompok ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Sub Kelompok ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Sub Kelopok ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Fasilitas ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Fasilitas ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Sub Fasilitas ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Sub Fasilitas ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Equipment ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Equipment ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Event Damage ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Event Damage ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Cause ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Cause ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Cause Group ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Cause Group ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Weather ID Sebelum"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Weather ID Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Group Koreksi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="ALASAN"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tindakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            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="" 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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </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" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type18 from '@/components/Form/FiltersType/Type18.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
+  DxGroupItem,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -70,10 +963,30 @@ import { saveAs } from 'file-saver'
 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+
 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()
+const dataSubSelected = ref()
+const showDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -103,12 +1016,16 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
   console.log(data)
 }
 
-const data = ref<any[]>([])
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
+  console.log(dataSubSelected)
+}
+
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.rekap.gangguanKoreksiTransaksiIndividual,
   {
@@ -147,4 +1064,325 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        id_uid: 2,
+        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
+        id_up3: 11,
+        nama_up3: 'UP3 JATINEGARA',
+        id_ulp: 54410,
+        nama_ulp: 'UP3 JATINEGARA',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 1,
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12113,
+        nama_ulp: 'ULP PARAPAT',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 2,
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        month1: 0,
+        month2: 4,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 3,
+        id_uid: 140,
+        nama_uid: 'WILAYAH SUMATERA SELATAN, JAMBI & BENGKULU (S2JB)',
+        id_up3: 1404,
+        nama_up3: 'UP3 JAMBI',
+        id_ulp: 14310,
+        nama_ulp: 'ULP KOTA BARU',
+        month1: 0,
+        month2: 8,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 4,
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 116,
+        nama_up3: 'UP3 SIGLI',
+        id_ulp: 11660,
+        nama_ulp: 'ULP SIGLI',
+        month1: 0,
+        month2: 17,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 5,
+        id_uid: 56,
+        nama_uid: 'DISTRIBUSI BANTEN',
+        id_up3: 18,
+        nama_up3: 'UP3 CIKUPA',
+        id_ulp: 56640,
+        nama_ulp: 'UP3 CIKUPA',
+        month1: 0,
+        month2: 7,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 6,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52550,
+        nama_up3: 'UP3 DEMAK',
+        id_ulp: 52554,
+        nama_ulp: 'ULP WIROSARI',
+        month1: 0,
+        month2: 4,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 7,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52050,
+        nama_up3: 'UP3 SURAKARTA',
+        id_ulp: 52058,
+        nama_ulp: 'ULP SRAGEN',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 8,
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 150,
+        nama_up3: 'UP3 PAMEKASAN',
+        id_ulp: 51715,
+        nama_ulp: 'ULP KEPULAUAN KANGEAN',
+        month1: 0,
+        month2: 2,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 9,
+        id_uid: 2,
+        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
+        id_up3: 23,
+        nama_up3: 'UP3 LENTENG AGUNG',
+        id_ulp: 54740,
+        nama_ulp: 'UP3 LENTENG AGUNG',
+        month1: 0,
+        month2: 9,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 10,
+        id_uid: 180,
+        nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
+        id_up3: 183,
+        nama_up3: 'UP3 TANJUNGPINANG',
+        id_ulp: 18306,
+        nama_ulp: 'ULP TANJUNG BATU',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 11,
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32500,
+        nama_up3: 'UP3 PARE PARE',
+        id_ulp: 32550,
+        nama_ulp: 'ULP PANGSID',
+        month1: 0,
+        month2: 3,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 12,
+        id_uid: 140,
+        nama_uid: 'WILAYAH SUMATERA SELATAN, JAMBI & BENGKULU (S2JB)',
+        id_up3: 1404,
+        nama_up3: 'UP3 JAMBI',
+        id_ulp: 14320,
+        nama_ulp: 'ULP SEBERANG KOTA',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 13,
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32300,
+        nama_up3: 'UP3 KENDARI',
+        id_ulp: 32320,
+        nama_ulp: 'ULP WUA WUA',
+        month1: 0,
+        month2: 1,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      },
+      {
+        id: 14,
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 114,
+        nama_up3: 'UP3 MEULABOH',
+        id_ulp: 11444,
+        nama_ulp: 'ULP TEUNOM',
+        month1: 0,
+        month2: 3,
+        month3: 0,
+        month4: 0,
+        month5: 0,
+        month6: 0,
+        month7: 0,
+        month8: 0,
+        month9: 0,
+        month10: 0,
+        month11: 0,
+        month12: 0
+      }
+    ]
+  }
+})
+</script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 83946da..a2257f4 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -65,7 +65,7 @@
         cell-template="formatText"
       />
       <DxColumn
-        :width="150"
+        :width="200"
         alignment="center"
         data-field="nama_posko"
         caption="Nama Unit"
@@ -74,7 +74,6 @@
       />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
-          :width="150"
           alignment="center"
           data-field="total"
           data-type="number"
@@ -84,7 +83,6 @@
         />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn
-            :width="150"
             alignment="center"
             data-field="total_inproses"
             data-type="number"
@@ -93,7 +91,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="70"
             alignment="center"
             data-field="persen_inproses"
             data-type="number"
@@ -104,7 +101,6 @@
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn
-            :width="150"
             alignment="center"
             data-field="total_selesai"
             data-type="number"
@@ -113,7 +109,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="70"
             alignment="center"
             data-field="persen_selesai"
             data-type="number"
@@ -126,7 +121,6 @@
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
           <DxColumn
-            :width="150"
             alignment="center"
             data-field="total_rating"
             data-type="number"
@@ -135,7 +129,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="120"
             alignment="center"
             data-field="nilai_rating1"
             data-type="number"
@@ -144,7 +137,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="120"
             alignment="center"
             data-field="nilai_rating2"
             data-type="number"
@@ -153,7 +145,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="120"
             alignment="center"
             data-field="nilai_rating3"
             data-type="number"
@@ -162,7 +153,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="120"
             alignment="center"
             data-field="nilai_rating4"
             data-type="number"
@@ -171,7 +161,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="120"
             alignment="center"
             data-field="nilai_rating5"
             data-type="number"
@@ -180,7 +169,6 @@
             cell-template="formatNumber"
           />
           <DxColumn
-            :width="120"
             alignment="center"
             data-field="indeks_rating"
             data-type="number"
@@ -193,7 +181,6 @@
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
         <DxColumn
-          :width="150"
           alignment="center"
           data-field="total_nonrating"
           data-type="number"
@@ -202,7 +189,6 @@
           cell-template="formatNumber"
         />
         <DxColumn
-          :width="70"
           alignment="center"
           data-field="persen_nonrating"
           data-type="number"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 6b0c0dc..9a0dfd9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -1,81 +1,529 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onDataSelectionChanged"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO" data-type="number" css-class="custom-table-column" />
-      <DxColumn :width="150" alignment="center" data-field="" caption="Kode" css-class="custom-table-column" />
-      <DxColumn :width="150" alignment="center" data-field="" caption="Nama Regu" css-class="custom-table-column" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        data-type="number"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Kode"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field=""
+        caption="Nama Regu"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+        <DxColumn
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
-            css-class="custom-table-column" />
+          <DxColumn
+            alignment="center"
+            data-field="total_rating"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="nilai_rating1"
+            data-type="number"
+            caption="1"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="nilai_rating2"
+            data-type="number"
+            caption="2"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="nilai_rating3"
+            data-type="number"
+            caption="3"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="nilai_rating4"
+            data-type="number"
+            caption="4"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="nilai_rating5"
+            data-type="number"
+            caption="5"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            alignment="center"
+            data-field="indeks_rating"
+            data-type="number"
+            caption="Index"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-          css-class="custom-table-column" />
-        <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_nonrating"
+          data-type="number"
+          caption="Jml"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="70"
+          alignment="center"
+          data-field="persen_nonrating"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatPercentage="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }">
+        <p class="!text-right cursor-pointer">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Detail Rating Per Regu"
+    @on-close="closeDetail"
+    :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
+          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="5" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[5, 10, 20]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            :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=""
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Rating"
+            css-class="custom-table-column"
+            cell-template="formatRating"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Tlp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tindakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            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="" 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">Rating:</h3>
+          <InputText :readonly="true" value="" 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" />
+        </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="" 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="" 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="" 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="" 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" class-name="flex-1" value="" />
+        </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" />
+        </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="" 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="" 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="" 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" />
+        </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" type="textarea" value="" 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" />
+        </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" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -88,10 +536,30 @@ import { saveAs } from 'file-saver'
 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 { formatWaktu } from '@/components/Form/FiltersType/reference'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+
 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()
+const dataSubSelected = ref()
+const showDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showData = () => {
+  showDetail.value = true
+}
+
+const closeDetail = () => {
+  showDetail.value = false
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -121,19 +589,26 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
   console.log(data)
 }
 
-const data = ref<any[]>([])
-const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanRatingPerRegu, {
-  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: '',
-  idUid: 0,
-  idUp3: 0
-})
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
+  console.log(dataSubSelected)
+}
+
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.gangguan.rekap.gangguanRatingPerRegu,
+  {
+    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
+    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
+    posko: '',
+    idUid: 0,
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
@@ -161,4 +636,415 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52050,
+        nama_up3: 'UP3 SURAKARTA',
+        id_ulp: 52058,
+        nama_ulp: 'ULP SRAGEN',
+        id_posko: 520581,
+        nama_posko: 'POSKO ULP SRAGEN',
+        total: 5,
+        total_selesai: 5,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 2,
+        persen_rating: 40,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 2,
+        indeks_rating: 1,
+        total_nonrating: 3,
+        persen_nonrating: 60
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 150,
+        nama_up3: 'UP3 PAMEKASAN',
+        id_ulp: 51750,
+        nama_ulp: 'ULP KETAPANG',
+        id_posko: 517506,
+        nama_posko: 'POSKO ULP KETAPANG',
+        total: 5,
+        total_selesai: 5,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 140,
+        nama_uid: 'WILAYAH SUMATERA SELATAN, JAMBI & BENGKULU (S2JB)',
+        id_up3: 1404,
+        nama_up3: 'UP3 JAMBI',
+        id_ulp: 14390,
+        nama_ulp: 'ULP SABAK',
+        id_posko: 143901,
+        nama_posko: 'POSKO ULP SABAK',
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 2,
+        persen_rating: 100,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 2,
+        indeks_rating: 1,
+        total_nonrating: 0,
+        persen_nonrating: 0
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 539,
+        nama_up3: 'UP3 GUNUNG PUTRI',
+        id_ulp: 53867,
+        nama_ulp: 'ULP JONGGOL',
+        id_posko: 538671,
+        nama_posko: 'POSKO ULP JONGGOL',
+        total: 7,
+        total_selesai: 7,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 4,
+        persen_rating: 57.14285714285714,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 4,
+        indeks_rating: 1,
+        total_nonrating: 3,
+        persen_nonrating: 42.857142857142854
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 542,
+        nama_up3: 'UP3 MAJALAYA',
+        id_ulp: 53531,
+        nama_ulp: 'ULP MAJALAYA',
+        id_posko: 535311,
+        nama_posko: 'POSKO ULP MAJALAYA',
+        total: 4,
+        total_selesai: 4,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12115,
+        nama_ulp: 'ULP PEMATANG RAYA',
+        id_posko: 121155,
+        nama_posko: 'POSKO ULP PEMATANG RAYA',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 1,
+        persen_rating: 100,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 1,
+        indeks_rating: 1,
+        total_nonrating: 0,
+        persen_nonrating: 0
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 171,
+        nama_uid: 'DISTRIBUSI LAMPUNG',
+        id_up3: 17172,
+        nama_up3: 'UP3 METRO',
+        id_ulp: 17210,
+        nama_ulp: 'ULP SRIBAWONO',
+        id_posko: 172101,
+        nama_posko: 'POSKO ULP SRIBAWONO',
+        total: 18,
+        total_selesai: 18,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 12,
+        persen_rating: 66.66666666666666,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 12,
+        indeks_rating: 1,
+        total_nonrating: 6,
+        persen_nonrating: 33.33333333333333
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52200,
+        nama_up3: 'UP3 PURWOKERTO',
+        id_ulp: 52205,
+        nama_ulp: 'ULP WONOSOBO',
+        id_posko: 522051,
+        nama_posko: 'POSKO ULP WONOSOBO',
+        total: 23,
+        total_selesai: 23,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 22,
+        persen_rating: 95.65217391304348,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 22,
+        indeks_rating: 1,
+        total_nonrating: 1,
+        persen_nonrating: 4.3478260869565215
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12500,
+        nama_up3: 'UP3 RANTAU PRAPAT',
+        id_ulp: 12513,
+        nama_ulp: 'ULP LABUHAN BILIK',
+        id_posko: 125133,
+        nama_posko: 'POSKO ULP LABUHAN BILIK',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 150,
+        nama_up3: 'UP3 PAMEKASAN',
+        id_ulp: 51730,
+        nama_ulp: 'ULP BANGKALAN',
+        id_posko: 517304,
+        nama_posko: 'POSKO ULP BANGKALAN',
+        total: 32,
+        total_selesai: 32,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 3,
+        persen_rating: 9.375,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 3,
+        indeks_rating: 1,
+        total_nonrating: 29,
+        persen_nonrating: 90.625
+      },
+      {
+        id: 10,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 180,
+        nama_uid: 'WILAYAH RIAU DAN KEPULAUAN RIAU',
+        id_up3: 181,
+        nama_up3: 'UP3 PEKANBARU',
+        id_ulp: 18111,
+        nama_ulp: 'ULP PEKANBARU KOTA BARAT',
+        id_posko: 181111,
+        nama_posko: 'POSKO ULP PEKANBARU KOTA BARAT',
+        total: 109,
+        total_selesai: 109,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 11,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 536,
+        nama_up3: 'UP3 CIMAHI',
+        id_ulp: 53589,
+        nama_ulp: 'ULP LEMBANG',
+        id_posko: 535891,
+        nama_posko: 'POSKO ULP LEMBANG',
+        total: 17,
+        total_selesai: 17,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 17,
+        persen_rating: 100,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 17,
+        indeks_rating: 1,
+        total_nonrating: 0,
+        persen_nonrating: 0
+      },
+      {
+        id: 12,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32800,
+        nama_up3: 'UP3 BAUBAU',
+        id_ulp: 32820,
+        nama_ulp: 'ULP RAHA',
+        id_posko: 328201,
+        nama_posko: 'POSKO ULP RAHA',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 13,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32200,
+        nama_up3: 'UP3 WATAMPONE',
+        id_ulp: 32270,
+        nama_ulp: 'ULP PATANGKAI',
+        id_posko: 322701,
+        nama_posko: 'POSKO ULP PATANGKAI',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 14,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2220,
+        nama_up3: 'UP3 BARABAI',
+        id_ulp: 22250,
+        nama_ulp: 'ULP PARINGIN',
+        id_posko: 222501,
+        nama_posko: 'POSKO ULP PARINGIN',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 1,
+        persen_rating: 100,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 1,
+        indeks_rating: 1,
+        total_nonrating: 0,
+        persen_nonrating: 0
+      }
+    ]
+  }
+})
+</script>
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 1886a2c..555bca7 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -593,23 +593,31 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            in_process
-            indeks_rating
-            jumlah_non_rating
-            jumlah_rating
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
             nama_posko
-            persen_in_process
-            persen_non_rating
-            persen_rating
-            persen_selesai
-            rating_1
-            rating_2
-            rating_3
-            rating_4
-            rating_5
-            regu
-            selesai
             total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_rating
+            persen_rating
+            nilai_rating1
+            nilai_rating2
+            nilai_rating3
+            nilai_rating4
+            nilai_rating5
+            indeks_rating
+            total_nonrating
+            persen_nonrating
           }
         }
       `,
@@ -774,32 +782,36 @@ export const queries = {
         query rekapitulasiGangguanKoreksiTransaksiIndividual(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: Int!
+          $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
         ) {
           rekapitulasiGangguanKoreksiTransaksiIndividual(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            posko: $posko
+            idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            agustus
-            april
-            desember
-            februari
-            januari
-            juli
-            juni
-            maret
-            mei
-            november
-            oktober
-            september
-            uid
-            ulp
-            up3
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            month1
+            month2
+            month3
+            month4
+            month5
+            month6
+            month7
+            month8
+            month9
+            month10
+            month11
+            month12
           }
         }
       `,