diff --git a/.env.development b/.env.development
index 73a96a0..6bf8543 100755
--- a/.env.development
+++ b/.env.development
@@ -2,5 +2,7 @@ VITE_BASE_URL=http://localhost:5173
 VITE_BASE_DIRECTORY=/
 VITE_APP_VERSION=0.0.1
 VITE_APP_NAME='Executive Information System'
-VITE_APP_GRAPHQL_ENDPOINT=http://192.168.191.163:32169/graphql
-VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
\ No newline at end of file
+VITE_APP_GRAPHQL_ENDPOINT=http://127.0.0.1:32169/graphql
+# VITE_APP_REST_ENDPOINT=http://192.168.191.163:32180
+# VITE_APP_GRAPHQL_ENDPOINT=http://10.1.50.173:32180/graphql
+VITE_APP_REST_ENDPOINT=http://10.1.50.173:32181
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index 4e6cb21..c82a53f 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -18,13 +18,13 @@
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
       @selection-changed="onDataSelectionChanged"
-      :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
-      <DxPaging :page-size="40" :enabled="true" />
+      <!-- <DxPaging :page-size="40" :enabled="true" />
       <DxPager
         :visible="true"
         :allowed-page-sizes="[20, 40, 60]"
@@ -32,7 +32,7 @@
         :show-page-size-selector="true"
         :show-info="true"
         :show-navigation-buttons="true"
-      />
+      /> -->
       <DxLoadPanel
         :position="position"
         :show-indicator="showIndicator"
@@ -65,6 +65,15 @@
         cell-template="formatText"
       />
 
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field=""
+        caption="Semua Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -72,7 +81,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -81,7 +90,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="1"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -90,7 +99,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="2"
+        :group-index="3"
       />
       <!-- <DxColumn
         :width="150"
@@ -998,7 +1007,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
@@ -1020,7 +1030,7 @@ const showPane = ref(true)
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
-const dataSubSelected = ref<any>()
+const dataSubSelected = ref<any>(null)
 const dialogDataSelected = ref(false)
 const closeDialogDataSelected = () => (dialogDataSelected.value = false)
 const loadingData = ref(false)
@@ -1108,6 +1118,7 @@ const getDetail = () => {
 const showDialogDataSelected = () => {
   if (dataSelected.value != null) {
     dataSub.value = []
+    dataSubSelected.value = null
     dialogDataSelected.value = true
     getDetail()
   }
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
index 2584136..00bcb43 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_AlihPosko.vue
@@ -17,7 +17,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -65,11 +65,12 @@
       <DxColumn
         alignment="center"
         :min-width="180"
-        data-field="nama_up3"
-        caption="Nama UP3"
+        data-field="nama_uid"
+        caption="Nama UID"
         css-class="custom-table-column"
         :group-index="0"
       />
+
       <DxColumn
         alignment="center"
         :min-width="180"
@@ -118,20 +119,14 @@
         />
       </DxSummary>
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -143,6 +138,309 @@
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Alih Posko"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          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 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="Status"
+            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 Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            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="Sumber Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Petugas"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Posko Asal"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Posko Tujuan"
+            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 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">Status:</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">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" 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">Sumber 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">Nama Petugas:</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 Asal:</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 Tujuan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -160,7 +458,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxPager
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -171,11 +470,29 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import InputText from '@/components/InputText.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import DetailDialog from '@/components/Dialogs/DetailDialog.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<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showDetail = () => {
+  dialogDetail.value = true
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -205,11 +522,15 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
+  console.log(data)
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
   console.log(data)
 }
-const data = ref<any[]>([])
 
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanAlihPosko, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
@@ -250,7 +571,9 @@ const filterData = (params: any) => {
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko
+    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanAlihPosko.sort((a, b) =>
+      a.nama_uid.localeCompare(b.nama_uid)
+    )
   }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
index a3c88aa..ca6b734 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue
@@ -16,7 +16,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -84,20 +84,14 @@
         cell-template="formatNumber"
       />
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -116,7 +110,7 @@
 
       <DxSummary>
         <DxTotalItem
-          display-format="Call PLN 123"
+          display-format="Total"
           show-in-column="media"
           css-class="text-white !text-left"
         />
@@ -138,6 +132,296 @@
       </DxSummary>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Berdasarkan Media"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          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 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="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <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 Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            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="Tidakan"
+            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 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">Status:</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" 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">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" 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">Penyeban:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -150,6 +434,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -166,11 +451,29 @@ import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { dummyData } from '@/utils/dummy'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+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<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showDetail = () => {
+  dialogDetail.value = true
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -200,12 +503,15 @@ 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(data)
+}
 
 const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.berdasarkanMedia, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
index 38c3272..070ac87 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_CTTM.vue
@@ -41,7 +41,7 @@
       <DxColumn
         width="200"
         alignment="center"
-        data-field="nama_uid"
+        data-field="nama_ulp"
         caption="Nama Unit"
         css-class="custom-table-column"
         cell-template="formatText"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index 831b49e..77ad0e9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -11,7 +11,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
@@ -59,7 +59,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="regu"
+          data-field="nama_regu"
           caption="b"
           css-class="custom-table-column"
           cell-template="formatText"
@@ -151,7 +151,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="persen_laporan_mobile_nonmarking"
+                  data-field=""
                   caption="j=(i/d)*100"
                   css-class="custom-table-column"
                   cell-template="formatPercentage"
@@ -164,7 +164,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_response_mobile_nonmarking"
+                  data-field="avg_durasi_response_time_mobile_nonmarking"
                   caption="k"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -174,7 +174,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_recovery_mobile_nonmarking"
+                  data-field="avg_durasi_recovery_time_mobile_nonmarking"
                   caption="l"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -189,7 +189,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="total_laporan_mobile_marking"
+                  data-field="total_mobile_marking"
                   caption="m"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -199,7 +199,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="persen_laporan_mobile_marking"
+                  data-field=""
                   caption="n=(m/d)*100"
                   css-class="custom-table-column"
                   cell-template="formatPercentage"
@@ -212,7 +212,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_response_mobile_marking"
+                  data-field="avg_durasi_response_time_mobile_marking"
                   caption="o"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -222,7 +222,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_recovery_mobile_marking"
+                  data-field="avg_durasi_recovery_time_mobile_marking"
                   caption="p"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -239,7 +239,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="total_laporan_nonmobile_nonmarking"
+                  data-field="total_nonmobile_nonmarking"
                   caption="q"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -249,7 +249,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="persen_laporan_nonmobile_nonmarking"
+                  data-field=""
                   caption="r=(q/d)*100"
                   css-class="custom-table-column"
                   cell-template="formatPercentage"
@@ -262,7 +262,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_response_nonmobile_nonmarking"
+                  data-field="avg_durasi_response_time_nonmobile_nonmarking"
                   caption="s"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -272,7 +272,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_recovery_nonmobile_nonmarking"
+                  data-field="avg_durasi_recovery_time_nonmobile_nonmarking"
                   caption="t"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -287,7 +287,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="total_laporan_nonmobile_marking"
+                  data-field="total_nonmobile_marking"
                   caption="u"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -297,7 +297,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="persen_laporan_nonmobile_marking"
+                  data-field=""
                   caption="v=(u/d)*100"
                   css-class="custom-table-column"
                   cell-template="formatPercentage"
@@ -310,7 +310,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_response_nonmobile_marking"
+                  data-field="avg_durasi_response_time_nonmobile_marking"
                   caption="w"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -320,7 +320,7 @@
                 <DxColumn
                   :width="150"
                   alignment="center"
-                  data-field="avg_waktu_recovery_nonmobile_marking"
+                  data-field="avg_durasi_recovery_time_nonmobile_marking"
                   caption="x"
                   css-class="custom-table-column"
                   cell-template="formatNumber"
@@ -332,13 +332,13 @@
       </DxColumn>
 
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -350,18 +350,358 @@
       </template>
 
       <template #formatPercentage="{ data }">
-        <p class="text-right cursor-pointer">
-          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+        <p class="text-right cursor-pointer" @click="showDetail()">
+          {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%' }}
         </p>
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
+
+      <DxSummary>
+        <DxTotalItem
+          display-format="TOTAL"
+          show-in-column="nama_regu"
+          css-class="text-white !text-right"
+        />
+        <DxTotalItem
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total_selesai"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total_mobile_marking"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total_mobile_nonmarking"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total_nonmobile_marking"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total_nonmobile_nonmarking"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Diselesaikan Mobile APKT"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          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 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="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <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 Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            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="Tidakan"
+            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 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">Status:</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" 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">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" 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">Penyeban:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -375,10 +715,13 @@ import {
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -389,11 +732,28 @@ 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 InputText from '@/components/InputText.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.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<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showDetail = () => {
+  dialogDetail.value = true
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -423,11 +783,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(data)
+}
+
 const { onResult, onError, loading, refetch } = useQuery(
   queries.gangguan.rekap.gangguanDiselesaikanMobileAPKT,
   {
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
index 6dfb696..4fab055 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_JenisGangguanSE.vue
@@ -19,7 +19,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -61,16 +61,16 @@
         data-field="kode"
         caption="Kode"
         css-class="custom-table-column"
-        cell-template="cellCenter"
+        cell-template="formatText"
       />
       <DxColumn
         :width="120"
         alignment="center"
-        data-field="kode"
-        caption="Kode"
+        data-field="id_fasilitas"
+        caption=""
         css-class="custom-table-column"
-        cell-template="cellCenter"
-        name="kodeGroup"
+        cell-template="formatText"
+        name="idFasilitasGroup"
         :group-index="0"
       />
       <DxColumn
@@ -253,20 +253,14 @@
         </DxColumn>
       </DxColumn>
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -278,7 +272,7 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
@@ -286,7 +280,7 @@
       <DxSummary>
         <DxGroupItem
           :show-in-group-footer="true"
-          column="no"
+          column="No"
           display-format="Total"
           css-class="!text-left"
         />
@@ -349,7 +343,7 @@
         <DxGroupItem
           :show-in-group-footer="true"
           column="max_durasi_response"
-          summary-type="min"
+          summary-type="max"
           display-format="{0}"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
@@ -357,7 +351,7 @@
         <DxGroupItem
           :show-in-group-footer="true"
           column="min_durasi_response"
-          summary-type="max"
+          summary-type="min"
           display-format="{0}"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
@@ -429,6 +423,296 @@
       </DxSummary>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan/Jenis Gangguan SE 004"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          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 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="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <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 Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            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="Tidakan"
+            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 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">Status:</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" 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">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" 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">Penyeban:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -447,7 +731,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxPager
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -457,13 +742,27 @@ import { Workbook } from 'exceljs'
 
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
-import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import InputText from '@/components/InputText.vue'
+import DetailDialog from '@/components/Dialogs/DetailDialog.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<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showDetail = () => {
+  dialogDetail.value = true
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -531,15 +830,396 @@ const filterData = (params: any) => {
   })
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
+  console.log(data)
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
   console.log(data)
 }
 
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.rekap.rekapitulasiJenisGangguanSE004
+    data.value = [
+      {
+        id: '0',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Kabel',
+        kode: '11232',
+        total: 1754,
+        total_selesai: 1754,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 248343,
+        avg_durasi_response: 2.360302677532014,
+        min_durasi_response: 0,
+        max_durasi_response: 7020,
+        total_dibawah_sla_response: 1714,
+        total_diatas_sla_response: 4,
+        total_durasi_recovery: 7444445,
+        avg_durasi_recovery: 70.67217787913341,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 199591,
+        total_dibawah_sla_recovery: 1660,
+        total_diatas_sla_recovery: 94,
+        total_response: 1718,
+        total_recovery: 1754
+      },
+      {
+        id: '1',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'MV Cell',
+        kode: '11511',
+        total: 56062,
+        total_selesai: 56061,
+        persen_selesai: 99.99821626056865,
+        total_inproses: 1,
+        persen_inproses: 0.0017837394313438694,
+        total_durasi_response: 80699092,
+        avg_durasi_response: 23.504602211915806,
+        min_durasi_response: 24,
+        max_durasi_response: 2592137,
+        total_dibawah_sla_response: 52700,
+        total_diatas_sla_response: 3360,
+        total_durasi_recovery: 1398860783,
+        avg_durasi_recovery: 415.39603995718875,
+        min_durasi_recovery: 101,
+        max_durasi_recovery: 2713062,
+        total_dibawah_sla_recovery: 49187,
+        total_diatas_sla_recovery: 6873,
+        total_response: 56060,
+        total_recovery: 56060
+      },
+      {
+        id: '2',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'JTR',
+        kode: '13400',
+        total: 6022,
+        total_selesai: 6022,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 8262056,
+        avg_durasi_response: 22.382392026578074,
+        min_durasi_response: -16519,
+        max_durasi_response: 76299,
+        total_dibawah_sla_response: 5655,
+        total_diatas_sla_response: 365,
+        total_durasi_recovery: 87345586,
+        avg_durasi_recovery: 241.25440053138493,
+        min_durasi_recovery: -16459,
+        max_durasi_recovery: 2499716,
+        total_dibawah_sla_recovery: 4802,
+        total_diatas_sla_recovery: 1220,
+        total_response: 6020,
+        total_recovery: 6022
+      },
+      {
+        id: '3',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Jointing',
+        kode: '11243',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 60,
+        avg_durasi_response: 1,
+        min_durasi_response: 60,
+        max_durasi_response: 60,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 240,
+        avg_durasi_recovery: 4,
+        min_durasi_recovery: 240,
+        max_durasi_recovery: 240,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: '4',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: null,
+        kode: '',
+        total: 7153680,
+        total_selesai: 1144750,
+        persen_selesai: 16.00225338567003,
+        total_inproses: 6008930,
+        persen_inproses: 83.99774661432997,
+        total_durasi_response: 746069414,
+        avg_durasi_response: 29.719034788714257,
+        min_durasi_response: -16906,
+        max_durasi_response: 2563885,
+        total_dibawah_sla_response: 352502,
+        total_diatas_sla_response: 59097,
+        total_durasi_recovery: 1633920126,
+        avg_durasi_recovery: 65.89483875340065,
+        min_durasi_recovery: -86061,
+        max_durasi_recovery: 3373943,
+        total_dibawah_sla_recovery: 412256,
+        total_diatas_sla_recovery: 900,
+        total_response: 411599,
+        total_recovery: 413156
+      },
+      {
+        id: '5',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'AVR / Kapasitor',
+        kode: '11215',
+        total: 20,
+        total_selesai: 20,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 2682,
+        avg_durasi_response: 2.15,
+        min_durasi_response: 0,
+        max_durasi_response: 1477,
+        total_dibawah_sla_response: 20,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 115132,
+        avg_durasi_recovery: 95.85,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 18660,
+        total_dibawah_sla_recovery: 15,
+        total_diatas_sla_recovery: 5,
+        total_response: 20,
+        total_recovery: 20
+      },
+      {
+        id: '6',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Kelompok Terencana (Planned) ',
+        kode: '32000',
+        total: 1130,
+        total_selesai: 1127,
+        persen_selesai: 99.73451327433628,
+        total_inproses: 3,
+        persen_inproses: 0.2654867256637168,
+        total_durasi_response: 6837343,
+        avg_durasi_response: 100.54432624113475,
+        min_durasi_response: -2607074,
+        max_durasi_response: 2553583,
+        total_dibawah_sla_response: 1070,
+        total_diatas_sla_response: 58,
+        total_durasi_recovery: 9901876,
+        avg_durasi_recovery: 145.95297249334516,
+        min_durasi_recovery: -2605454,
+        max_durasi_recovery: 2553643,
+        total_dibawah_sla_recovery: 1022,
+        total_diatas_sla_recovery: 105,
+        total_response: 1128,
+        total_recovery: 1127
+      },
+      {
+        id: '7',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Arrester',
+        kode: '11219',
+        total: 764,
+        total_selesai: 764,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 103137,
+        avg_durasi_response: 2.1612057667103537,
+        min_durasi_response: 0,
+        max_durasi_response: 14436,
+        total_dibawah_sla_response: 755,
+        total_diatas_sla_response: 8,
+        total_durasi_recovery: 2758840,
+        avg_durasi_recovery: 59.97643979057592,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 62400,
+        total_dibawah_sla_recovery: 711,
+        total_diatas_sla_recovery: 53,
+        total_response: 763,
+        total_recovery: 764
+      },
+      {
+        id: '8',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Trafo',
+        kode: '11322',
+        total: 322,
+        total_selesai: 322,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 238159,
+        avg_durasi_response: 14.425454545454546,
+        min_durasi_response: 0,
+        max_durasi_response: 40320,
+        total_dibawah_sla_response: 255,
+        total_diatas_sla_response: 20,
+        total_durasi_recovery: 2275182,
+        avg_durasi_recovery: 117.67391304347827,
+        min_durasi_recovery: 59,
+        max_durasi_recovery: 105660,
+        total_dibawah_sla_recovery: 264,
+        total_diatas_sla_recovery: 58,
+        total_response: 275,
+        total_recovery: 322
+      },
+      {
+        id: '9',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Kabel',
+        kode: '11242',
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 377,
+        avg_durasi_response: 3,
+        min_durasi_response: 60,
+        max_durasi_response: 317,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 9797,
+        avg_durasi_recovery: 81.5,
+        min_durasi_recovery: 1800,
+        max_durasi_recovery: 7997,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0,
+        total_response: 2,
+        total_recovery: 2
+      },
+      {
+        id: '10',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Kabel Opstyg / SKTR',
+        kode: '11411',
+        total: 91371,
+        total_selesai: 91371,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 117146730,
+        avg_durasi_response: 20.890635777395797,
+        min_durasi_response: 0,
+        max_durasi_response: 86580,
+        total_dibawah_sla_response: 85886,
+        total_diatas_sla_response: 5451,
+        total_durasi_recovery: 488901032,
+        avg_durasi_recovery: 88.69208711831017,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 4028013,
+        total_dibawah_sla_recovery: 88945,
+        total_diatas_sla_recovery: 2425,
+        total_response: 91337,
+        total_recovery: 91370
+      },
+      {
+        id: '11',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Gardu Distribusi',
+        kode: '13300',
+        total: 275,
+        total_selesai: 275,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 382161,
+        avg_durasi_response: 22.952727272727273,
+        min_durasi_response: -610712,
+        max_durasi_response: 638280,
+        total_dibawah_sla_response: 238,
+        total_diatas_sla_response: 37,
+        total_durasi_recovery: 14380135,
+        avg_durasi_recovery: 871.3163636363637,
+        min_durasi_recovery: -484681,
+        max_durasi_recovery: 7565219,
+        total_dibawah_sla_recovery: 195,
+        total_diatas_sla_recovery: 80,
+        total_response: 275,
+        total_recovery: 275
+      },
+      {
+        id: '12',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Konstruksi',
+        kode: '12101',
+        total: 13,
+        total_selesai: 13,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 444894,
+        avg_durasi_response: 570,
+        min_durasi_response: -17483,
+        max_durasi_response: 435093,
+        total_dibawah_sla_response: 11,
+        total_diatas_sla_response: 2,
+        total_durasi_recovery: 520794,
+        avg_durasi_recovery: 667.3076923076923,
+        min_durasi_recovery: -13763,
+        max_durasi_recovery: 445113,
+        total_dibawah_sla_recovery: 11,
+        total_diatas_sla_recovery: 2,
+        total_response: 13,
+        total_recovery: 13
+      },
+      {
+        id: '13',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'Operasi',
+        kode: '12503',
+        total: 747,
+        total_selesai: 747,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1354769,
+        avg_durasi_response: 29.809395973154363,
+        min_durasi_response: -5325,
+        max_durasi_response: 349500,
+        total_dibawah_sla_response: 713,
+        total_diatas_sla_response: 32,
+        total_durasi_recovery: 4880492,
+        avg_durasi_recovery: 108.41097724230255,
+        min_durasi_recovery: -5325,
+        max_durasi_recovery: 494389,
+        total_dibawah_sla_recovery: 692,
+        total_diatas_sla_recovery: 55,
+        total_response: 745,
+        total_recovery: 747
+      },
+      {
+        id: '14',
+        id_fasilitas: '111 -> Distribusi -> Penyulang',
+        sub_kelompok: 'CO Branch',
+        kode: '11217',
+        total: 17364,
+        total_selesai: 17364,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 9434964,
+        avg_durasi_response: 9.046101538638853,
+        min_durasi_response: -175685,
+        max_durasi_response: 84720,
+        total_dibawah_sla_response: 16595,
+        total_diatas_sla_response: 758,
+        total_durasi_recovery: 72920963,
+        avg_durasi_recovery: 69.94573732718894,
+        min_durasi_recovery: -175565,
+        max_durasi_recovery: 136440,
+        total_dibawah_sla_recovery: 16387,
+        total_diatas_sla_recovery: 973,
+        total_response: 17353,
+        total_recovery: 17360
+      }
+    ]
   }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
index 7e67a17..3520f45 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_KTI.vue
@@ -16,6 +16,7 @@
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -47,13 +48,31 @@
       />
       <DxColumn
         alignment="center"
-        data-field="nama_ulp"
-        caption="Nama Unit"
+        data-field=""
+        caption="Seluruh Unit"
         css-class="custom-table-column"
         cell-template="formatText"
-        name="NamaUnitGroup"
+        name="AllUnitGroup"
         :group-index="0"
       />
+      <DxColumn
+        alignment="center"
+        data-field="nama_regional"
+        caption="Regional"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="RegionalGroup"
+        :group-index="1"
+      />
+      <DxColumn
+        alignment="center"
+        data-field="nama_uid"
+        caption="UID"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        name="UIDGroup"
+        :group-index="2"
+      />
       <DxColumn alignment="center" caption="Bulan" css-class="custom-table-column">
         <DxColumn
           alignment="center"
@@ -948,6 +967,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPager,
   DxPaging,
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
index 42b596e..86bfb66 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerPosko.vue
@@ -19,7 +19,7 @@
       :show-borders="true"
       :row-alternation-enabled="true"
       :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged"
+      @selection-changed="onDataSelectionChanged"
       :column-width="100"
       @exporting="onExporting"
       :allow-column-resizing="true"
@@ -52,14 +52,15 @@
         data-field="no"
         caption="NO"
         css-class="custom-table-column"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         cell-template="formatNumber"
       />
       <DxColumn
         :width="150"
         name="poskoGroup"
         alignment="center"
-        data-field="nama_posko"
-        caption="Posko"
+        data-field="nama_up3"
+        caption="UP3"
         css-class="custom-table-column"
         :group-index="0"
         cell-template="formatText"
@@ -76,7 +77,7 @@
         <DxColumn
           :width="120"
           alignment="center"
-          data-field="laporan.total"
+          data-field="total"
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
@@ -86,7 +87,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.sudahSelesai.jml"
+            data-field="total_selesai"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -95,7 +96,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.sudahSelesai.persen"
+            data-field="persen_selesai"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -106,7 +107,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.belumSelesai.jml"
+            data-field="total_inproses"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -115,7 +116,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.belumSelesai.persen"
+            data-field="persen_inproses"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -128,7 +129,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.total"
+            data-field="total_durasi_response"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -137,7 +138,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.rataRata"
+            data-field="avg_durasi_response"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -146,7 +147,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.max"
+            data-field="max_durasi_response"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -155,7 +156,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.min"
+            data-field="min_durasi_response"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -166,7 +167,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.lebihSla"
+            data-field="total_diatas_sla_response"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -175,7 +176,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_response"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -188,7 +189,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.total"
+            data-field="total_durasi_recovery"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -197,7 +198,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.rataRata"
+            data-field="avg_durasi_recovery"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -206,7 +207,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.max"
+            data-field="max_durasi_recovery"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -215,7 +216,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.min"
+            data-field="min_durasi_recovery"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -226,7 +227,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.lebihSla"
+            data-field="total_diatas_sla_recovery"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -235,7 +236,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_recovery"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -253,119 +254,119 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.total"
+          column="total"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.jml"
+          column="total_selesai"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.persen"
+          column="persen_selesai"
           summary-type="avg"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.jml"
+          column="total_inproses"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.persen"
+          column="persen_inproses"
           summary-type="avg"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.total"
+          column="total_durasi_response"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.rataRata"
+          column="avg_durasi_response"
           summary-type="avg"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_response"
+          summary-type="max"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_response"
+          summary-type="min"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.lebihSla"
+          column="total_diatas_sla_response"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.kurangSla"
+          column="total_dibawah_sla_response"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.total"
+          column="total_durasi_recovery"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.rataRata"
+          column="avg_durasi_recovery"
           summary-type="avg"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_recovery"
+          summary-type="max"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_recovery"
+          summary-type="min"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.lebihSla"
+          column="total_diatas_sla_recovery"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.kurangSla"
+          column="total_dibawah_sla_recovery"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
@@ -379,123 +380,117 @@
         />
         <DxTotalItem
           summary-type="sum"
-          show-in-column="laporan.total"
-          column="laporan.total"
+          show-in-column="total"
+          column="total"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.sudahSelesai.jml"
+          column="total_selesai"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.sudahSelesai.persen"
+          column="persen_selesai"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.belumSelesai.jml"
+          column="total_inproses"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.belumSelesai.persen"
+          column="persen_inproses"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.menit.total"
+          column="total_durasi_response"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.menit.rataRata"
+          column="avg_durasi_response"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_response"
+          summary-type="max"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="responseTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_response"
+          summary-type="min"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="responseTime.laporan.lebihSla"
+          column="total_diatas_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.laporan.kurangSla"
+          column="total_dibawah_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.menit.total"
+          column="total_durasi_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.menit.rataRata"
+          column="avg_durasi_recovery"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_recovery"
+          summary-type="max"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="recoveryTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_recovery"
+          summary-type="min"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="recoveryTime.laporan.lebihSla"
+          column="total_diatas_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.laporan.kurangSla"
+          column="total_dibawah_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
       </DxSummary>
 
-      <template #cellCenter="{ data }">
-        <p class="cursor-pointer">
-          {{ data.text }}
-        </p>
-      </template>
-
       <template #formatText="{ data }">
-        <p class="text-left cursor-pointer">
+        <p class="text-left cursor-pointer" @click="showDetail()">
           {{ data.text }}
         </p>
       </template>
 
       <template #formatNumber="{ data }">
-        <p class="text-right cursor-pointer">
+        <p class="text-right cursor-pointer" @click="showDetail()">
           {{
             isNumber(data.text)
               ? data.column.caption == '%'
@@ -507,12 +502,302 @@
       </template>
 
       <template #formatTime="{ data }">
-        <p class="!text-right">
+        <p class="!text-right cursor-pointer" @click="showDetail()">
           {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
         </p>
       </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Gangguan Per Posko"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          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 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="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <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 Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            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 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">Status:</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" 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">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" 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">
@@ -527,6 +812,7 @@ import {
   DxExport,
   DxGroupItem,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -541,14 +827,28 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
-import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+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<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+
+const showDetail = () => {
+  dialogDetail.value = true
+}
+
+const closeDialog = () => {
+  dialogDetail.value = false
+}
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -579,8 +879,13 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
+  console.log(data)
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
   console.log(data)
 }
 
@@ -608,47 +913,9 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerPosko.map((item: any, index: number) => {
-        return {
-          no: ++index,
-          nama_posko: item.nama_posko,
-          laporan: {
-            total: item.total,
-            sudahSelesai: {
-              jml: item.total_selesai,
-              persen: item.persen_selesai
-            },
-            belumSelesai: {
-              jml: item.total_inproses,
-              persen: item.persen_inproses
-            }
-          },
-          responseTime: {
-            menit: {
-              total: item.total_durasi_response,
-              rataRata: item.avg_durasi_response,
-              max: item.max_durasi_response,
-              min: item.min_durasi_response
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_response,
-              kurangSla: item.total_dibawah_sla_response
-            }
-          },
-          recoveryTime: {
-            menit: {
-              total: item.total_durasi_recovery,
-              rataRata: item.avg_durasi_recovery,
-              max: item.max_durasi_recovery,
-              min: item.min_durasi_recovery
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_recovery,
-              kurangSla: item.total_dibawah_sla_recovery
-            }
-          }
-        }
-      })
+      data.value = queryResult.data.rekapitulasiGangguanPerPosko.sort((a: any, b: any) =>
+        a.nama_up3 > b.nama_up3 ? 1 : -1
+      )
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -662,49 +929,445 @@ const filterData = (params: any) => {
 const filters = ref()
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerPosko.map(
-      (item: any, index: number) => {
-        return {
-          no: ++index,
-          nama_posko: item.nama_posko,
-          laporan: {
-            total: item.total,
-            sudahSelesai: {
-              jml: item.total_selesai,
-              persen: item.persen_selesai
-            },
-            belumSelesai: {
-              jml: item.total_inproses,
-              persen: item.persen_inproses
-            }
-          },
-          responseTime: {
-            menit: {
-              total: item.total_durasi_response,
-              rataRata: item.avg_durasi_response,
-              max: item.max_durasi_response,
-              min: item.min_durasi_response
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_response,
-              kurangSla: item.total_dibawah_sla_response
-            }
-          },
-          recoveryTime: {
-            menit: {
-              total: item.total_durasi_recovery,
-              rataRata: item.avg_durasi_recovery,
-              max: item.max_durasi_recovery,
-              min: item.min_durasi_recovery
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_recovery,
-              kurangSla: item.total_dibawah_sla_recovery
-            }
-          }
-        }
+    data.value = [
+      {
+        id: 0,
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41210,
+        nama_ulp: 'ULP SOA SIU',
+        id_posko: 412101,
+        nama_posko: 'POSKO ULP SOA SIU',
+        total: 1279,
+        total_selesai: 1279,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1109359,
+        avg_durasi_response: 14.466828478964402,
+        min_durasi_response: 178,
+        max_durasi_response: 5057,
+        total_dibawah_sla_response: 1230,
+        total_diatas_sla_response: 6,
+        avg_durasi_recovery: 25.940149625935163,
+        min_durasi_recovery: 556,
+        max_durasi_recovery: 6326,
+        total_dibawah_sla_recovery: 1203,
+        total_diatas_sla_recovery: 0,
+        total_response: 1236,
+        total_recovery: 1203
+      },
+      {
+        id: 1,
+        id_uid: 2,
+        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
+        id_up3: 10,
+        nama_up3: 'UP3 BINTARO',
+        id_ulp: 54380,
+        nama_ulp: 'UP3 BINTARO',
+        id_posko: 543801,
+        nama_posko: 'POSKO BINTARO',
+        total: 157216,
+        total_selesai: 157215,
+        persen_selesai: 99.99936393242417,
+        total_inproses: 1,
+        persen_inproses: 0.000636067575819255,
+        total_durasi_response: 158788877,
+        avg_durasi_response: 25.398031657829346,
+        min_durasi_response: 15,
+        max_durasi_response: 86579,
+        total_dibawah_sla_response: 92755,
+        total_diatas_sla_response: 9463,
+        avg_durasi_recovery: 35.06668004012036,
+        min_durasi_recovery: 96,
+        max_durasi_recovery: 86640,
+        total_dibawah_sla_recovery: 99671,
+        total_diatas_sla_recovery: 29,
+        total_response: 102218,
+        total_recovery: 99700
+      },
+      {
+        id: 2,
+        id_uid: 210,
+        nama_uid: 'WILAYAH KALIMANTAN BARAT',
+        id_up3: 318,
+        nama_up3: 'UP3 SANGGAU',
+        id_ulp: 21310,
+        nama_ulp: 'ULP SINTANG',
+        id_posko: 213101,
+        nama_posko: 'POSKO ULP SINTANG',
+        total: 4135,
+        total_selesai: 4135,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 2837167,
+        avg_durasi_response: 16.833272260901428,
+        min_durasi_response: 128,
+        max_durasi_response: 6874,
+        total_dibawah_sla_response: 2679,
+        total_diatas_sla_response: 50,
+        avg_durasi_recovery: 27.390607528885575,
+        min_durasi_recovery: 445,
+        max_durasi_recovery: 8520,
+        total_dibawah_sla_recovery: 2683,
+        total_diatas_sla_recovery: 0,
+        total_response: 2729,
+        total_recovery: 2683
+      },
+      {
+        id: 3,
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 538,
+        nama_up3: 'UP3 DEPOK',
+        id_ulp: 53874,
+        nama_ulp: 'ULP CIMANGGIS',
+        id_posko: 538741,
+        nama_posko: 'POSKO ULP CIMANGGIS',
+        total: 30978,
+        total_selesai: 30977,
+        persen_selesai: 99.99677190264057,
+        total_inproses: 1,
+        persen_inproses: 0.0032280973594163596,
+        total_durasi_response: 14476477,
+        avg_durasi_response: 21.982580344666978,
+        min_durasi_response: 114,
+        max_durasi_response: 6822,
+        total_dibawah_sla_response: 10488,
+        total_diatas_sla_response: 247,
+        avg_durasi_recovery: 35.48166666666667,
+        min_durasi_recovery: 413,
+        max_durasi_recovery: 8701,
+        total_dibawah_sla_recovery: 10200,
+        total_diatas_sla_recovery: 0,
+        total_response: 10735,
+        total_recovery: 10200
+      },
+      {
+        id: 4,
+        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: 38061,
+        total_selesai: 38061,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 44624414,
+        avg_durasi_response: 24.358238380058143,
+        min_durasi_response: 120,
+        max_durasi_response: 7132,
+        total_dibawah_sla_response: 29647,
+        total_diatas_sla_response: 280,
+        avg_durasi_recovery: 40.50045376625996,
+        min_durasi_recovery: 240,
+        max_durasi_recovery: 47311,
+        total_dibawah_sla_recovery: 29747,
+        total_diatas_sla_recovery: 4,
+        total_response: 29927,
+        total_recovery: 29751
+      },
+      {
+        id: 5,
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52300,
+        nama_up3: 'UP3 SEMARANG',
+        id_ulp: 52302,
+        nama_ulp: 'ULP SEMARANG BARAT',
+        id_posko: 523021,
+        nama_posko: 'POSKO ULP SEMARANG BARAT',
+        total: 50978,
+        total_selesai: 50977,
+        persen_selesai: 99.99803836949272,
+        total_inproses: 1,
+        persen_inproses: 0.0019616305072776494,
+        total_durasi_response: 35390553,
+        avg_durasi_response: 23.690932886180523,
+        min_durasi_response: 75,
+        max_durasi_response: 11432,
+        total_dibawah_sla_response: 22305,
+        total_diatas_sla_response: 2146,
+        avg_durasi_recovery: 39.20744371521143,
+        min_durasi_recovery: 305,
+        max_durasi_recovery: 11701,
+        total_dibawah_sla_recovery: 24072,
+        total_diatas_sla_recovery: 2,
+        total_response: 24451,
+        total_recovery: 24074
+      },
+      {
+        id: 6,
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 156,
+        nama_up3: 'UP3 SURABAYA SELATAN',
+        id_ulp: 51143,
+        nama_ulp: 'ULP RUNGKUT',
+        id_posko: 511434,
+        nama_posko: 'POSKO ULP RUNGKUT',
+        total: 53364,
+        total_selesai: 53363,
+        persen_selesai: 99.99812607750543,
+        total_inproses: 1,
+        persen_inproses: 0.0018739224945656247,
+        total_durasi_response: 48283813,
+        avg_durasi_response: 24.316152897657215,
+        min_durasi_response: 89,
+        max_durasi_response: 10456,
+        total_dibawah_sla_response: 28298,
+        total_diatas_sla_response: 4142,
+        avg_durasi_recovery: 40.426895221227745,
+        min_durasi_recovery: 157,
+        max_durasi_recovery: 11526,
+        total_dibawah_sla_recovery: 31611,
+        total_diatas_sla_recovery: 8,
+        total_response: 32440,
+        total_recovery: 31619
+      },
+      {
+        id: 7,
+        id_uid: 56,
+        nama_uid: 'DISTRIBUSI BANTEN',
+        id_up3: 19,
+        nama_up3: 'UP3 TELUK NAGA',
+        id_ulp: 56660,
+        nama_ulp: 'UP3 TELUK NAGA',
+        id_posko: 566601,
+        nama_posko: 'POSKO TELUK NAGA',
+        total: 11038,
+        total_selesai: 11038,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 4374336,
+        avg_durasi_response: 23.703285761699302,
+        min_durasi_response: 132,
+        max_durasi_response: 7023,
+        total_dibawah_sla_response: 2888,
+        total_diatas_sla_response: 125,
+        avg_durasi_recovery: 42.21269487750557,
+        min_durasi_recovery: 203,
+        max_durasi_recovery: 8273,
+        total_dibawah_sla_recovery: 2694,
+        total_diatas_sla_recovery: 0,
+        total_response: 3013,
+        total_recovery: 2694
+      },
+      {
+        id: 8,
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2250,
+        nama_up3: 'UP3 KUALAKAPUAS',
+        id_ulp: 22540,
+        nama_ulp: 'ULP MUARA TEWEH',
+        id_posko: 225401,
+        nama_posko: 'POSKO ULP MUARA TEWEH',
+        total: 9756,
+        total_selesai: 9756,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 7859823,
+        avg_durasi_response: 21.342666666666666,
+        min_durasi_response: 54,
+        max_durasi_response: 5665,
+        total_dibawah_sla_response: 5959,
+        total_diatas_sla_response: 41,
+        avg_durasi_recovery: 31.966321697947727,
+        min_durasi_recovery: 481,
+        max_durasi_recovery: 5111,
+        total_dibawah_sla_recovery: 5701,
+        total_diatas_sla_recovery: 0,
+        total_response: 6000,
+        total_recovery: 5701
+      },
+      {
+        id: 9,
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12300,
+        nama_up3: 'UP3 SIBOLGA',
+        id_ulp: 12314,
+        nama_ulp: 'ULP TARUTUNG',
+        id_posko: 123144,
+        nama_posko: 'POSKO ULP TARUTUNG',
+        total: 8192,
+        total_selesai: 8192,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 2179469,
+        avg_durasi_response: 4.472642925364989,
+        min_durasi_response: -33,
+        max_durasi_response: 5165,
+        total_dibawah_sla_response: 7325,
+        total_diatas_sla_response: 4,
+        avg_durasi_recovery: 12.521217082821668,
+        min_durasi_recovery: 246,
+        max_durasi_recovery: 5938,
+        total_dibawah_sla_recovery: 7329,
+        total_diatas_sla_recovery: 0,
+        total_response: 7329,
+        total_recovery: 7329
+      },
+      {
+        id: 10,
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 145,
+        nama_up3: 'UP3 JEMBER',
+        id_ulp: 51606,
+        nama_ulp: 'ULP KLAKAH',
+        id_posko: 516066,
+        nama_posko: 'POSKO ULP KLAKAH',
+        total: 11862,
+        total_selesai: 11862,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 5452643,
+        avg_durasi_response: 17.78001206515182,
+        min_durasi_response: 213,
+        max_durasi_response: 3700,
+        total_dibawah_sla_response: 4958,
+        total_diatas_sla_response: 15,
+        avg_durasi_recovery: 26.647035094796287,
+        min_durasi_recovery: 449,
+        max_durasi_recovery: 4810,
+        total_dibawah_sla_recovery: 4958,
+        total_diatas_sla_recovery: 0,
+        total_response: 4973,
+        total_recovery: 4958
+      },
+      {
+        id: 11,
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 157,
+        nama_up3: 'UP3 SURABAYA UTARA',
+        id_ulp: 51106,
+        nama_ulp: 'ULP EMBONG WUNGU',
+        id_posko: 511065,
+        nama_posko: 'POSKO ULP EMBONG WUNGU',
+        total: 11445,
+        total_selesai: 11445,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 7620419,
+        avg_durasi_response: 17.186943207126948,
+        min_durasi_response: 106,
+        max_durasi_response: 29305,
+        total_dibawah_sla_response: 7121,
+        total_diatas_sla_response: 63,
+        avg_durasi_recovery: 30.80646087580761,
+        min_durasi_recovery: 198,
+        max_durasi_recovery: 29736,
+        total_dibawah_sla_recovery: 6964,
+        total_diatas_sla_recovery: 1,
+        total_response: 7184,
+        total_recovery: 6965
+      },
+      {
+        id: 12,
+        id_uid: 42,
+        nama_uid: 'WILAYAH PAPUA DAN PAPUA BARAT',
+        id_up3: 424,
+        nama_up3: 'UP3 MANOKWARI',
+        id_ulp: 42440,
+        nama_ulp: 'ULP BINTUNI',
+        id_posko: 424401,
+        nama_posko: 'POSKO ULP BINTUNI',
+        total: 2663,
+        total_selesai: 2663,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 3068943,
+        avg_durasi_response: 19.565047021943574,
+        min_durasi_response: 328,
+        max_durasi_response: 4863,
+        total_dibawah_sla_response: 2453,
+        total_diatas_sla_response: 99,
+        avg_durasi_recovery: 28.1744094488189,
+        min_durasi_recovery: 579,
+        max_durasi_recovery: 7598,
+        total_dibawah_sla_recovery: 2540,
+        total_diatas_sla_recovery: 0,
+        total_response: 2552,
+        total_recovery: 2540
+      },
+      {
+        id: 13,
+        id_uid: 42,
+        nama_uid: 'WILAYAH PAPUA DAN PAPUA BARAT',
+        id_up3: 422,
+        nama_up3: 'UP3 BIAK',
+        id_ulp: 42210,
+        nama_ulp: 'ULP BIAK KOTA',
+        id_posko: 422101,
+        nama_posko: 'POSKO ULP BIAK KOTA',
+        total: 4219,
+        total_selesai: 4218,
+        persen_selesai: 99.97629770087698,
+        total_inproses: 1,
+        persen_inproses: 0.02370229912301493,
+        total_durasi_response: 3741829,
+        avg_durasi_response: 15.516816431322209,
+        min_durasi_response: 45,
+        max_durasi_response: 16738,
+        total_dibawah_sla_response: 3871,
+        total_diatas_sla_response: 24,
+        avg_durasi_recovery: 21.664947124064998,
+        min_durasi_recovery: 69,
+        max_durasi_recovery: 17096,
+        total_dibawah_sla_recovery: 3876,
+        total_diatas_sla_recovery: 1,
+        total_response: 3895,
+        total_recovery: 3877
+      },
+      {
+        id: 14,
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32300,
+        nama_up3: 'UP3 KENDARI',
+        id_ulp: 32330,
+        nama_ulp: 'ULP BENU BENUA',
+        id_posko: 323301,
+        nama_posko: 'POSKO ULP BENU BENUA',
+        total: 22651,
+        total_selesai: 22651,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 18218233,
+        avg_durasi_response: 18.958301306687165,
+        min_durasi_response: 30,
+        max_durasi_response: 18055,
+        total_dibawah_sla_response: 14724,
+        total_diatas_sla_response: 888,
+        avg_durasi_recovery: 29.802055551941717,
+        min_durasi_recovery: 90,
+        max_durasi_recovery: 18414,
+        total_dibawah_sla_recovery: 15367,
+        total_diatas_sla_recovery: 6,
+        total_response: 15612,
+        total_recovery: 15373
       }
-    )
+    ].sort((a, b) => (a.nama_up3 > b.nama_up3 ? 1 : -1))
+    // sort data.value by nama_up3
+    // data.value.sort((a, b) => (a.nama_up3 > b.nama_up3 ? 1 : -1))
   }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
index 6281747..74bf73d 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue
@@ -51,12 +51,13 @@
         caption="NO"
         css-class="custom-table-column"
         cell-template="formatNumber"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
       />
       <DxColumn
         :width="120"
         alignment="center"
-        data-field="kode_regu"
-        caption="Kode"
+        data-field="nama_uid"
+        caption="UID"
         css-class="custom-table-column"
         group-index="0"
         v-if="filters.groupBy"
@@ -81,7 +82,7 @@
         <DxColumn
           :width="120"
           alignment="center"
-          data-field="laporan.total"
+          data-field="total"
           data-type="number"
           caption="Total"
           css-class="custom-table-column"
@@ -91,7 +92,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.sudahSelesai.jml"
+            data-field="total_selesai"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -100,7 +101,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.sudahSelesai.persen"
+            data-field="persen_selesai"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -111,7 +112,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="laporan.belumSelesai.jml"
+            data-field="total_inproses"
             data-type="number"
             caption="Jml"
             css-class="custom-table-column"
@@ -120,7 +121,7 @@
           <DxColumn
             :width="70"
             alignment="center"
-            data-field="laporan.belumSelesai.persen"
+            data-field="persen_inproses"
             data-type="number"
             caption="%"
             css-class="custom-table-column"
@@ -133,7 +134,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.total"
+            data-field="total_durasi_response"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -142,7 +143,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.rataRata"
+            data-field="avg_durasi_response"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -151,7 +152,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.max"
+            data-field="max_durasi_response"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -160,7 +161,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.menit.min"
+            data-field="min_durasi_response"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -171,7 +172,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.lebihSla"
+            data-field="total_diatas_sla_response"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -180,7 +181,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="responseTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_response"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -193,7 +194,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.total"
+            data-field="total_durasi_recovery"
             data-type="number"
             caption="Total"
             css-class="custom-table-column"
@@ -202,7 +203,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.rataRata"
+            data-field="avg_durasi_recovery"
             data-type="number"
             caption="Rata-Rata"
             css-class="custom-table-column"
@@ -211,7 +212,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.max"
+            data-field="max_durasi_recovery"
             data-type="number"
             caption="Max"
             css-class="custom-table-column"
@@ -220,7 +221,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.menit.min"
+            data-field="min_durasi_recovery"
             data-type="number"
             caption="Min"
             css-class="custom-table-column"
@@ -231,7 +232,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.lebihSla"
+            data-field="total_diatas_sla_recovery"
             data-type="number"
             caption=">SLA"
             css-class="custom-table-column"
@@ -240,7 +241,7 @@
           <DxColumn
             :width="120"
             alignment="center"
-            data-field="recoveryTime.laporan.kurangSla"
+            data-field="total_dibawah_sla_recovery"
             data-type="number"
             caption="≤SLA"
             css-class="custom-table-column"
@@ -258,119 +259,119 @@
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.total"
+          column="total"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.jml"
+          column="total_selesai"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.sudahSelesai.persen"
+          column="persen_selesai"
           summary-type="avg"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.jml"
+          column="total_inproses"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="laporan.belumSelesai.persen"
+          column="persen_inproses"
           summary-type="avg"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.total"
+          column="total_durasi_response"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.rataRata"
+          column="avg_durasi_response"
           summary-type="avg"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_response"
+          summary-type="max"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_response"
+          summary-type="min"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.lebihSla"
+          column="total_diatas_sla_response"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="responseTime.laporan.kurangSla"
+          column="total_dibawah_sla_response"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.total"
+          column="total_durasi_recovery"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.rataRata"
+          column="avg_durasi_recovery"
           summary-type="avg"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_recovery"
+          summary-type="max"
           css-class="!text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_recovery"
+          summary-type="min"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.lebihSla"
+          column="total_diatas_sla_recovery"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
         />
         <DxGroupItem
           :show-in-group-footer="true"
-          column="recoveryTime.laporan.kurangSla"
+          column="total_dibawah_sla_recovery"
           summary-type="sum"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
           css-class="!text-right"
@@ -384,103 +385,103 @@
         />
         <DxTotalItem
           summary-type="sum"
-          show-in-column="laporan.total"
-          column="laporan.total"
+          show-in-column="total"
+          column="total"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.sudahSelesai.jml"
+          column="total_selesai"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.sudahSelesai.persen"
+          column="persen_selesai"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.belumSelesai.jml"
+          column="total_inproses"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="laporan.belumSelesai.persen"
+          column="persen_inproses"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.menit.total"
+          column="total_durasi_response"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.menit.rataRata"
+          column="avg_durasi_response"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_response"
+          summary-type="max"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="responseTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_response"
+          summary-type="min"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="responseTime.laporan.lebihSla"
+          column="total_diatas_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="responseTime.laporan.kurangSla"
+          column="total_dibawah_sla_response"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.menit.total"
+          column="total_durasi_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.menit.rataRata"
+          column="avg_durasi_recovery"
           summary-type="avg"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.menit.max"
-          summary-type="avg"
+          column="max_durasi_recovery"
+          summary-type="max"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="recoveryTime.menit.min"
-          summary-type="avg"
+          column="min_durasi_recovery"
+          summary-type="min"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          column="recoveryTime.laporan.lebihSla"
+          column="total_diatas_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          column="recoveryTime.laporan.kurangSla"
+          column="total_dibawah_sla_recovery"
           summary-type="sum"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
@@ -546,7 +547,6 @@ 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 { dummyData } from '@/utils/dummy'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -612,48 +612,7 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerRegu.map((item: any, index: number) => {
-        return {
-          no: ++index,
-          kode_regu: item.kode_regu,
-          nama_regu: item.nama_regu,
-          laporan: {
-            total: item.total,
-            sudahSelesai: {
-              jml: item.total_selesai,
-              persen: item.persen_selesai
-            },
-            belumSelesai: {
-              jml: item.total_inproses,
-              persen: item.persen_inproses
-            }
-          },
-          responseTime: {
-            menit: {
-              total: item.total_durasi_response,
-              rataRata: item.avg_durasi_response,
-              max: item.max_durasi_response,
-              min: item.min_durasi_response
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_response,
-              kurangSla: item.total_dibawah_sla_response
-            }
-          },
-          recoveryTime: {
-            menit: {
-              total: item.total_durasi_recovery,
-              rataRata: item.avg_durasi_recovery,
-              max: item.max_durasi_recovery,
-              min: item.min_durasi_recovery
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_recovery,
-              kurangSla: item.total_dibawah_sla_recovery
-            }
-          }
-        }
-      })
+      data.value = queryResult.data.rekapitulasiGangguanPerRegu
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -670,50 +629,932 @@ const filters = ref({
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.gangguan.rekap.rekapitulasiGangguanPerRegu.map(
-      (item: any, index: number) => {
-        return {
-          no: ++index,
-          kode_regu: item.kode_regu,
-          nama_regu: item.nama_regu,
-          laporan: {
-            total: item.total,
-            sudahSelesai: {
-              jml: item.total_selesai,
-              persen: item.persen_selesai
-            },
-            belumSelesai: {
-              jml: item.total_inproses,
-              persen: item.persen_inproses
-            }
-          },
-          responseTime: {
-            menit: {
-              total: item.total_durasi_response,
-              rataRata: item.avg_durasi_response,
-              max: item.max_durasi_response,
-              min: item.min_durasi_response
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_response,
-              kurangSla: item.total_dibawah_sla_response
-            }
-          },
-          recoveryTime: {
-            menit: {
-              total: item.total_durasi_recovery,
-              rataRata: item.avg_durasi_recovery,
-              max: item.max_durasi_recovery,
-              min: item.min_durasi_recovery
-            },
-            laporan: {
-              lebihSla: item.total_diatas_sla_recovery,
-              kurangSla: item.total_dibawah_sla_recovery
-            }
-          }
-        }
+    data.value = [
+      {
+        id: 0,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 29044,
+        kode_regu: 'SAMPUNGU1',
+        nama_regu: 'SAMPUNGU1',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 420,
+        avg_durasi_response: 7,
+        min_durasi_response: 420,
+        max_durasi_response: 420,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 771,
+        avg_durasi_recovery: 12,
+        min_durasi_recovery: 771,
+        max_durasi_recovery: 771,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 1,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44340,
+        nama_ulp: 'ULP BIMA KOTA',
+        id_posko: 443401,
+        nama_posko: 'POSKO ULP BIMA KOTA',
+        id_regu: 19544,
+        kode_regu: 'GABI1',
+        nama_regu: 'GABI1',
+        total: 13,
+        total_selesai: 13,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 18753,
+        avg_durasi_response: 23.384615384615383,
+        min_durasi_response: 887,
+        max_durasi_response: 3598,
+        total_dibawah_sla_response: 12,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 34004,
+        avg_durasi_recovery: 43.07692307692308,
+        min_durasi_recovery: 1725,
+        max_durasi_recovery: 4581,
+        total_dibawah_sla_recovery: 13,
+        total_diatas_sla_recovery: 0,
+        total_response: 13,
+        total_recovery: 13
+      },
+      {
+        id: 2,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 31701,
+        kode_regu: 'ULCWOHA',
+        nama_regu: 'ULCWOHA',
+        total: 8,
+        total_selesai: 8,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 10462,
+        avg_durasi_response: 21.125,
+        min_durasi_response: 312,
+        max_durasi_response: 2393,
+        total_dibawah_sla_response: 8,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 15311,
+        avg_durasi_recovery: 31.375,
+        min_durasi_recovery: 942,
+        max_durasi_recovery: 3338,
+        total_dibawah_sla_recovery: 8,
+        total_diatas_sla_recovery: 0,
+        total_response: 8,
+        total_recovery: 8
+      },
+      {
+        id: 3,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 37136,
+        kode_regu: 'GADOM2',
+        nama_regu: 'GADOM2',
+        total: 9,
+        total_selesai: 9,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 19629,
+        avg_durasi_response: 54,
+        min_durasi_response: 1136,
+        max_durasi_response: 6826,
+        total_dibawah_sla_response: 3,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 20047,
+        avg_durasi_recovery: 66.2,
+        min_durasi_recovery: 2047,
+        max_durasi_recovery: 7721,
+        total_dibawah_sla_recovery: 5,
+        total_diatas_sla_recovery: 0,
+        total_response: 6,
+        total_recovery: 5
+      },
+      {
+        id: 4,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 24498,
+        kode_regu: 'GAMON1',
+        nama_regu: 'GAMON 1',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1309,
+        avg_durasi_response: 21,
+        min_durasi_response: 1309,
+        max_durasi_response: 1309,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 2477,
+        avg_durasi_recovery: 41,
+        min_durasi_recovery: 2477,
+        max_durasi_recovery: 2477,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 5,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44340,
+        nama_ulp: 'ULP BIMA KOTA',
+        id_posko: 443401,
+        nama_posko: 'POSKO ULP BIMA KOTA',
+        id_regu: 30156,
+        kode_regu: 'ULC BIMA',
+        nama_regu: 'ULC BIMA',
+        total: 12,
+        total_selesai: 12,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 11722,
+        avg_durasi_response: 21.11111111111111,
+        min_durasi_response: 720,
+        max_durasi_response: 2545,
+        total_dibawah_sla_response: 9,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 15330,
+        avg_durasi_recovery: 27.88888888888889,
+        min_durasi_recovery: 1121,
+        max_durasi_recovery: 2901,
+        total_dibawah_sla_recovery: 9,
+        total_diatas_sla_recovery: 0,
+        total_response: 9,
+        total_recovery: 9
+      },
+      {
+        id: 6,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: null,
+        kode_regu: null,
+        nama_regu: null,
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
+      },
+      {
+        id: 7,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 24499,
+        kode_regu: 'GAHU',
+        nama_regu: 'GAHU',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 4954,
+        avg_durasi_response: 41,
+        min_durasi_response: 1527,
+        max_durasi_response: 3427,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 7212,
+        avg_durasi_recovery: 60,
+        min_durasi_recovery: 3303,
+        max_durasi_recovery: 3909,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0,
+        total_response: 2,
+        total_recovery: 2
+      },
+      {
+        id: 8,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44310,
+        nama_ulp: 'ULP SAPE',
+        id_posko: 443101,
+        nama_posko: 'POSKO ULP SAPE',
+        id_regu: 34661,
+        kode_regu: '44310GANIP',
+        nama_regu: '44310.GANIP',
+        total: 4,
+        total_selesai: 4,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 3811,
+        avg_durasi_response: 15.5,
+        min_durasi_response: 736,
+        max_durasi_response: 1216,
+        total_dibawah_sla_response: 4,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 5949,
+        avg_durasi_recovery: 24.25,
+        min_durasi_recovery: 1137,
+        max_durasi_recovery: 2171,
+        total_dibawah_sla_recovery: 4,
+        total_diatas_sla_recovery: 0,
+        total_response: 4,
+        total_recovery: 4
+      },
+      {
+        id: 9,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 29096,
+        kode_regu: 'GAKO',
+        nama_regu: 'GAKO',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 6272,
+        avg_durasi_response: 34.333333333333336,
+        min_durasi_response: 1443,
+        max_durasi_response: 3050,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 9943,
+        avg_durasi_recovery: 55,
+        min_durasi_recovery: 2049,
+        max_durasi_recovery: 4767,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 0,
+        total_response: 3,
+        total_recovery: 3
+      },
+      {
+        id: 10,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44310,
+        nama_ulp: 'ULP SAPE',
+        id_posko: 443101,
+        nama_posko: 'POSKO ULP SAPE',
+        id_regu: null,
+        kode_regu: null,
+        nama_regu: null,
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
+      },
+      {
+        id: 11,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 24502,
+        kode_regu: 'GASANG',
+        nama_regu: 'GASANG',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1070,
+        avg_durasi_response: 17,
+        min_durasi_response: 1070,
+        max_durasi_response: 1070,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 1642,
+        avg_durasi_recovery: 27,
+        min_durasi_recovery: 1642,
+        max_durasi_recovery: 1642,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 12,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44310,
+        nama_ulp: 'ULP SAPE',
+        id_posko: 443101,
+        nama_posko: 'POSKO ULP SAPE',
+        id_regu: 34656,
+        kode_regu: '44310.GALU',
+        nama_regu: '44310.GALU',
+        total: 5,
+        total_selesai: 5,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 5445,
+        avg_durasi_response: 17.6,
+        min_durasi_response: 717,
+        max_durasi_response: 1446,
+        total_dibawah_sla_response: 5,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 9921,
+        avg_durasi_recovery: 32.6,
+        min_durasi_recovery: 1698,
+        max_durasi_recovery: 2204,
+        total_dibawah_sla_recovery: 5,
+        total_diatas_sla_recovery: 0,
+        total_response: 5,
+        total_recovery: 5
+      },
+      {
+        id: 13,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44340,
+        nama_ulp: 'ULP BIMA KOTA',
+        id_posko: 443401,
+        nama_posko: 'POSKO ULP BIMA KOTA',
+        id_regu: 29041,
+        kode_regu: '44340.KOLO',
+        nama_regu: 'KOLO',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 3244,
+        avg_durasi_response: 17.333333333333332,
+        min_durasi_response: 206,
+        max_durasi_response: 1967,
+        total_dibawah_sla_response: 3,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 6192,
+        avg_durasi_recovery: 34,
+        min_durasi_recovery: 522,
+        max_durasi_recovery: 3616,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 0,
+        total_response: 3,
+        total_recovery: 3
+      },
+      {
+        id: 14,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 29046,
+        kode_regu: 'PARADO1',
+        nama_regu: 'PARADO1',
+        total: 4,
+        total_selesai: 4,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 2587,
+        avg_durasi_response: 14,
+        min_durasi_response: 676,
+        max_durasi_response: 1083,
+        total_dibawah_sla_response: 3,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 6437,
+        avg_durasi_recovery: 35.333333333333336,
+        min_durasi_recovery: 1980,
+        max_durasi_recovery: 2249,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 0,
+        total_response: 3,
+        total_recovery: 3
+      },
+      {
+        id: 15,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44340,
+        nama_ulp: 'ULP BIMA KOTA',
+        id_posko: 443401,
+        nama_posko: 'POSKO ULP BIMA KOTA',
+        id_regu: null,
+        kode_regu: null,
+        nama_regu: null,
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: null,
+        avg_durasi_response: null,
+        min_durasi_response: null,
+        max_durasi_response: null,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: null,
+        avg_durasi_recovery: null,
+        min_durasi_recovery: null,
+        max_durasi_recovery: null,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 0,
+        total_response: 0,
+        total_recovery: 0
+      },
+      {
+        id: 16,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 29042,
+        kode_regu: 'DONGGO1',
+        nama_regu: 'DONGGO1',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 997,
+        avg_durasi_response: 16,
+        min_durasi_response: 997,
+        max_durasi_response: 997,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 1259,
+        avg_durasi_recovery: 20,
+        min_durasi_recovery: 1259,
+        max_durasi_recovery: 1259,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 17,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 19542,
+        kode_regu: 'GAWO1',
+        nama_regu: 'GAWO1',
+        total: 7,
+        total_selesai: 7,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 7835,
+        avg_durasi_response: 18,
+        min_durasi_response: 773,
+        max_durasi_response: 2371,
+        total_dibawah_sla_response: 7,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 14448,
+        avg_durasi_recovery: 39.666666666666664,
+        min_durasi_recovery: 1766,
+        max_durasi_recovery: 4421,
+        total_dibawah_sla_recovery: 6,
+        total_diatas_sla_recovery: 0,
+        total_response: 7,
+        total_recovery: 6
+      },
+      {
+        id: 18,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 30856,
+        kode_regu: 'ULCMONTA',
+        nama_regu: 'ULCMONTA',
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1858,
+        avg_durasi_response: 15,
+        min_durasi_response: 812,
+        max_durasi_response: 1046,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 4328,
+        avg_durasi_recovery: 35.5,
+        min_durasi_recovery: 1633,
+        max_durasi_recovery: 2695,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0,
+        total_response: 2,
+        total_recovery: 2
+      },
+      {
+        id: 19,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44310,
+        nama_ulp: 'ULP SAPE',
+        id_posko: 443101,
+        nama_posko: 'POSKO ULP SAPE',
+        id_regu: 34659,
+        kode_regu: '44310.GATA',
+        nama_regu: '44310.GATA',
+        total: 5,
+        total_selesai: 5,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 4116,
+        avg_durasi_response: 13.2,
+        min_durasi_response: 752,
+        max_durasi_response: 894,
+        total_dibawah_sla_response: 5,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 9957,
+        avg_durasi_recovery: 32.6,
+        min_durasi_recovery: 1499,
+        max_durasi_recovery: 2444,
+        total_dibawah_sla_recovery: 5,
+        total_diatas_sla_recovery: 0,
+        total_response: 5,
+        total_recovery: 5
+      },
+      {
+        id: 20,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 29045,
+        kode_regu: 'KUTAWAWO1',
+        nama_regu: 'KUTAWAWO1',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1050,
+        avg_durasi_response: 17,
+        min_durasi_response: 1050,
+        max_durasi_response: 1050,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 1675,
+        avg_durasi_recovery: 27,
+        min_durasi_recovery: 1675,
+        max_durasi_recovery: 1675,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 21,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 24503,
+        kode_regu: 'GAKAT',
+        nama_regu: 'GAKAT',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1938,
+        avg_durasi_response: 32,
+        min_durasi_response: 1938,
+        max_durasi_response: 1938,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 2975,
+        avg_durasi_recovery: 49,
+        min_durasi_recovery: 2975,
+        max_durasi_recovery: 2975,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 22,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44310,
+        nama_ulp: 'ULP SAPE',
+        id_posko: 443101,
+        nama_posko: 'POSKO ULP SAPE',
+        id_regu: 24501,
+        kode_regu: 'GASAP 3',
+        nama_regu: 'GASAP 3',
+        total: 8,
+        total_selesai: 8,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 13364,
+        avg_durasi_response: 27.375,
+        min_durasi_response: 780,
+        max_durasi_response: 3808,
+        total_dibawah_sla_response: 7,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 23245,
+        avg_durasi_recovery: 48,
+        min_durasi_recovery: 1654,
+        max_durasi_recovery: 5187,
+        total_dibawah_sla_recovery: 8,
+        total_diatas_sla_recovery: 0,
+        total_response: 8,
+        total_recovery: 8
+      },
+      {
+        id: 23,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44330,
+        nama_ulp: 'ULP WOHA',
+        id_posko: 443301,
+        nama_posko: 'POSKO ULP WOHA',
+        id_regu: 24497,
+        kode_regu: 'GABO 1',
+        nama_regu: 'GABO 1',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 1106,
+        avg_durasi_response: 18,
+        min_durasi_response: 1106,
+        max_durasi_response: 1106,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 2223,
+        avg_durasi_recovery: 37,
+        min_durasi_recovery: 2223,
+        max_durasi_recovery: 2223,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0,
+        total_response: 1,
+        total_recovery: 1
+      },
+      {
+        id: 24,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44310,
+        nama_ulp: 'ULP SAPE',
+        id_posko: 443101,
+        nama_posko: 'POSKO ULP SAPE',
+        id_regu: 34662,
+        kode_regu: '44310.GAWA',
+        nama_regu: '44310.GAWA',
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 2809,
+        avg_durasi_response: 22.5,
+        min_durasi_response: 1255,
+        max_durasi_response: 1554,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 5058,
+        avg_durasi_recovery: 41.5,
+        min_durasi_recovery: 2313,
+        max_durasi_recovery: 2745,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0,
+        total_response: 2,
+        total_recovery: 2
+      },
+      {
+        id: 25,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 24496,
+        kode_regu: 'GASOR',
+        nama_regu: 'GASOR',
+        total: 19,
+        total_selesai: 19,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 56100,
+        avg_durasi_response: 54.588235294117645,
+        min_durasi_response: 1715,
+        max_durasi_response: 6854,
+        total_dibawah_sla_response: 6,
+        total_diatas_sla_response: 11,
+        total_durasi_recovery: 82343,
+        avg_durasi_recovery: 80.23529411764706,
+        min_durasi_recovery: 2855,
+        max_durasi_recovery: 8171,
+        total_dibawah_sla_recovery: 17,
+        total_diatas_sla_recovery: 0,
+        total_response: 17,
+        total_recovery: 17
+      },
+      {
+        id: 26,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 19541,
+        kode_regu: 'GADOM1',
+        nama_regu: 'GADOM1',
+        total: 35,
+        total_selesai: 35,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 118249,
+        avg_durasi_response: 67.44827586206897,
+        min_durasi_response: 1713,
+        max_durasi_response: 8073,
+        total_dibawah_sla_response: 8,
+        total_diatas_sla_response: 21,
+        total_durasi_recovery: 145117,
+        avg_durasi_recovery: 85.85714285714286,
+        min_durasi_recovery: 2443,
+        max_durasi_recovery: 8387,
+        total_dibawah_sla_recovery: 28,
+        total_diatas_sla_recovery: 0,
+        total_response: 29,
+        total_recovery: 28
+      },
+      {
+        id: 27,
+        id_uid: 44,
+        nama_uid: 'WILAYAH NUSA TENGGARA BARAT',
+        id_up3: 443,
+        nama_up3: 'UP3 BIMA',
+        id_ulp: 44320,
+        nama_ulp: 'ULP DOMPU',
+        id_posko: 443201,
+        nama_posko: 'POSKO ULP DOMPU',
+        id_regu: 29097,
+        kode_regu: 'GALO',
+        nama_regu: 'GALO',
+        total: 4,
+        total_selesai: 4,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 4929,
+        avg_durasi_response: 27,
+        min_durasi_response: 1595,
+        max_durasi_response: 1682,
+        total_dibawah_sla_response: 3,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 7014,
+        avg_durasi_recovery: 38.666666666666664,
+        min_durasi_recovery: 1880,
+        max_durasi_recovery: 3013,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 0,
+        total_response: 3,
+        total_recovery: 3
       }
-    )
+    ]
   }
 })
 </script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index a2257f4..73d25bb 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -549,6 +549,13 @@ import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
 
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
+
+const client = apolloClient()
+
+provideApolloClient(client)
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
index 9a0dfd9..c896022 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerRegu.vue
@@ -186,7 +186,7 @@
           data-type="number"
           caption="%"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatPercentage"
         />
       </DxColumn>
 
@@ -198,7 +198,7 @@
 
       <template #formatPercentage="{ data }">
         <p class="text-right cursor-pointer" @click="showData()">
-          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+          {{ parseFloat(data.text) ? formatPercentage(data.text) : '0%'  }}
         </p>
       </template>
 
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
index 32d2584..4c12d29 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_DKUL.vue
@@ -123,6 +123,14 @@
         css-class="custom-table-column !align-top"
         cell-template="formatText"
       />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_unit_baru"
+        caption="Unit Tujuan"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
       <DxColumn
         :width="120"
         alignment="center"
@@ -170,6 +178,22 @@
         css-class="custom-table-column !align-top"
         cell-template="formatText"
       />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="media"
+        caption="Sumber Lapor"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="170"
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama ULP"
+        css-class="custom-table-column !align-top"
+        cell-template="formatText"
+      />
 
       <template #cellCenter="{ data }">
         <p class="cursor-pointer">
diff --git a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
index 8e474bc..3bd14d0 100755
--- a/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
+++ b/src/components/Pages/Keluhan/Daftar/DKeluhan_PLD1K.vue
@@ -81,7 +81,7 @@
       <DxColumn
         :width="170"
         alignment="center"
-        data-field="waktu_recovery"
+        data-field="waktu_selesai"
         caption="Tgl Recovery"
         css-class="custom-table-column"
         cell-template="formatText"
@@ -226,7 +226,7 @@
 
       <div class="flex flex-row items-center justify-between w-full">
         <h3 class="text-sm font-medium w-[170px] text-gray-800">Tanggal Recovery:</h3>
-        <InputText :readonly="true" :value="dataDetail?.waktu_recovery" class-name="flex-1" />
+        <InputText :readonly="true" :value="dataDetail?.waktu_selesai" class-name="flex-1" />
       </div>
 
       <div class="flex flex-row items-center justify-between w-full">
@@ -466,7 +466,7 @@ const onExporting = (e: any) => {
         item.no_laporan,
         item.waktu_lapor,
         item.waktu_response,
-        item.waktu_recovery,
+        item.waktu_selesai,
         item.jumlah_lapor,
         parseInt(item.durasi_response_time) ? formatWaktu(item.durasi_response_time) : '-',
         parseInt(item.durasi_recovery_time) ? formatWaktu(item.durasi_recovery_time) : '-',
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
index 5de4f07..105b842 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_ALL.vue
@@ -23,6 +23,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :auto-expand-all="false" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -44,13 +45,22 @@
 
       <DxColumn
         alignment="center"
-        :width="170"
+        :width="200"
         data-field="nama_ulp"
         caption="Nama Unit"
         css-class="custom-table-column"
         cell-template="formatText"
       />
 
+      <DxColumn
+        :width="200"
+        alignment="center"
+        data-field=""
+        caption="Semua Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
       <DxColumn
         :width="150"
         alignment="center"
@@ -58,7 +68,7 @@
         caption="Regional"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="0"
+        :group-index="1"
       />
       <DxColumn
         :width="150"
@@ -67,7 +77,7 @@
         caption="UID"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="1"
+        :group-index="2"
       />
       <DxColumn
         :width="150"
@@ -76,7 +86,7 @@
         caption="UP3"
         css-class="custom-table-column"
         cell-template="formatText"
-        :group-index="2"
+        :group-index="3"
       />
 
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
@@ -419,7 +429,7 @@
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -460,9 +470,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -768,7 +776,8 @@ import {
   DxSearchPanel,
   DxSelection,
   DxSummary,
-  DxGroupItem
+  DxGroupItem,
+  DxGrouping
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -890,7 +899,413 @@ const filters = ref()
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanAll
+    data.value = [
+      {
+        id: 0,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        total: 1,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 1,
+        persen_inproses: 100,
+        total_durasi_response: 6869,
+        avg_durasi_response: 6869,
+        min_durasi_response: 6869,
+        max_durasi_response: 6869,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 6918,
+        avg_durasi_recovery: 6918,
+        min_durasi_recovery: 6918,
+        max_durasi_recovery: 6918,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 154,
+        nama_up3: 'UP3 SITUBONDO',
+        id_ulp: 51654,
+        nama_ulp: 'ULP WONOSARI',
+        total: 4,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 4,
+        persen_inproses: 100,
+        total_durasi_response: 12102,
+        avg_durasi_response: 4034,
+        min_durasi_response: 881,
+        max_durasi_response: 9125,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 2,
+        total_durasi_recovery: 169068,
+        avg_durasi_recovery: 42267,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 70663,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 3
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 116,
+        nama_up3: 'UP3 SIGLI',
+        id_ulp: 11662,
+        nama_ulp: 'ULP MEUREUDU',
+        total: 1,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 1,
+        persen_inproses: 100,
+        total_durasi_response: 325,
+        avg_durasi_response: 325,
+        min_durasi_response: 325,
+        max_durasi_response: 325,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 368,
+        avg_durasi_recovery: 368,
+        min_durasi_recovery: 368,
+        max_durasi_recovery: 368,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 329,
+        nama_up3: 'UP3 BALI UTARA',
+        id_ulp: 55340,
+        nama_ulp: 'ULP GILIMANUK',
+        total: 5,
+        total_selesai: 4,
+        persen_selesai: 80,
+        total_inproses: 1,
+        persen_inproses: 20,
+        total_durasi_response: 3548,
+        avg_durasi_response: 709.6,
+        min_durasi_response: 302,
+        max_durasi_response: 1586,
+        total_dibawah_sla_response: 4,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 5705,
+        avg_durasi_recovery: 1141,
+        min_durasi_recovery: 775,
+        max_durasi_recovery: 2078,
+        total_dibawah_sla_recovery: 5,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 4,
+        nama_regional: null,
+        id_uid: 0,
+        nama_uid: '',
+        id_up3: 0,
+        nama_up3: '',
+        id_ulp: 22450,
+        nama_ulp: 'ULP PANGKALAN BUN',
+        total: 2,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 2,
+        persen_inproses: 100,
+        total_durasi_response: 1005,
+        avg_durasi_response: 1005,
+        min_durasi_response: 1005,
+        max_durasi_response: 1005,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 1815,
+        avg_durasi_recovery: 907.5,
+        min_durasi_recovery: 650,
+        max_durasi_recovery: 1165,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2220,
+        nama_up3: 'UP3 BARABAI',
+        id_ulp: 22230,
+        nama_ulp: 'ULP AMUNTAI',
+        total: 3,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 3,
+        persen_inproses: 100,
+        total_durasi_response: 1178,
+        avg_durasi_response: 392.6666666666667,
+        min_durasi_response: 155,
+        max_durasi_response: 580,
+        total_dibawah_sla_response: 3,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 3042,
+        avg_durasi_recovery: 1014,
+        min_durasi_recovery: 295,
+        max_durasi_recovery: 2051,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 546,
+        nama_up3: 'UP3 TASIKMALAYA',
+        id_ulp: 53231,
+        nama_ulp: 'ULP CIAMIS',
+        total: 4,
+        total_selesai: 1,
+        persen_selesai: 25,
+        total_inproses: 3,
+        persen_inproses: 75,
+        total_durasi_response: 6122,
+        avg_durasi_response: 1530.5,
+        min_durasi_response: 46,
+        max_durasi_response: 3024,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 2,
+        total_durasi_recovery: 6269,
+        avg_durasi_recovery: 1567.25,
+        min_durasi_recovery: 73,
+        max_durasi_recovery: 3076,
+        total_dibawah_sla_recovery: 4,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 157,
+        nama_up3: 'UP3 SURABAYA UTARA',
+        id_ulp: 51101,
+        nama_ulp: 'ULP INDRAPURA',
+        total: 7,
+        total_selesai: 6,
+        persen_selesai: 85.71428571428571,
+        total_inproses: 1,
+        persen_inproses: 14.285714285714285,
+        total_durasi_response: 34744,
+        avg_durasi_response: 5790.666666666667,
+        min_durasi_response: 55,
+        max_durasi_response: 11082,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 4,
+        total_durasi_recovery: 36971,
+        avg_durasi_recovery: 5281.571428571428,
+        min_durasi_recovery: 149,
+        max_durasi_recovery: 11304,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 4
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_durasi_response: 459,
+        avg_durasi_response: 459,
+        min_durasi_response: 459,
+        max_durasi_response: 459,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 7494,
+        avg_durasi_recovery: 7494,
+        min_durasi_recovery: 7494,
+        max_durasi_recovery: 7494,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 153,
+        nama_up3: 'UP3 SIDOARJO',
+        id_ulp: 51182,
+        nama_ulp: 'ULP PORONG',
+        total: 12,
+        total_selesai: 9,
+        persen_selesai: 75,
+        total_inproses: 3,
+        persen_inproses: 25,
+        total_durasi_response: 13677,
+        avg_durasi_response: 1139.75,
+        min_durasi_response: 42,
+        max_durasi_response: 4213,
+        total_dibawah_sla_response: 8,
+        total_diatas_sla_response: 4,
+        total_durasi_recovery: 74952,
+        avg_durasi_recovery: 6246,
+        min_durasi_recovery: 358,
+        max_durasi_recovery: 30185,
+        total_dibawah_sla_recovery: 6,
+        total_diatas_sla_recovery: 6
+      },
+      {
+        id: 10,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 111,
+        nama_up3: 'UP3 BANDA ACEH',
+        id_ulp: 11110,
+        nama_ulp: 'ULP KOTA MERDUATI',
+        total: 2,
+        total_selesai: 1,
+        persen_selesai: 50,
+        total_inproses: 1,
+        persen_inproses: 50,
+        total_durasi_response: 866,
+        avg_durasi_response: 433,
+        min_durasi_response: 323,
+        max_durasi_response: 543,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 3186,
+        avg_durasi_recovery: 1593,
+        min_durasi_recovery: 917,
+        max_durasi_recovery: 2269,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 11,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 112,
+        nama_up3: 'UP3 LHOKSEUMAWE',
+        id_ulp: 11220,
+        nama_ulp: 'ULP LHOKSEUMAWE',
+        total: 3,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 3,
+        persen_inproses: 100,
+        total_durasi_response: 6020,
+        avg_durasi_response: 2006.6666666666667,
+        min_durasi_response: 270,
+        max_durasi_response: 3526,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 2,
+        total_durasi_recovery: 6125,
+        avg_durasi_recovery: 2041.6666666666667,
+        min_durasi_recovery: 321,
+        max_durasi_recovery: 3553,
+        total_dibawah_sla_recovery: 3,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 12,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 171,
+        nama_uid: 'DISTRIBUSI LAMPUNG',
+        id_up3: 17171,
+        nama_up3: 'UP3 TANJUNGKARANG',
+        id_ulp: 17180,
+        nama_ulp: 'ULP TELUK BETUNG',
+        total: 7,
+        total_selesai: 2,
+        persen_selesai: 28.57142857142857,
+        total_inproses: 5,
+        persen_inproses: 71.42857142857143,
+        total_durasi_response: 2328,
+        avg_durasi_response: 388,
+        min_durasi_response: 92,
+        max_durasi_response: 866,
+        total_dibawah_sla_response: 6,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 3159,
+        avg_durasi_recovery: 451.2857142857143,
+        min_durasi_recovery: 169,
+        max_durasi_recovery: 917,
+        total_dibawah_sla_recovery: 7,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 13,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 540,
+        nama_up3: 'UP3 GARUT',
+        id_ulp: 53293,
+        nama_ulp: 'ULP LELES',
+        total: 2,
+        total_selesai: 1,
+        persen_selesai: 50,
+        total_inproses: 1,
+        persen_inproses: 50,
+        total_durasi_response: 1870,
+        avg_durasi_response: 935,
+        min_durasi_response: 310,
+        max_durasi_response: 1560,
+        total_dibawah_sla_response: 1,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 5002,
+        avg_durasi_recovery: 2501,
+        min_durasi_recovery: 1592,
+        max_durasi_recovery: 3410,
+        total_dibawah_sla_recovery: 2,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 14,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32200,
+        nama_up3: 'UP3 WATAMPONE',
+        id_ulp: 32260,
+        nama_ulp: 'ULP ULOE',
+        total: 1,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 1,
+        persen_inproses: 100,
+        total_durasi_response: 2074,
+        avg_durasi_response: 2074,
+        min_durasi_response: 2074,
+        max_durasi_response: 2074,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 3031,
+        avg_durasi_recovery: 3031,
+        min_durasi_recovery: 3031,
+        max_durasi_recovery: 3031,
+        total_dibawah_sla_recovery: 1,
+        total_diatas_sla_recovery: 0
+      }
+    ]
   }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
index a256381..eb475f6 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_BerdasarMedia.vue
@@ -510,7 +510,8 @@ const { onResult, onError, loading, refetch } = useQuery(
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     idUlp: 0,
     idUid: 0,
-    idUp3: 0
+    idUp3: 0,
+    media: ''
   }
 )
 
@@ -527,7 +528,8 @@ const filterData = (params: any) => {
       : new Date().toISOString().slice(0, 10),
     idUlp: ulp ? ulp.id : 0,
     idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
+    idUp3: up3 ? up3.id : 0,
+    media: ''
   })
 
   onResult((queryResult) => {
@@ -548,9 +550,7 @@ const filterData = (params: any) => {
   })
 }
 
-const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanBerdasarkanMedia
-}
+const getDetail = () => {}
 
 const showDialogDataSelected = () => {
   dialogDataSelected.value = true
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
index ce1b62e..e0241d2 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerFungsiBidang.vue
@@ -53,7 +53,7 @@
         caption="No"
         cell-template="formatNumber"
       />
-      <!-- <DxColumn
+      <DxColumn
         :width="120"
         alignment="center"
         data-field="nama_uid"
@@ -62,7 +62,7 @@
         :group-index="0"
         name="NamaUID"
         v-if="filters.groupBy"
-      /> -->
+      />
       <DxColumn
         :width="170"
         alignment="center"
@@ -874,7 +874,268 @@ const filters = ref({ groupBy: false })
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPenyelesaianPerFungsiBidang
+    data.value = [
+      {
+                "id": 0,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13105,
+                "nama_ulp": "ULP LUBUK ALUNG",
+                "fungsi_bidang": "Proses PD/TD, belum ada realisasinya ",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100,
+                "total_inproses": 0,
+                "persen_inproses": 0,
+                "avg_durasi_response": 983,
+                "min_durasi_response": 983,
+                "max_durasi_response": 983,
+                "total_dibawah_sla_response": 1,
+                "total_diatas_sla_response": 0,
+                "avg_durasi_recovery": 1373,
+                "min_durasi_recovery": 1373,
+                "max_durasi_recovery": 1373,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "id": 1,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13107,
+                "nama_ulp": "ULP PAINAN",
+                "fungsi_bidang": "Drop Tegangan ",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100,
+                "total_inproses": 0,
+                "persen_inproses": 0,
+                "avg_durasi_response": 2228,
+                "min_durasi_response": 2228,
+                "max_durasi_response": 2228,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "avg_durasi_recovery": 2347,
+                "min_durasi_recovery": 2347,
+                "max_durasi_recovery": 2347,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "id": 2,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13104,
+                "nama_ulp": "ULP PARIAMAN",
+                "fungsi_bidang": "Kondisi Jaringan Listrik ",
+                "total": 4,
+                "total_selesai": 3,
+                "persen_selesai": 75,
+                "total_inproses": 1,
+                "persen_inproses": 25,
+                "avg_durasi_response": 772.6666666666666,
+                "min_durasi_response": 171,
+                "max_durasi_response": 1701,
+                "total_dibawah_sla_response": 2,
+                "total_diatas_sla_response": 1,
+                "avg_durasi_recovery": 3476,
+                "min_durasi_recovery": 2824,
+                "max_durasi_recovery": 3968,
+                "total_dibawah_sla_recovery": 4,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "id": 3,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13103,
+                "nama_ulp": "ULP INDARUNG",
+                "fungsi_bidang": "Alat Pembatas  tidak berfungsi ",
+                "total": 25,
+                "total_selesai": 15,
+                "persen_selesai": 60,
+                "total_inproses": 10,
+                "persen_inproses": 40,
+                "avg_durasi_response": 1419,
+                "min_durasi_response": 109,
+                "max_durasi_response": 4384,
+                "total_dibawah_sla_response": 10,
+                "total_diatas_sla_response": 5,
+                "avg_durasi_recovery": 4791.6,
+                "min_durasi_recovery": 10,
+                "max_durasi_recovery": 21118,
+                "total_dibawah_sla_recovery": 17,
+                "total_diatas_sla_recovery": 8
+            },
+            {
+                "id": 4,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13105,
+                "nama_ulp": "ULP LUBUK ALUNG",
+                "fungsi_bidang": "PD",
+                "total": 2,
+                "total_selesai": 2,
+                "persen_selesai": 100,
+                "total_inproses": 0,
+                "persen_inproses": 0,
+                "avg_durasi_response": 8920.5,
+                "min_durasi_response": 790,
+                "max_durasi_response": 17051,
+                "total_dibawah_sla_response": 1,
+                "total_diatas_sla_response": 1,
+                "avg_durasi_recovery": 13781.5,
+                "min_durasi_recovery": 6068,
+                "max_durasi_recovery": 21495,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 2
+            },
+            {
+                "id": 5,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13106,
+                "nama_ulp": "ULP SICINCIN",
+                "fungsi_bidang": "Alat Pembatas  tidak berfungsi ",
+                "total": 11,
+                "total_selesai": 0,
+                "persen_selesai": 0,
+                "total_inproses": 11,
+                "persen_inproses": 100,
+                "avg_durasi_response": 828.25,
+                "min_durasi_response": 387,
+                "max_durasi_response": 1237,
+                "total_dibawah_sla_response": 4,
+                "total_diatas_sla_response": 0,
+                "avg_durasi_recovery": 2622.181818181818,
+                "min_durasi_recovery": 480,
+                "max_durasi_recovery": 15205,
+                "total_dibawah_sla_recovery": 10,
+                "total_diatas_sla_recovery": 1
+            },
+            {
+                "id": 6,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13103,
+                "nama_ulp": "ULP INDARUNG",
+                "fungsi_bidang": "Tidak bisa beli Token ",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100,
+                "total_inproses": 0,
+                "persen_inproses": 0,
+                "avg_durasi_response": 5442,
+                "min_durasi_response": 5442,
+                "max_durasi_response": 5442,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "avg_durasi_recovery": 9759,
+                "min_durasi_recovery": 9759,
+                "max_durasi_recovery": 9759,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 1
+            },
+            {
+                "id": 7,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13102,
+                "nama_ulp": "ULP TABING",
+                "fungsi_bidang": "Kondisi Jaringan Listrik ",
+                "total": 13,
+                "total_selesai": 4,
+                "persen_selesai": 30.76923076923077,
+                "total_inproses": 9,
+                "persen_inproses": 69.23076923076923,
+                "avg_durasi_response": 5249.461538461538,
+                "min_durasi_response": 300,
+                "max_durasi_response": 22739,
+                "total_dibawah_sla_response": 5,
+                "total_diatas_sla_response": 8,
+                "avg_durasi_recovery": 7872.384615384615,
+                "min_durasi_recovery": 594,
+                "max_durasi_recovery": 32933,
+                "total_dibawah_sla_recovery": 7,
+                "total_diatas_sla_recovery": 6
+            },
+            {
+                "id": 8,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13102,
+                "nama_ulp": "ULP TABING",
+                "fungsi_bidang": "PTL Sering Padam ",
+                "total": 1,
+                "total_selesai": 0,
+                "persen_selesai": 0,
+                "total_inproses": 1,
+                "persen_inproses": 100,
+                "avg_durasi_response": 28613,
+                "min_durasi_response": 28613,
+                "max_durasi_response": 28613,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "avg_durasi_recovery": 37937,
+                "min_durasi_recovery": 37937,
+                "max_durasi_recovery": 37937,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 1
+            },
+            {
+                "id": 9,
+                "nama_regional": "REGIONAL SUMKAL",
+                "id_uid": 131,
+                "nama_uid": "WILAYAH SUMATERA BARAT",
+                "id_up3": 13100,
+                "nama_up3": "UP3 PADANG",
+                "id_ulp": 13112,
+                "nama_ulp": "ULP KURANJI",
+                "fungsi_bidang": "Alat Ukur Paskabayar tidak berfungsi ",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100,
+                "total_inproses": 0,
+                "persen_inproses": 0,
+                "avg_durasi_response": 2264,
+                "min_durasi_response": 2264,
+                "max_durasi_response": 2264,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "avg_durasi_recovery": 3300,
+                "min_durasi_recovery": 3300,
+                "max_durasi_recovery": 3300,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 0
+            },
+    ]
   }
 })
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
index 3320386..dc69a71 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerJenisKeluhan.vue
@@ -61,7 +61,7 @@
         css-class="custom-table-column"
         cell-template="formatText"
       />
-      <!-- <DxColumn
+      <DxColumn
         :width="170"
         alignment="center"
         data-field="tipe_keluhan"
@@ -69,7 +69,7 @@
         name="tipeKeluhan"
         css-class="custom-table-column"
         :group-index="0"
-      /> -->
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn
           :width="150"
@@ -249,7 +249,6 @@
           show-in-column="no"
           css-class="text-white !text-right"
           :show-in-group-footer="true"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
           summary-type="sum"
@@ -300,7 +299,7 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
@@ -308,7 +307,7 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="min"
           display-format="{0}"
           column="min_durasi_response"
           css-class="text-white !text-right"
@@ -316,7 +315,7 @@
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="max"
           display-format="{0}"
           column="max_durasi_response"
           css-class="text-white !text-right"
@@ -348,7 +347,7 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
@@ -356,7 +355,7 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="min"
           display-format="{0}"
           column="min_durasi_recovery"
           css-class="text-white !text-right"
@@ -364,7 +363,7 @@
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxGroupItem
-          summary-type="sum"
+          summary-type="max"
           display-format="{0}"
           column="max_durasi_recovery"
           css-class="text-white !text-right"
@@ -393,7 +392,6 @@
           display-format="Total"
           show-in-column="no"
           css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
           summary-type="sum"
@@ -438,21 +436,21 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="min"
           display-format="{0}"
           column="min_durasi_response"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="max"
           display-format="{0}"
           column="max_durasi_response"
           css-class="text-white !text-right"
@@ -480,21 +478,21 @@
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
           css-class="text-white !text-right"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="min"
           display-format="{0}"
           column="min_durasi_recovery"
           css-class="text-white !text-right"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
         <DxTotalItem
-          summary-type="sum"
+          summary-type="max"
           display-format="{0}"
           column="max_durasi_recovery"
           css-class="text-white !text-right"
@@ -552,7 +550,7 @@
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -593,9 +591,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -974,7 +970,7 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
+  // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
 }
 
 const showDialogDataSelected = () => {
@@ -1029,5 +1025,5 @@ onMounted(() => {
   if (import.meta.env.DEV) {
     data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerJenisKeluhan
   }
-})
+}) 
 </script>
diff --git a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
index beb75d1..f93d02f 100755
--- a/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
+++ b/src/components/Pages/Keluhan/Rekap/RKeluhan_PerUnit.vue
@@ -53,14 +53,14 @@
         cell-template="formatNumber"
       />
 
-      <!-- <DxColumn
+      <DxColumn
         :width="120"
         alignment="center"
         data-field="nama_up3"
-        caption="Nama UP3"
+        caption="UP3"
         css-class="custom-table-column"
         :group-index="0"
-      /> -->
+      />
 
       <DxColumn
         :width="170"
@@ -246,14 +246,14 @@
           summary-type="sum"
           display-format="Total"
           show-in-column="no"
-          css-class="text-white !text-left"
+          css-class="!text-left"
           :show-in-group-footer="true"
         />
         <DxGroupItem
           summary-type="sum"
           display-format="{0}"
           column="total"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -261,7 +261,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -269,7 +269,7 @@
           summary-type="avg"
           display-format="{0}"
           column="persen_selesai"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
@@ -277,7 +277,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -285,7 +285,7 @@
           summary-type="avg"
           display-format="{0}"
           column="persen_inproses"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
         />
@@ -293,7 +293,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -301,7 +301,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -309,7 +309,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -317,7 +317,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -325,7 +325,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -333,7 +333,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_response"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -341,7 +341,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -349,7 +349,7 @@
           summary-type="avg"
           display-format="{0}"
           column="avg_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -357,7 +357,7 @@
           summary-type="min"
           display-format="{0}"
           column="min_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -365,7 +365,7 @@
           summary-type="max"
           display-format="{0}"
           column="max_durasi_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => (parseInt(e.value) ? formatWaktu(e.value) : '-')"
         />
@@ -373,7 +373,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_diatas_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -381,7 +381,7 @@
           summary-type="sum"
           display-format="{0}"
           column="total_dibawah_sla_recovery"
-          css-class="text-white !text-right"
+          css-class="!text-right"
           :show-in-group-footer="true"
           :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
         />
@@ -549,7 +549,7 @@
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
           class="max-h-[calc(100vh-140px)]"
-          :data-source="data"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -590,9 +590,7 @@
             css-class="custom-table-column"
             :width="50"
             alignment="center"
-            :calculateCellValue="
-              (item: any) => dummyData.gangguan.rekap.detailGangguan.findIndex((i) => i == item) + 1
-            "
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
             data-type="number"
             caption="No"
             cell-template="formatNumber"
@@ -909,7 +907,6 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries } from '@/utils/api/api.graphql'
-import { dummyData } from '@/utils/dummy'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const position = { of: '#data' }
@@ -968,7 +965,7 @@ const filterData = (params: any) => {
 }
 
 const getDetail = () => {
-  dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+  // dataSub.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
 }
 
 const showDialogDataSelected = () => {
@@ -1022,7 +1019,413 @@ const filters = ref()
 
 onMounted(() => {
   if (import.meta.env.DEV) {
-    data.value = dummyData.keluhan.rekap.rekapitulasiKeluhanPerUnit
+    data.value = [
+      {
+        id: 0,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12102,
+        nama_ulp: 'ULP LIMA PULUH',
+        total: 11,
+        total_selesai: 1,
+        persen_selesai: 9.090909090909092,
+        total_inproses: 10,
+        persen_inproses: 90.9090909090909,
+        total_durasi_response: 10193,
+        avg_durasi_response: 1019.3,
+        min_durasi_response: 379,
+        max_durasi_response: 1782,
+        total_dibawah_sla_response: 7,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 13701,
+        avg_durasi_recovery: 1245.5454545454545,
+        min_durasi_recovery: 388,
+        max_durasi_recovery: 2501,
+        total_dibawah_sla_recovery: 11,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41230,
+        nama_ulp: 'ULP BACAN',
+        total: 6,
+        total_selesai: 4,
+        persen_selesai: 66.66666666666666,
+        total_inproses: 2,
+        persen_inproses: 33.33333333333333,
+        total_durasi_response: 7291,
+        avg_durasi_response: 1458.2,
+        min_durasi_response: 308,
+        max_durasi_response: 2736,
+        total_dibawah_sla_response: 2,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 19860,
+        avg_durasi_recovery: 3310,
+        min_durasi_recovery: 2152,
+        max_durasi_recovery: 6176,
+        total_dibawah_sla_recovery: 5,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        total: 56,
+        total_selesai: 15,
+        persen_selesai: 26.785714285714285,
+        total_inproses: 41,
+        persen_inproses: 73.21428571428571,
+        total_durasi_response: 145058,
+        avg_durasi_response: 3086.340425531915,
+        min_durasi_response: 459,
+        max_durasi_response: 8933,
+        total_dibawah_sla_response: 11,
+        total_diatas_sla_response: 36,
+        total_durasi_recovery: 204948,
+        avg_durasi_recovery: 3659.785714285714,
+        min_durasi_recovery: 1,
+        max_durasi_recovery: 15497,
+        total_dibawah_sla_recovery: 43,
+        total_diatas_sla_recovery: 13
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31500,
+        nama_up3: 'UP3 TOLITOLI',
+        id_ulp: 31530,
+        nama_ulp: 'ULP BANGKIR',
+        total: 56,
+        total_selesai: 23,
+        persen_selesai: 41.07142857142857,
+        total_inproses: 33,
+        persen_inproses: 58.92857142857143,
+        total_durasi_response: 14809,
+        avg_durasi_response: 643.8695652173913,
+        min_durasi_response: 63,
+        max_durasi_response: 6694,
+        total_dibawah_sla_response: 22,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 63412,
+        avg_durasi_recovery: 1132.357142857143,
+        min_durasi_recovery: 76,
+        max_durasi_recovery: 6815,
+        total_dibawah_sla_recovery: 52,
+        total_diatas_sla_recovery: 4
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 154,
+        nama_up3: 'UP3 SITUBONDO',
+        id_ulp: 51654,
+        nama_ulp: 'ULP WONOSARI',
+        total: 92,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 92,
+        persen_inproses: 100,
+        total_durasi_response: 201431,
+        avg_durasi_response: 2426.879518072289,
+        min_durasi_response: 14,
+        max_durasi_response: 22160,
+        total_dibawah_sla_response: 54,
+        total_diatas_sla_response: 29,
+        total_durasi_recovery: 856596,
+        avg_durasi_recovery: 9310.826086956522,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 74239,
+        total_dibawah_sla_recovery: 49,
+        total_diatas_sla_recovery: 43
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 116,
+        nama_up3: 'UP3 SIGLI',
+        id_ulp: 11662,
+        nama_ulp: 'ULP MEUREUDU',
+        total: 8,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 8,
+        persen_inproses: 100,
+        total_durasi_response: 3766,
+        avg_durasi_response: 470.75,
+        min_durasi_response: 99,
+        max_durasi_response: 1322,
+        total_dibawah_sla_response: 8,
+        total_diatas_sla_response: 0,
+        total_durasi_recovery: 4463,
+        avg_durasi_recovery: 557.875,
+        min_durasi_recovery: 132,
+        max_durasi_recovery: 1390,
+        total_dibawah_sla_recovery: 8,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 329,
+        nama_up3: 'UP3 BALI UTARA',
+        id_ulp: 55340,
+        nama_ulp: 'ULP GILIMANUK',
+        total: 47,
+        total_selesai: 19,
+        persen_selesai: 40.42553191489361,
+        total_inproses: 28,
+        persen_inproses: 59.57446808510638,
+        total_durasi_response: 47015,
+        avg_durasi_response: 1000.3191489361702,
+        min_durasi_response: 22,
+        max_durasi_response: 14684,
+        total_dibawah_sla_response: 42,
+        total_diatas_sla_response: 5,
+        total_durasi_recovery: 74421,
+        avg_durasi_recovery: 1583.4255319148936,
+        min_durasi_recovery: 257,
+        max_durasi_recovery: 14769,
+        total_dibawah_sla_recovery: 44,
+        total_diatas_sla_recovery: 3
+      },
+      {
+        id: 7,
+        nama_regional: null,
+        id_uid: 0,
+        nama_uid: '',
+        id_up3: 0,
+        nama_up3: '',
+        id_ulp: 22450,
+        nama_ulp: 'ULP PANGKALAN BUN',
+        total: 167,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 167,
+        persen_inproses: 100,
+        total_durasi_response: 118469,
+        avg_durasi_response: 789.7933333333333,
+        min_durasi_response: 52,
+        max_durasi_response: 3752,
+        total_dibawah_sla_response: 135,
+        total_diatas_sla_response: 15,
+        total_durasi_recovery: 173448,
+        avg_durasi_recovery: 1038.6107784431138,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 3793,
+        total_dibawah_sla_recovery: 167,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13300,
+        nama_up3: 'UP3 SOLOK',
+        id_ulp: 13334,
+        nama_ulp: 'ULP SILUNGKANG',
+        total: 1,
+        total_selesai: 0,
+        persen_selesai: 0,
+        total_inproses: 1,
+        persen_inproses: 100,
+        total_durasi_response: 5118,
+        avg_durasi_response: 5118,
+        min_durasi_response: 5118,
+        max_durasi_response: 5118,
+        total_dibawah_sla_response: 0,
+        total_diatas_sla_response: 1,
+        total_durasi_recovery: 5696,
+        avg_durasi_recovery: 5696,
+        min_durasi_recovery: 5696,
+        max_durasi_recovery: 5696,
+        total_dibawah_sla_recovery: 0,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2220,
+        nama_up3: 'UP3 BARABAI',
+        id_ulp: 22230,
+        nama_ulp: 'ULP AMUNTAI',
+        total: 48,
+        total_selesai: 4,
+        persen_selesai: 8.333333333333332,
+        total_inproses: 44,
+        persen_inproses: 91.66666666666666,
+        total_durasi_response: 25050,
+        avg_durasi_response: 532.9787234042553,
+        min_durasi_response: 58,
+        max_durasi_response: 2352,
+        total_dibawah_sla_response: 44,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 49151,
+        avg_durasi_recovery: 1023.9791666666666,
+        min_durasi_recovery: 129,
+        max_durasi_recovery: 2853,
+        total_dibawah_sla_recovery: 48,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 10,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31700,
+        nama_up3: 'UP3 KOTAMOBAGU',
+        id_ulp: 31730,
+        nama_ulp: 'ULP MODAYAG',
+        total: 21,
+        total_selesai: 11,
+        persen_selesai: 52.38095238095239,
+        total_inproses: 10,
+        persen_inproses: 47.61904761904761,
+        total_durasi_response: 11456,
+        avg_durasi_response: 716,
+        min_durasi_response: 126,
+        max_durasi_response: 2376,
+        total_dibawah_sla_response: 13,
+        total_diatas_sla_response: 3,
+        total_durasi_recovery: 30489,
+        avg_durasi_recovery: 1451.857142857143,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 3482,
+        total_dibawah_sla_recovery: 21,
+        total_diatas_sla_recovery: 0
+      },
+      {
+        id: 11,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 546,
+        nama_up3: 'UP3 TASIKMALAYA',
+        id_ulp: 53231,
+        nama_ulp: 'ULP CIAMIS',
+        total: 123,
+        total_selesai: 16,
+        persen_selesai: 13.008130081300814,
+        total_inproses: 107,
+        persen_inproses: 86.99186991869918,
+        total_durasi_response: 476405,
+        avg_durasi_response: 5881.543209876543,
+        min_durasi_response: 46,
+        max_durasi_response: 41257,
+        total_dibawah_sla_response: 21,
+        total_diatas_sla_response: 60,
+        total_durasi_recovery: 1177396,
+        avg_durasi_recovery: 9572.325203252032,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 45912,
+        total_dibawah_sla_recovery: 57,
+        total_diatas_sla_recovery: 66
+      },
+      {
+        id: 12,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 157,
+        nama_up3: 'UP3 SURABAYA UTARA',
+        id_ulp: 51101,
+        nama_ulp: 'ULP INDRAPURA',
+        total: 139,
+        total_selesai: 131,
+        persen_selesai: 94.24460431654677,
+        total_inproses: 8,
+        persen_inproses: 5.755395683453238,
+        total_durasi_response: 491177,
+        avg_durasi_response: 3749.442748091603,
+        min_durasi_response: 18,
+        max_durasi_response: 20546,
+        total_dibawah_sla_response: 51,
+        total_diatas_sla_response: 80,
+        total_durasi_recovery: 775066,
+        avg_durasi_recovery: 5576.014388489209,
+        min_durasi_recovery: 1,
+        max_durasi_recovery: 49206,
+        total_dibawah_sla_recovery: 78,
+        total_diatas_sla_recovery: 61
+      },
+      {
+        id: 13,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 414,
+        nama_up3: 'UP3 MASOHI',
+        id_ulp: 41430,
+        nama_ulp: 'ULP MASOHI',
+        total: 19,
+        total_selesai: 17,
+        persen_selesai: 89.47368421052632,
+        total_inproses: 2,
+        persen_inproses: 10.526315789473683,
+        total_durasi_response: 18570,
+        avg_durasi_response: 1092.3529411764705,
+        min_durasi_response: 480,
+        max_durasi_response: 2337,
+        total_dibawah_sla_response: 13,
+        total_diatas_sla_response: 4,
+        total_durasi_recovery: 41850,
+        avg_durasi_recovery: 2202.6315789473683,
+        min_durasi_recovery: 22,
+        max_durasi_recovery: 4386,
+        total_dibawah_sla_recovery: 18,
+        total_diatas_sla_recovery: 1
+      },
+      {
+        id: 14,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        total: 67,
+        total_selesai: 56,
+        persen_selesai: 83.5820895522388,
+        total_inproses: 11,
+        persen_inproses: 16.417910447761194,
+        total_durasi_response: 67996,
+        avg_durasi_response: 1214.2142857142858,
+        min_durasi_response: 45,
+        max_durasi_response: 17051,
+        total_dibawah_sla_response: 48,
+        total_diatas_sla_response: 8,
+        total_durasi_recovery: 546970,
+        avg_durasi_recovery: 8163.731343283582,
+        min_durasi_recovery: 0,
+        max_durasi_recovery: 221267,
+        total_dibawah_sla_recovery: 40,
+        total_diatas_sla_recovery: 27
+      }
+    ]
   }
 })
 </script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
index 2535804..2620853 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_ENSGangguan.vue
@@ -1,43 +1,178 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @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" :word-wrap-enabled="true">
+    <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"
+      :word-wrap-enabled="true"
+    >
       <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="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="ENS Gangguan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="MoM" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="mom_bulan_kemarin" data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="mom_bulan_ini" data-type="number"
-            :caption="`${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="70" alignment="center" data-field="persen_mom" data-type="number" caption="%"
-            css-class="custom-table-column" cell-template="percent" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="mom_bulan_kemarin"
+            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${lastYear}`"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="mom_bulan_ini"
+            data-type="number"
+            :caption="`${getMonthName(currentMonth)} ${currentYear}`"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_mom"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="YoY" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_kemarin" data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`" css-class="custom-table-column" />
-          <DxColumn :width="150" alignment="center" data-field="yoy_tahun_ini" data-type="number"
-            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`" css-class="custom-table-column" />
-          <DxColumn :width="70" alignment="center" data-field="persen_yoy" data-type="number" caption="%"
-            css-class="custom-table-column" cell-template="percent" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="yoy_tahun_kemarin"
+            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${lastYear}`"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="yoy_tahun_ini"
+            data-type="number"
+            :caption="`s.d ${getMonthName(currentMonth)} ${currentYear}`"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_yoy"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
-      <template #percent="{ data }">
-        {{ data.text }}%
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
       </template>
+
+      <template #formatText="{ data }">
+        <p class="!text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="nama_ulp"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          column="mom_bulan_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="mom_bulan_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="persen_mom"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="yoy_tahun_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+
+        <DxTotalItem
+          column="yoy_tahun_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="persen_yoy"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -45,7 +180,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
@@ -55,7 +190,9 @@ import {
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -65,6 +202,7 @@ import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { getMonthName } from '@/utils/texts'
 import { queries } from '@/utils/api/api.graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
@@ -77,14 +215,17 @@ const data = ref<any[]>([])
 const dataDetail = ref<any>()
 const showDetail = ref(false)
 
-const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan, {
-  bulan: 10,
-  tahun: 2023,
-  regional: '',
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0
-})
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.gangguan.rekap.rekapitulasiEnsGangguan,
+  {
+    bulan: 10,
+    tahun: 2023,
+    regional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0
+  }
+)
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
@@ -145,4 +286,250 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        nama_regional: null,
+        id_uid: 0,
+        nama_uid: '',
+        id_up3: 0,
+        nama_up3: '',
+        id_ulp: 0,
+        nama_ulp: '',
+        mom_bulan_ini: 11020739,
+        mom_bulan_kemarin: 6831980,
+        persen_mom: -61.31105477475051,
+        yoy_tahun_ini: 139773892,
+        yoy_tahun_kemarin: 168209007,
+        persen_yoy: 16.904632817908496
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12102,
+        nama_ulp: 'ULP LIMA PULUH',
+        mom_bulan_ini: 14813,
+        mom_bulan_kemarin: 47696,
+        persen_mom: 68.94288829251929,
+        yoy_tahun_ini: 354676,
+        yoy_tahun_kemarin: 624303,
+        persen_yoy: 43.18848379713056
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41230,
+        nama_ulp: 'ULP BACAN',
+        mom_bulan_ini: 462651,
+        mom_bulan_kemarin: 6730,
+        persen_mom: -6774.45765230312,
+        yoy_tahun_ini: 1643180,
+        yoy_tahun_kemarin: 492691,
+        persen_yoy: -233.51126771140534
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        mom_bulan_ini: 855320,
+        mom_bulan_kemarin: 837741,
+        persen_mom: -2.0983812419351566,
+        yoy_tahun_ini: 8072389,
+        yoy_tahun_kemarin: 11055796,
+        persen_yoy: 26.985004064836215
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31500,
+        nama_up3: 'UP3 TOLITOLI',
+        id_ulp: 31530,
+        nama_ulp: 'ULP BANGKIR',
+        mom_bulan_ini: 56259,
+        mom_bulan_kemarin: 76807,
+        persen_mom: 26.752769929824105,
+        yoy_tahun_ini: 1098120,
+        yoy_tahun_kemarin: 2481724,
+        persen_yoy: 55.751727428191046
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 154,
+        nama_up3: 'UP3 SITUBONDO',
+        id_ulp: 51654,
+        nama_ulp: 'ULP WONOSARI',
+        mom_bulan_ini: 478439,
+        mom_bulan_kemarin: 1078502,
+        persen_mom: 55.6385616345635,
+        yoy_tahun_ini: 6845897,
+        yoy_tahun_kemarin: 7566389,
+        persen_yoy: 9.522270134406254
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 116,
+        nama_up3: 'UP3 SIGLI',
+        id_ulp: 11662,
+        nama_ulp: 'ULP MEUREUDU',
+        mom_bulan_ini: 559072,
+        mom_bulan_kemarin: 182563,
+        persen_mom: -206.23510788056728,
+        yoy_tahun_ini: 7747710,
+        yoy_tahun_kemarin: 7916066,
+        persen_yoy: 2.12676347064312
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 329,
+        nama_up3: 'UP3 BALI UTARA',
+        id_ulp: 55340,
+        nama_ulp: 'ULP GILIMANUK',
+        mom_bulan_ini: 643731,
+        mom_bulan_kemarin: 578381,
+        persen_mom: -11.298780561602127,
+        yoy_tahun_ini: 7155021,
+        yoy_tahun_kemarin: 5869321,
+        persen_yoy: -21.905429946666743
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13300,
+        nama_up3: 'UP3 SOLOK',
+        id_ulp: 13334,
+        nama_ulp: 'ULP SILUNGKANG',
+        mom_bulan_ini: 289082,
+        mom_bulan_kemarin: 416662,
+        persen_mom: 30.61954293888092,
+        yoy_tahun_ini: 1509396,
+        yoy_tahun_kemarin: 3844624,
+        persen_yoy: 60.740087977393884
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2220,
+        nama_up3: 'UP3 BARABAI',
+        id_ulp: 22230,
+        nama_ulp: 'ULP AMUNTAI',
+        mom_bulan_ini: 183310,
+        mom_bulan_kemarin: 356299,
+        persen_mom: 48.55163780981703,
+        yoy_tahun_ini: 2039104,
+        yoy_tahun_kemarin: 5170462,
+        persen_yoy: 60.56244103524985
+      },
+      {
+        id: 10,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31700,
+        nama_up3: 'UP3 KOTAMOBAGU',
+        id_ulp: 31730,
+        nama_ulp: 'ULP MODAYAG',
+        mom_bulan_ini: 86982,
+        mom_bulan_kemarin: 39871,
+        persen_mom: -118.15856136038725,
+        yoy_tahun_ini: 1111887,
+        yoy_tahun_kemarin: 2440181,
+        persen_yoy: 54.4342407386993
+      },
+      {
+        id: 11,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 427,
+        nama_uid: 'DISTRIBUSI JAWA BARAT',
+        id_up3: 546,
+        nama_up3: 'UP3 TASIKMALAYA',
+        id_ulp: 53231,
+        nama_ulp: 'ULP CIAMIS',
+        mom_bulan_ini: 1042643,
+        mom_bulan_kemarin: 2168988,
+        persen_mom: 51.92951736016981,
+        yoy_tahun_ini: 8579030,
+        yoy_tahun_kemarin: 16227325,
+        persen_yoy: 47.13219831364689
+      },
+      {
+        id: 12,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 157,
+        nama_up3: 'UP3 SURABAYA UTARA',
+        id_ulp: 51101,
+        nama_ulp: 'ULP INDRAPURA',
+        mom_bulan_ini: 469350,
+        mom_bulan_kemarin: 575194,
+        persen_mom: 18.401443686825665,
+        yoy_tahun_ini: 4905051,
+        yoy_tahun_kemarin: 4976204,
+        persen_yoy: 1.4298650135725948
+      },
+      {
+        id: 13,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 414,
+        nama_up3: 'UP3 MASOHI',
+        id_ulp: 41430,
+        nama_ulp: 'ULP MASOHI',
+        mom_bulan_ini: 163662,
+        mom_bulan_kemarin: 83017,
+        persen_mom: -97.14275389378079,
+        yoy_tahun_ini: 1842074,
+        yoy_tahun_kemarin: 686794,
+        persen_yoy: -168.21346721142
+      },
+      {
+        id: 14,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13100,
+        nama_up3: 'UP3 PADANG',
+        id_ulp: 13105,
+        nama_ulp: 'ULP LUBUK ALUNG',
+        mom_bulan_ini: 549380,
+        mom_bulan_kemarin: 802333,
+        persen_mom: 31.527183850097156,
+        yoy_tahun_ini: 5168384,
+        yoy_tahun_kemarin: 8611936,
+        persen_yoy: 39.98580574681465
+      }
+    ]
+  }
+})
+</script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
index 2542271..23d281f 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_GangguanBelumSelesai.vue
@@ -1,48 +1,442 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type2 @update:filters="(value) => filters = value" />
+    <Type2 @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" :word-wrap-enabled="true">
+    <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"
+      :word-wrap-enabled="true"
+    >
       <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="nama_ulp" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        alignment="center"
+        data-field="nama_ulp"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Tahun" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="jumlah_gangguan" data-type="number" caption="Gangguan"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="jumlah_informasi" data-type="number" caption="Informasi"
-          css-class="custom-table-column" />
-        <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="jumlah_gangguan"
+          data-type="number"
+          caption="Gangguan"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="jumlah_informasi"
+          data-type="number"
+          caption="Informasi"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showDialog()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatText="{ data }">
+        <p class="!text-left cursor-pointer" @click="showDialog()">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="nama_ulp"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          column="jumlah_gangguan"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="jumlah_informasi"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="total"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Detail Gangguan Belum Selesai"
+    @on-close="closeDialog"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          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="UID/UIW"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="UP3"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="ULP"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="ID Pelanggan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Nama Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Alamat Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Telp Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Keterangan Pelapor"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Penyebab"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Kode Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="200"
+            alignment="center"
+            data-field=""
+            caption="Jenis Gangguan"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Response Time"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Recoery Time:"
+            :allow-resizing="false"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor"
+            :allow-resizing="false"
+            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">UID/UIW:</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">UP3:</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">ULP:</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">ID Pelanggan:</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">Penyebab:</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">Kode Gangguan:</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">Jenis Gangguan:</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 Recoery 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">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 Selesai:</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 Type2 from '@/components/Form/FiltersType/Type2.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
   DxColumn,
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
-  DxSelection
+  DxSelection,
+  DxSummary,
+  DxTotalItem
 } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
@@ -51,6 +445,10 @@ 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 DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
 
 const currentYear = ref(new Date().getFullYear())
 const currentMonth = ref(new Date().getMonth())
@@ -60,16 +458,31 @@ const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
 const data = ref<any[]>([])
-const dataDetail = ref<any>()
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
 const showDetail = ref(false)
-const { onResult, onError, loading, refetch } = useQuery(queries.monalisa.gangguan.rekap.gangguanBelumSelesai, {
-  regional: '',
-  idUlp: 0,
-  idUid: 0,
-  idUp3: 0,
-  bulan: 10,
-  tahun: 2023
-})
+const loadingSubData = ref(false)
+
+const showDialog = () => {
+  showDetail.value = true
+}
+
+const closeDialog = () => {
+  showDetail.value = false
+}
+
+const { onResult, onError, loading, refetch } = useQuery(
+  queries.monalisa.gangguan.rekap.gangguanBelumSelesai,
+  {
+    regional: '',
+    idUlp: 0,
+    idUid: 0,
+    idUp3: 0,
+    bulan: 10,
+    tahun: 2023
+  }
+)
 const filterData = (params: any) => {
   const { regional, ulp, uid, up3, bulan, tahun } = params
   currentMonth.value = bulan.id
@@ -124,10 +537,151 @@ const onExporting = (e: any) => {
   }
 }
 
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const onDataSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSelected.value = selectedRowsData[0]
+  console.log(data)
+}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
   console.log(data)
 }
 
 const filters = ref()
-</script>
\ No newline at end of file
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        nama_regional: null,
+        id_uid: 0,
+        nama_uid: '',
+        id_up3: 0,
+        nama_up3: '',
+        id_ulp: 0,
+        nama_ulp: '',
+        jumlah_gangguan: 19286,
+        jumlah_informasi: 0,
+        total: 19286
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12100,
+        nama_up3: 'UP3 PEMATANG SIANTAR',
+        id_ulp: 12102,
+        nama_ulp: 'ULP LIMA PULUH',
+        jumlah_gangguan: 41,
+        jumlah_informasi: 0,
+        total: 41
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 41,
+        nama_uid: 'WILAYAH MALUKU DAN MALUKU UTARA',
+        id_up3: 412,
+        nama_up3: 'UP3 TERNATE',
+        id_ulp: 41230,
+        nama_ulp: 'ULP BACAN',
+        jumlah_gangguan: 511,
+        jumlah_informasi: 0,
+        total: 511
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52150,
+        nama_up3: 'UP3 MAGELANG',
+        id_ulp: 52156,
+        nama_ulp: 'ULP PARAKAN',
+        jumlah_gangguan: 1072,
+        jumlah_informasi: 0,
+        total: 1072
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31500,
+        nama_up3: 'UP3 TOLITOLI',
+        id_ulp: 31530,
+        nama_ulp: 'ULP BANGKIR',
+        jumlah_gangguan: 70,
+        jumlah_informasi: 0,
+        total: 70
+      },
+      {
+        id: 5,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 154,
+        nama_up3: 'UP3 SITUBONDO',
+        id_ulp: 51654,
+        nama_ulp: 'ULP WONOSARI',
+        jumlah_gangguan: 1401,
+        jumlah_informasi: 0,
+        total: 1401
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 116,
+        nama_up3: 'UP3 SIGLI',
+        id_ulp: 11662,
+        nama_ulp: 'ULP MEUREUDU',
+        jumlah_gangguan: 608,
+        jumlah_informasi: 0,
+        total: 608
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 329,
+        nama_up3: 'UP3 BALI UTARA',
+        id_ulp: 55340,
+        nama_ulp: 'ULP GILIMANUK',
+        jumlah_gangguan: 858,
+        jumlah_informasi: 0,
+        total: 858
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 131,
+        nama_uid: 'WILAYAH SUMATERA BARAT',
+        id_up3: 13300,
+        nama_up3: 'UP3 SOLOK',
+        id_ulp: 13334,
+        nama_ulp: 'ULP SILUNGKANG',
+        jumlah_gangguan: 305,
+        jumlah_informasi: 0,
+        total: 305
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 221,
+        nama_uid: 'WILAYAH KALIMANTAN SELATAN DAN TENGAH',
+        id_up3: 2220,
+        nama_up3: 'UP3 BARABAI',
+        id_ulp: 22230,
+        nama_ulp: 'ULP AMUNTAI',
+        jumlah_gangguan: 323,
+        jumlah_informasi: 0,
+        total: 323
+      }
+    ]
+  }
+})
+</script>
diff --git a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
index b895622..784ff75 100755
--- a/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
+++ b/src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_LaporUlang.vue
@@ -17,6 +17,7 @@
       column-resizing-mode="widget"
       :word-wrap-enabled="true"
     >
+      <DxGrouping :context-menu-enabled="true" expand-mode="rowClick" />
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
@@ -113,105 +114,6 @@
         </DxColumn>
       </DxColumn>
 
-      <DxSummary>
-        <DxTotalItem
-          summary-type="sum"
-          display-format="Total"
-          show-in-column="nama_ulp"
-          css-class="text-white !text-left"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="mom_bulan_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxTotalItem
-          column="mom_bulan_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="mom_bulan_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxTotalItem
-          column="mom_bulan_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_mom"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
-        />
-        <DxTotalItem
-          column="persen_mom"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_kemarin"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxTotalItem
-          column="yoy_tahun_kemarin"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="yoy_tahun_ini"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxTotalItem
-          column="yoy_tahun_ini"
-          summary-type="sum"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
-        />
-        <DxGroupItem
-          :show-in-group-footer="false"
-          :align-by-column="true"
-          summary-type="sum"
-          show-in-column="persen_yoy"
-          css-class="!text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
-        />
-        <DxTotalItem
-          column="persen_yoy"
-          summary-type="avg"
-          display-format="{0}"
-          css-class="text-white !text-right"
-          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
-        />
-      </DxSummary>
-
       <template #formatNumber="{ data }">
         <p class="text-right">
           {{
@@ -229,6 +131,113 @@
           {{ data.text }}
         </p>
       </template>
+
+      <DxSummary>
+        <DxTotalItem
+          summary-type="sum"
+          display-format="Total"
+          show-in-column="nama_ulp"
+          css-class="text-white !text-left"
+        />
+        <DxTotalItem
+          column="mom_bulan_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="mom_bulan_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="persen_mom"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="yoy_tahun_kemarin"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+
+        <DxTotalItem
+          column="yoy_tahun_ini"
+          summary-type="sum"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxTotalItem
+          column="persen_yoy"
+          summary-type="avg"
+          display-format="{0}"
+          css-class="text-white !text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          display-format="{0}"
+          show-in-column="mom_bulan_kemarin"
+          column="mom_bulan_kemarin"
+          css-class="!text-right"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="mom_bulan_ini"
+          column="mom_bulan_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_mom"
+          column="persen_mom"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_kemarin"
+          column="yoy_tahun_kemarin"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="yoy_tahun_ini"
+          column="yoy_tahun_ini"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatNumber(parseFloat(e.value.toString()))"
+        />
+        <DxGroupItem
+          :show-in-group-footer="false"
+          :align-by-column="true"
+          summary-type="sum"
+          show-in-column="persen_yoy"
+          column="persen_yoy"
+          css-class="!text-right"
+          :customize-text="(e: any) => formatPercentage(parseFloat(e.value.toString()))"
+        />
+      </DxSummary>
     </DxDataGrid>
   </div>
 </template>
@@ -243,6 +252,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGroupItem,
+  DxGrouping,
   DxLoadPanel,
   DxPaging,
   DxScrolling,
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index c33e30f..47fc3c6 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -181,21 +181,21 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            alamat_pelapor
-            durasi_recovery_time
-            durasi_response_time
-            idpel_nometer
+            no_laporan
+            waktu_lapor
+            waktu_response
+            waktu_recovery
             jumlah_lapor
+            durasi_response_time
+            durasi_recovery_time
+            status_akhir
+            idpel_nometer
+            nama_pelapor
+            alamat_pelapor
+            no_telp_pelapor
             keterangan_pelapor
             media
-            nama_pelapor
             nama_ulp
-            no_laporan
-            no_telp_pelapor
-            status_akhir
-            waktu_lapor
-            waktu_recovery
-            waktu_response
           }
         }
       `,
@@ -321,6 +321,12 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
             id_ulp
             nama_ulp
             total
@@ -329,12 +335,12 @@ export const queries = {
             total_inproses
             persen_inproses
             total_durasi_response
-            total_durasi_recovery
             avg_durasi_response
             min_durasi_response
             max_durasi_response
             total_dibawah_sla_response
             total_diatas_sla_response
+            total_durasi_recovery
             avg_durasi_recovery
             min_durasi_recovery
             max_durasi_recovery
@@ -441,8 +447,6 @@ export const queries = {
             avg_durasi_response
             min_durasi_response
             max_durasi_response
-            total_durasi_response
-            total_durasi_recovery
             total_dibawah_sla_response
             total_diatas_sla_response
             avg_durasi_recovery
@@ -468,10 +472,16 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             fungsi_bidang
             total
-            total_durasi_response
-            total_durasi_recovery
             total_selesai
             persen_selesai
             total_inproses
@@ -496,6 +506,7 @@ export const queries = {
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
+          $media: String!
         ) {
           rekapitulasiKeluhanBerdasarkanMedia(
             dateFrom: $dateFrom
@@ -503,9 +514,18 @@ export const queries = {
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
+            media: $media
           ) {
             media
             tgl1
+            tgl2
+            tgl3
+            tgl4
+            tgl5
+            tgl6
+            tgl7
+            tgl8
+            tgl9
             tgl10
             tgl11
             tgl12
@@ -516,7 +536,6 @@ export const queries = {
             tgl17
             tgl18
             tgl19
-            tgl2
             tgl20
             tgl21
             tgl22
@@ -527,15 +546,9 @@ export const queries = {
             tgl27
             tgl28
             tgl29
-            tgl3
             tgl30
             tgl31
-            tgl4
-            tgl5
-            tgl6
-            tgl7
-            tgl8
-            tgl9
+            total
           }
         }
       `,
@@ -554,6 +567,12 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
             id_ulp
             nama_ulp
             total
@@ -561,11 +580,13 @@ export const queries = {
             persen_selesai
             total_inproses
             persen_inproses
+            total_durasi_response
             avg_durasi_response
             min_durasi_response
             max_durasi_response
             total_dibawah_sla_response
             total_diatas_sla_response
+            total_durasi_recovery
             avg_durasi_recovery
             min_durasi_recovery
             max_durasi_recovery
@@ -755,26 +776,37 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            id_regu
             kode_regu
             nama_regu
-            avg_durasi_recovery
-            avg_durasi_response
-            max_durasi_recovery
-            max_durasi_response
-            min_durasi_recovery
-            min_durasi_response
-            persen_inproses
-            persen_selesai
-            nama_posko
             total
-            total_durasi_recovery
-            total_durasi_response
-            total_diatas_sla_recovery
-            total_diatas_sla_response
-            total_dibawah_sla_recovery
-            total_dibawah_sla_response
-            total_inproses
             total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_durasi_response
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            total_durasi_recovery
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+            total_response
+            total_recovery
           }
         }
       `,
@@ -793,25 +825,33 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            avg_durasi_recovery
-            avg_durasi_response
+            id
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
             id_posko
-            max_durasi_recovery
-            max_durasi_response
-            min_durasi_recovery
-            min_durasi_response
             nama_posko
-            persen_inproses
-            persen_selesai
             total
-            total_durasi_recovery
-            total_durasi_response
-            total_diatas_sla_recovery
-            total_diatas_sla_response
-            total_dibawah_sla_recovery
-            total_dibawah_sla_response
-            total_inproses
             total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_durasi_response
+            avg_durasi_response
+            min_durasi_response
+            max_durasi_response
+            total_dibawah_sla_response
+            total_diatas_sla_response
+            avg_durasi_recovery
+            min_durasi_recovery
+            max_durasi_recovery
+            total_dibawah_sla_recovery
+            total_diatas_sla_recovery
+            total_response
+            total_recovery
           }
         }
       `,
@@ -830,6 +870,7 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
+            nama_regional
             id
             id_uid
             nama_uid
@@ -867,8 +908,10 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            kode
+            id
+            id_fasilitas
             sub_kelompok
+            kode
             total
             total_selesai
             persen_selesai
@@ -886,6 +929,8 @@ export const queries = {
             max_durasi_recovery
             total_dibawah_sla_recovery
             total_diatas_sla_recovery
+            total_response
+            total_recovery
           }
         }
       `,
@@ -1471,6 +1516,7 @@ export const queries = {
               bulan: $bulan
               tahun: $tahun
             ) {
+              id
               nama_regional
               id_uid
               nama_uid
diff --git a/src/utils/dummy.ts b/src/utils/dummy.ts
index bae3557..3527169 100644
--- a/src/utils/dummy.ts
+++ b/src/utils/dummy.ts
@@ -586131,60 +586131,279 @@ export const dummyData = {
                 }
             ],
             rekapitulasiKeluhanPerJenisKeluhan: [
-                {
-                    "tipe_keluhan": "ULP BATURAJA",
-                    "total": 83,
-                    "total_selesai": 83,
-                    "persen_selesai": 100,
-                    "total_inproses": 0,
-                    "persen_inproses": 0,
-                    "avg_durasi_response": 25800.21686746988,
-                    "min_durasi_response": 64,
-                    "max_durasi_response": 173218,
-                    "total_dibawah_sla_response": 38,
-                    "total_diatas_sla_response": 45,
-                    "avg_durasi_recovery": 3379854.0361445784,
-                    "min_durasi_recovery": 1064,
-                    "max_durasi_recovery": 5099979,
-                    "total_dibawah_sla_recovery": 7,
-                    "total_diatas_sla_recovery": 76
-                },
-                {
-                    "tipe_keluhan": "ULP KIJANG",
-                    "total": 42,
-                    "total_selesai": 42,
-                    "persen_selesai": 100,
-                    "total_inproses": 0,
-                    "persen_inproses": 0,
-                    "avg_durasi_response": 1056.1904761904761,
-                    "min_durasi_response": 118,
-                    "max_durasi_response": 3920,
-                    "total_dibawah_sla_response": 42,
-                    "total_diatas_sla_response": 0,
-                    "avg_durasi_recovery": 226031.88095238095,
-                    "min_durasi_recovery": 74,
-                    "max_durasi_recovery": 4995551,
-                    "total_dibawah_sla_recovery": 40,
-                    "total_diatas_sla_recovery": 2
-                },
-                {
-                    "tipe_keluhan": "ULP BARABAI",
-                    "total": 40,
-                    "total_selesai": 40,
-                    "persen_selesai": 100,
-                    "total_inproses": 0,
-                    "persen_inproses": 0,
-                    "avg_durasi_response": 858.9,
-                    "min_durasi_response": 62,
-                    "max_durasi_response": 2169,
-                    "total_dibawah_sla_response": 40,
-                    "total_diatas_sla_response": 0,
-                    "avg_durasi_recovery": 2238019.725,
-                    "min_durasi_recovery": 117,
-                    "max_durasi_recovery": 5099482,
-                    "total_dibawah_sla_recovery": 17,
-                    "total_diatas_sla_recovery": 23
-                }
+                  {
+                "tipe_keluhan": "Umum",
+                "nama_uid": "WILAYAH NUSA TENGGARA TIMUR",
+                "total": 1,
+                "total_selesai": 0,
+                "persen_selesai": 0.0,
+                "total_inproses": 1,
+                "persen_inproses": 100.0,
+                "total_durasi_response": null,
+                "avg_durasi_response": null,
+                "min_durasi_response": null,
+                "max_durasi_response": null,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 0,
+                "total_durasi_recovery": 1064,
+                "avg_durasi_recovery": 1064.0,
+                "min_durasi_recovery": 1064,
+                "max_durasi_recovery": 1064,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "tipe_keluhan": "Alat Pembatas  tidak berfungsi ",
+                "nama_uid": "DISTRIBUSI JAWA TIMUR",
+                "total": 10,
+                "total_selesai": 0,
+                "persen_selesai": 0.0,
+                "total_inproses": 10,
+                "persen_inproses": 100.0,
+                "total_durasi_response": 143356,
+                "avg_durasi_response": 14335.6,
+                "min_durasi_response": 185,
+                "max_durasi_response": 42599,
+                "total_dibawah_sla_response": 2,
+                "total_diatas_sla_response": 8,
+                "total_durasi_recovery": 149627,
+                "avg_durasi_recovery": 14962.7,
+                "min_durasi_recovery": 227,
+                "max_durasi_recovery": 42778,
+                "total_dibawah_sla_recovery": 3,
+                "total_diatas_sla_recovery": 7
+            },
+            {
+                "tipe_keluhan": "Gagal Input Token",
+                "nama_uid": "DISTRIBUSI LAMPUNG",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100.0,
+                "total_inproses": 0,
+                "persen_inproses": 0.0,
+                "total_durasi_response": 323,
+                "avg_durasi_response": 323.0,
+                "min_durasi_response": 323,
+                "max_durasi_response": 323,
+                "total_dibawah_sla_response": 1,
+                "total_diatas_sla_response": 0,
+                "total_durasi_recovery": 1319,
+                "avg_durasi_recovery": 1319.0,
+                "min_durasi_recovery": 1319,
+                "max_durasi_recovery": 1319,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "tipe_keluhan": "Alat Pembatas  tidak berfungsi ",
+                "nama_uid": "DISTRIBUSI JAWA BARAT",
+                "total": 4,
+                "total_selesai": 0,
+                "persen_selesai": 0.0,
+                "total_inproses": 4,
+                "persen_inproses": 100.0,
+                "total_durasi_response": null,
+                "avg_durasi_response": null,
+                "min_durasi_response": null,
+                "max_durasi_response": null,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 0,
+                "total_durasi_recovery": 114174,
+                "avg_durasi_recovery": 28543.5,
+                "min_durasi_recovery": 2506,
+                "max_durasi_recovery": 46094,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 3
+            },
+            {
+                "tipe_keluhan": "Alat Pembatas  tidak berfungsi ",
+                "nama_uid": "WILAYAH KALIMANTAN SELATAN DAN TENGAH",
+                "total": 2,
+                "total_selesai": 0,
+                "persen_selesai": 0.0,
+                "total_inproses": 2,
+                "persen_inproses": 100.0,
+                "total_durasi_response": 417,
+                "avg_durasi_response": 417.0,
+                "min_durasi_response": 417,
+                "max_durasi_response": 417,
+                "total_dibawah_sla_response": 1,
+                "total_diatas_sla_response": 0,
+                "total_durasi_recovery": 1661,
+                "avg_durasi_recovery": 830.5,
+                "min_durasi_recovery": 482,
+                "max_durasi_recovery": 1179,
+                "total_dibawah_sla_recovery": 2,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "tipe_keluhan": "PD",
+                "nama_uid": "DISTRIBUSI JAWA TIMUR",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100.0,
+                "total_inproses": 0,
+                "persen_inproses": 0.0,
+                "total_durasi_response": 8693,
+                "avg_durasi_response": 8693.0,
+                "min_durasi_response": 8693,
+                "max_durasi_response": 8693,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "total_durasi_recovery": 9510,
+                "avg_durasi_recovery": 9510.0,
+                "min_durasi_recovery": 9510,
+                "max_durasi_recovery": 9510,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 1
+            },
+            {
+                "tipe_keluhan": "Alat Pembatas  tidak berfungsi ",
+                "nama_uid": "DISTRIBUSI JAWA TENGAH & DIY",
+                "total": 2,
+                "total_selesai": 0,
+                "persen_selesai": 0.0,
+                "total_inproses": 2,
+                "persen_inproses": 100.0,
+                "total_durasi_response": null,
+                "avg_durasi_response": null,
+                "min_durasi_response": null,
+                "max_durasi_response": null,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 0,
+                "total_durasi_recovery": 2226,
+                "avg_durasi_recovery": 1113.0,
+                "min_durasi_recovery": 13,
+                "max_durasi_recovery": 2213,
+                "total_dibawah_sla_recovery": 2,
+                "total_diatas_sla_recovery": 0
+            },
+            {
+                "tipe_keluhan": "Alat Ukur Prabayar tidak berfungsi ",
+                "nama_uid": "DISTRIBUSI JAWA BARAT",
+                "total": 2,
+                "total_selesai": 2,
+                "persen_selesai": 100.0,
+                "total_inproses": 0,
+                "persen_inproses": 0.0,
+                "total_durasi_response": 9595,
+                "avg_durasi_response": 4797.5,
+                "min_durasi_response": 4752,
+                "max_durasi_response": 4843,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 2,
+                "total_durasi_recovery": 9868,
+                "avg_durasi_recovery": 4934.0,
+                "min_durasi_recovery": 4892,
+                "max_durasi_recovery": 4976,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 2
+            },
+            {
+                "tipe_keluhan": "Gagal Input Token",
+                "nama_uid": "DISTRIBUSI JAWA TIMUR",
+                "total": 7,
+                "total_selesai": 7,
+                "persen_selesai": 100.0,
+                "total_inproses": 0,
+                "persen_inproses": 0.0,
+                "total_durasi_response": 6715,
+                "avg_durasi_response": 959.2857142857143,
+                "min_durasi_response": 16,
+                "max_durasi_response": 5516,
+                "total_dibawah_sla_response": 6,
+                "total_diatas_sla_response": 1,
+                "total_durasi_recovery": 18280,
+                "avg_durasi_recovery": 2611.4285714285716,
+                "min_durasi_recovery": 451,
+                "max_durasi_recovery": 6701,
+                "total_dibawah_sla_recovery": 5,
+                "total_diatas_sla_recovery": 2
+            },
+            {
+                "tipe_keluhan": "Gagal Input Token",
+                "nama_uid": "WILAYAH SUMATERA UTARA",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100.0,
+                "total_inproses": 0,
+                "persen_inproses": 0.0,
+                "total_durasi_response": 24723,
+                "avg_durasi_response": 24723.0,
+                "min_durasi_response": 24723,
+                "max_durasi_response": 24723,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "total_durasi_recovery": 25761,
+                "avg_durasi_recovery": 25761.0,
+                "min_durasi_recovery": 25761,
+                "max_durasi_recovery": 25761,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 1
+            },
+            {
+                "tipe_keluhan": "Instalasi / Wiring  tidak berfungsi",
+                "nama_uid": "DISTRIBUSI JAWA BARAT",
+                "total": 1,
+                "total_selesai": 1,
+                "persen_selesai": 100.0,
+                "total_inproses": 0,
+                "persen_inproses": 0.0,
+                "total_durasi_response": 1925,
+                "avg_durasi_response": 1925.0,
+                "min_durasi_response": 1925,
+                "max_durasi_response": 1925,
+                "total_dibawah_sla_response": 0,
+                "total_diatas_sla_response": 1,
+                "total_durasi_recovery": 5959,
+                "avg_durasi_recovery": 5959.0,
+                "min_durasi_recovery": 5959,
+                "max_durasi_recovery": 5959,
+                "total_dibawah_sla_recovery": 0,
+                "total_diatas_sla_recovery": 1
+            },
+            {
+                "tipe_keluhan": "Sudah Bayar Belum Disambung",
+                "nama_uid": "DISTRIBUSI JAWA BARAT",
+                "total": 4,
+                "total_selesai": 3,
+                "persen_selesai": 75.0,
+                "total_inproses": 1,
+                "persen_inproses": 25.0,
+                "total_durasi_response": 6977,
+                "avg_durasi_response": 1744.25,
+                "min_durasi_response": 108,
+                "max_durasi_response": 5649,
+                "total_dibawah_sla_response": 3,
+                "total_diatas_sla_response": 1,
+                "total_durasi_recovery": 36752,
+                "avg_durasi_recovery": 9188.0,
+                "min_durasi_recovery": 1076,
+                "max_durasi_recovery": 16320,
+                "total_dibawah_sla_recovery": 1,
+                "total_diatas_sla_recovery": 3
+            },
+            {
+                "tipe_keluhan": "Umum",
+                "nama_uid": "DISTRIBUSI BALI",
+                "total": 2,
+                "total_selesai": 1,
+                "persen_selesai": 50.0,
+                "total_inproses": 1,
+                "persen_inproses": 50.0,
+                "total_durasi_response": 3497,
+                "avg_durasi_response": 1748.5,
+                "min_durasi_response": 653,
+                "max_durasi_response": 2844,
+                "total_dibawah_sla_response": 1,
+                "total_diatas_sla_response": 1,
+                "total_durasi_recovery": 3796,
+                "avg_durasi_recovery": 1898.0,
+                "min_durasi_recovery": 685,
+                "max_durasi_recovery": 3111,
+                "total_dibawah_sla_recovery": 2,
+                "total_diatas_sla_recovery": 0
+            }
             ],
             rekapitulasiKeluhanPerKelompokKeluhan: [
                 {