diff --git a/Dockerfile b/Dockerfile
index e76055a..a273d9b 100755
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,20 +1,20 @@
 # syntax=docker/dockerfile:1
 # build stage
-FROM node:lts-alpine as builder
-WORKDIR /apkt
-COPY package*.json ./
-RUN npm install && npm install npm-run-all -g
-COPY . .
-RUN npm run build
-# production stage
-FROM nginx:stable-alpine
-COPY --from=builder /apkt/dist /usr/share/nginx/html
-COPY --from=builder /apkt/nginx.conf /etc/nginx/nginx.conf
-EXPOSE 32166
-CMD ["nginx", "-g", "daemon off;"]
-
+# FROM node:lts-alpine as builder
+# WORKDIR /apkt
+# COPY package*.json ./
+# RUN npm install && npm install npm-run-all -g
+# COPY . .
+# RUN npm run build
+# # production stage
 # FROM nginx:stable-alpine
-# COPY /dist /usr/share/nginx/html
-# COPY /nginx.conf /etc/nginx/nginx.conf
+# COPY --from=builder /apkt/dist /usr/share/nginx/html
+# COPY --from=builder /apkt/nginx.conf /etc/nginx/nginx.conf
 # EXPOSE 32166
 # CMD ["nginx", "-g", "daemon off;"]
+
+FROM nginx:stable-alpine
+COPY /dist /usr/share/nginx/html
+COPY /nginx.conf /etc/nginx/nginx.conf
+EXPOSE 32166
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
index e5e2b85..6be39d9 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_ALL.vue
@@ -509,7 +509,7 @@
       <div class="p-4 bg-white rounded-xl lg:mr-4">
         <DxDataGrid
           class="max-h-[calc(100vh-140px)]"
-          :data-source="dummyData.gangguan.rekap.detailGangguan"
+          :data-source="dataSub"
           :show-column-lines="true"
           :show-row-lines="false"
           :show-borders="true"
@@ -550,9 +550,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"
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
index d42873b..831b49e 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_DMAPKT.vue
@@ -1,57 +1,134 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" @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 :width="50" alignment="center" caption="NO" css-class="custom-table-column" rowspan="4" colspan="2">
-        <DxColumn :width="50" alignment="center"
-          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" caption="a"
-          css-class="custom-table-column" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        caption="NO"
+        css-class="custom-table-column"
+        rowspan="4"
+        colspan="2"
+      >
+        <DxColumn
+          :width="50"
+          alignment="center"
+          :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+          caption="a"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Nama Regu" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="regu" caption="b" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="regu"
+          caption="b"
+          css-class="custom-table-column"
+          cell-template="formatText"
+        />
       </DxColumn>
       <DxColumn :width="150" alignment="center" caption="Kode Regu" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="kode_regu" caption="c" css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="kode_regu"
+          caption="c"
+          css-class="custom-table-column"
+          cell-template="formatText"
+        />
       </DxColumn>
 
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="total_laporan" caption="d=(e+g)"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total"
+            caption="d=(e+g)"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" data-field="total_selesai" caption="e"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              data-field="total_selesai"
+              caption="e"
+              css-class="custom-table-column"
+              cell-template="formatNumber"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" data-field="persen_selesai" caption="f=(e/d)*100"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              data-field="persen_selesai"
+              caption="f=(e/d)*100"
+              css-class="custom-table-column"
+              cell-template="formatPercentage"
+            />
           </DxColumn>
         </DxColumn>
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
           <DxColumn alignment="center" caption="Jml" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" data-field="total_belum_selesai" caption="g"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              data-field="total_inproses"
+              caption="g"
+              css-class="custom-table-column"
+              cell-template="formatNumber"
+            />
           </DxColumn>
           <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-            <DxColumn :width="150" alignment="center" data-field="persen_belum_selesai" caption="h=(g/d)*100"
-              css-class="custom-table-column" />
+            <DxColumn
+              :width="150"
+              alignment="center"
+              data-field="persen_inproses"
+              caption="h=(g/d)*100"
+              css-class="custom-table-column"
+              cell-template="formatPercentage"
+            />
           </DxColumn>
         </DxColumn>
       </DxColumn>
@@ -61,23 +138,47 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_nonmarking" caption="i"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="total_mobile_nonmarking"
+                  caption="i"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_nonmarking"
-                  caption="j=(i/d)*100" css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_mobile_nonmarking"
+                  caption="j=(i/d)*100"
+                  css-class="custom-table-column"
+                  cell-template="formatPercentage"
+                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_nonmarking" caption="k"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_response_mobile_nonmarking"
+                  caption="k"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_nonmarking" caption="l"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_mobile_nonmarking"
+                  caption="l"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -85,23 +186,47 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_laporan_mobile_marking" caption="m"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="total_laporan_mobile_marking"
+                  caption="m"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_laporan_mobile_marking"
-                  caption="n=(m/d)*100" css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_mobile_marking"
+                  caption="n=(m/d)*100"
+                  css-class="custom-table-column"
+                  cell-template="formatPercentage"
+                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_mobile_marking" caption="o"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_response_mobile_marking"
+                  caption="o"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_mobile_marking" caption="p"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_mobile_marking"
+                  caption="p"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -111,23 +236,47 @@
           <DxColumn alignment="center" caption="Non Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_nonmarking" caption="q"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="total_laporan_nonmobile_nonmarking"
+                  caption="q"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_nonmarking"
-                  caption="r=(q/d)*100" css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_nonmobile_nonmarking"
+                  caption="r=(q/d)*100"
+                  css-class="custom-table-column"
+                  cell-template="formatPercentage"
+                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_nonmarking"
-                  caption="s" css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_response_nonmobile_nonmarking"
+                  caption="s"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_nonmarking"
-                  caption="t" css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_nonmobile_nonmarking"
+                  caption="t"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
@@ -135,28 +284,82 @@
           <DxColumn alignment="center" caption="Marking" css-class="custom-table-column">
             <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="total_laporan_nonmobile_marking" caption="u"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="total_laporan_nonmobile_marking"
+                  caption="u"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="%" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="persen_laporan_nonmobile_marking"
-                  caption="v=(u/d)*100" css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="persen_laporan_nonmobile_marking"
+                  caption="v=(u/d)*100"
+                  css-class="custom-table-column"
+                  cell-template="formatPercentage"
+                />
               </DxColumn>
             </DxColumn>
 
             <DxColumn alignment="center" caption="Waktu Rata-Rata" css-class="custom-table-column">
               <DxColumn alignment="center" caption="Response" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_response_nonmobile_marking" caption="w"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_response_nonmobile_marking"
+                  caption="w"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
               <DxColumn alignment="center" caption="Recovery" css-class="custom-table-column">
-                <DxColumn :width="150" alignment="center" data-field="avg_waktu_recovery_nonmobile_marking" caption="x"
-                  css-class="custom-table-column" />
+                <DxColumn
+                  :width="150"
+                  alignment="center"
+                  data-field="avg_waktu_recovery_nonmobile_marking"
+                  caption="x"
+                  css-class="custom-table-column"
+                  cell-template="formatNumber"
+                />
               </DxColumn>
             </DxColumn>
           </DxColumn>
         </DxColumn>
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatPercentage="{ data }">
+        <p class="text-right cursor-pointer">
+          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }">
+        <p class="!text-right">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
 </template>
@@ -164,7 +367,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
@@ -184,6 +387,9 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
@@ -261,4 +467,240 @@ const filterData = (params: any) => {
   })
 }
 const filters = ref()
-</script>
\ No newline at end of file
+onMounted(() => {
+  if (import.meta.env.DEV) {
+    data.value = [
+      {
+        id: 0,
+        id_regu: null,
+        nama_regu: null,
+        kode_regu: null,
+        total: 9227,
+        total_selesai: 9227,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: 164,
+        total_mobile_nonmarking: 485,
+        total_nonmobile_marking: 3704,
+        total_nonmobile_nonmarking: 4874,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 37.06306306306306,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: 29.56756756756757,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 52,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 1,
+        id_regu: 38360,
+        nama_regu: 'SINDANGLAUT_52',
+        kode_regu: 'SDLT_52',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 1,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: null,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 34,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 38,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 2,
+        id_regu: 38076,
+        nama_regu: 'SARIO 10.6',
+        kode_regu: 'SARIO 10.6',
+        total: 24,
+        total_selesai: 24,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 18,
+        total_nonmobile_marking: 5,
+        total_nonmobile_nonmarking: 1,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 25.333333333333332,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 31.38888888888889,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 3,
+        id_regu: 16993,
+        nama_regu: 'GEDANGAN 17',
+        kode_regu: 'UNIT 15 PU',
+        total: 9,
+        total_selesai: 9,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 9,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: null,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 41.22222222222222,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 69.88888888888889,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 4,
+        id_regu: 17107,
+        nama_regu: 'MJSRI.ULC1',
+        kode_regu: 'MJSRI.ULC1',
+        total: 36,
+        total_selesai: 36,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: null,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: 36,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: null,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: 8.944444444444445,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: null,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: 19.5
+      },
+      {
+        id: 5,
+        id_regu: 25358,
+        nama_regu: 'INDRAPURA_17',
+        kode_regu: 'IDR17',
+        total: 5,
+        total_selesai: 5,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: 1,
+        total_mobile_nonmarking: 4,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: null,
+        avg_durasi_response_time_mobile_marking: 28,
+        avg_durasi_response_time_mobile_nonmarking: 26.5,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 51.5,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 6,
+        id_regu: 38516,
+        nama_regu: 'BURAEN2',
+        kode_regu: 'BURAEN2',
+        total: 2,
+        total_selesai: 2,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 2,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: null,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 19,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 31.5,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 7,
+        id_regu: 17157,
+        nama_regu: 'SMNP.MS2',
+        kode_regu: 'SMNP.MS2',
+        total: 9,
+        total_selesai: 9,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 8,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: 1,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 20,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: 5,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 38.125,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: 8
+      },
+      {
+        id: 8,
+        id_regu: 26461,
+        nama_regu: 'BJRNEGARA',
+        kode_regu: 'BJRNEGARA',
+        total: 6,
+        total_selesai: 6,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 4,
+        total_nonmobile_marking: 2,
+        total_nonmobile_nonmarking: null,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 24.75,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 38.5,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      },
+      {
+        id: 9,
+        id_regu: 30147,
+        nama_regu: 'TBG SAMBA 11.1',
+        kode_regu: 'TMBG SAMBA',
+        total: 1,
+        total_selesai: 1,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_mobile_marking: null,
+        total_mobile_nonmarking: 1,
+        total_nonmobile_marking: null,
+        total_nonmobile_nonmarking: null,
+        avg_durasi_response_time_mobile_marking: null,
+        avg_durasi_response_time_mobile_nonmarking: 13,
+        avg_durasi_response_time_nonmobile_marking: null,
+        avg_durasi_response_time_nonmobile_nonmarking: null,
+        avg_durasi_recovery_time_mobile_marking: null,
+        avg_durasi_recovery_time_mobile_nonmarking: 41,
+        avg_durasi_recovery_time_nonmobile_marking: null,
+        avg_durasi_recovery_time_nonmobile_nonmarking: null
+      }
+    ]
+  }
+})
+</script>
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index 32a91f0..83946da 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -1,69 +1,538 @@
 <template>
   <Filters @run-search="() => filterData(filters)" :report-button="true" class="mb-4">
-    <Type1 @update:filters="(value) => filters = value" />
+    <Type1 @update:filters="(value) => (filters = value)" />
   </Filters>
   <div id="data">
-    <DxDataGrid class="max-h-[calc(100vh-140px)] mb-10" :data-source="data" :show-column-lines="true"
-      :show-row-lines="false" :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
-      @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting" :allow-column-resizing="true"
-      column-resizing-mode="widget">
+    <DxDataGrid
+      class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
+      :show-column-lines="true"
+      :show-row-lines="false"
+      :show-borders="true"
+      :row-alternation-enabled="true"
+      :hover-state-enabled="true"
+      @selection-changed="onSelectionChanged"
+      :column-width="100"
+      @exporting="onExporting"
+      :allow-column-resizing="true"
+      column-resizing-mode="widget"
+    >
       <DxSelection mode="single" />
       <DxPaging :enabled="false" />
       <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-      <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+      <DxLoadPanel
+        :position="position"
+        :show-indicator="showIndicator"
+        :show-pane="showPane"
+        :shading="shading"
+        v-if="loading"
+        v-model:visible="loading"
+        :enabled="true"
+      />
 
       <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
-      <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
+      <DxExport
+        :enabled="true"
+        :formats="['pdf', 'xlsx', 'document']"
+        :allow-export-selected-data="false"
+      />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
-        caption="NO" data-type="number" css-class="custom-table-column" />
-      <DxColumn :width="150" alignment="center" data-field="" caption="Kode Unit" css-class="custom-table-column" />
-      <DxColumn :width="150" alignment="center" data-field="" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn
+        :width="50"
+        alignment="center"
+        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
+        caption="NO"
+        data-type="number"
+        css-class="custom-table-column"
+        cell-template="formatNumber"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_up3"
+        caption="UP3"
+        css-class="custom-table-column"
+        cell-template="formatText"
+        :group-index="0"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="id_posko"
+        caption="Kode Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
+      <DxColumn
+        :width="150"
+        alignment="center"
+        data-field="nama_posko"
+        caption="Nama Unit"
+        css-class="custom-table-column"
+        cell-template="formatText"
+      />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Total"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total"
+          data-type="number"
+          caption="Total"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
         <DxColumn alignment="center" caption="Belum Selesai" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_inproses"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_inproses"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatPercentage"
+          />
         </DxColumn>
         <DxColumn alignment="center" caption="Sudah Selesai" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_selesai"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="70"
+            alignment="center"
+            data-field="persen_selesai"
+            data-type="number"
+            caption="%"
+            css-class="custom-table-column"
+            cell-template="formatPercentage"
+          />
         </DxColumn>
       </DxColumn>
       <DxColumn alignment="center" caption="Rating" css-class="custom-table-column">
         <DxColumn alignment="center" caption="Bintang" css-class="custom-table-column">
-          <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="1"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="2"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="3"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="4"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="5"
-            css-class="custom-table-column" />
-          <DxColumn :width="120" alignment="center" data-field="" data-type="number" caption="Index"
-            css-class="custom-table-column" />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="total_rating"
+            data-type="number"
+            caption="Jml"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="nilai_rating1"
+            data-type="number"
+            caption="1"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="nilai_rating2"
+            data-type="number"
+            caption="2"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="nilai_rating3"
+            data-type="number"
+            caption="3"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="nilai_rating4"
+            data-type="number"
+            caption="4"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="nilai_rating5"
+            data-type="number"
+            caption="5"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="120"
+            alignment="center"
+            data-field="indeks_rating"
+            data-type="number"
+            caption="Index"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
         </DxColumn>
       </DxColumn>
 
       <DxColumn alignment="center" caption="Non Rating" css-class="custom-table-column">
-        <DxColumn :width="150" alignment="center" data-field="" data-type="number" caption="Jml"
-          css-class="custom-table-column" />
-        <DxColumn :width="70" alignment="center" data-field="" data-type="number" caption="%"
-          css-class="custom-table-column" />
+        <DxColumn
+          :width="150"
+          alignment="center"
+          data-field="total_nonrating"
+          data-type="number"
+          caption="Jml"
+          css-class="custom-table-column"
+          cell-template="formatNumber"
+        />
+        <DxColumn
+          :width="70"
+          alignment="center"
+          data-field="persen_nonrating"
+          data-type="number"
+          caption="%"
+          css-class="custom-table-column"
+          cell-template="formatPercentage"
+        />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left cursor-pointer" @click="showData()">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatPercentage="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right cursor-pointer" @click="showData()">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatTime="{ data }">
+        <p class="!text-right cursor-pointer">
+          {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
+
+  <DetailDialog
+    :open="showDetail"
+    title="Detail Rating Per Posko"
+    @on-close="closeDetail"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExporting"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="5" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[5, 10, 20]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+          <DxLoadPanel
+            :position="position"
+            :show-indicator="showIndicator"
+            :show-pane="showPane"
+            :shading="shading"
+            v-model:visible="loadingSubData"
+            :enabled="true"
+          />
+          <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
+          <DxExport
+            :enabled="true"
+            :formats="['pdf', 'xlsx', 'document']"
+            :allow-export-selected-data="false"
+          />
+
+          <DxColumn
+            css-class="custom-table-column"
+            :width="50"
+            alignment="center"
+            :calculateCellValue="(item: any) => dataSub.findIndex((i) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Rating"
+            css-class="custom-table-column"
+            cell-template="formatRating"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tgl Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Tlp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Posko"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Tindakan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+
+          <template #formatText="{ data }">
+            <p class="text-left cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatNumber="{ data }">
+            <p class="text-right cursor-pointer">
+              {{ data.text }}
+            </p>
+          </template>
+
+          <template #formatTime="{ data }">
+            <p>
+              {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
+            </p>
+          </template>
+        </DxDataGrid>
+      </div>
+    </div>
+    <div class="w-full mb-4 lg:w-[30%] lg:float-right">
+      <div class="p-4 space-y-2 bg-white rounded-xl">
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Rating:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Lapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Datang:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl Nyala:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking:</h3>
+          <InputText :readonly="true" class-name="flex-1" value="" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Posko:</h3>
+          <InputText :readonly="true" type="textarea" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
+          <InputText :readonly="true" value="" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -75,12 +544,13 @@ import {
   DxColumnFixing,
   DxExport,
   DxLoadPanel,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { jsPDF } from 'jspdf'
 import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
 import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
@@ -88,10 +558,29 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
 import { queries } from '@/utils/api/api.graphql'
+import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
+import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
+
 const position = { of: '#data' }
 const showIndicator = ref(true)
 const shading = ref(true)
 const showPane = ref(true)
+const loading = ref(false)
+const loadingSubData = ref(false)
+const data = ref<any[]>([])
+const dataSub = ref<any[]>([])
+const dataSelected = ref()
+const dataSubSelected = ref()
+const showDetail = ref(false)
+const showData = () => {
+  showDetail.value = true
+}
+const closeDetail = () => {
+  showDetail.value = false
+}
+
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -121,56 +610,35 @@ const onExporting = (e: any) => {
   }
 }
 
-const createDummy = () => {
-  for (let i = 0; i < 100; i++) {
-    data.value.push({
-      id: i,
-      nama_unit: '-',
-      total: 0,
-      selesai: '-',
-      in_progress: 0,
-      avg: 0,
-      max: 0,
-      min: 0,
-      dt_avg: 0,
-      dt_max: 0,
-      dt_min: 0,
-      dt_more_sla: 0,
-      dt_less_sla: 0,
-      rt_avg: 0,
-      rt_max: 0,
-      rt_min: 0,
-      rt_more_sla: 0,
-      rt_less_sla: 0,
-      ret_avg: 0,
-      ret_max: 0,
-      ret_min: 0,
-      ret_more_sla: 0,
-      ret_less_sla: 0
-    })
-  }
-}
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+  dataSelected.value = selectedRowsData[0]
   console.log(data)
 }
 
-const data = ref<any[]>([])
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  dataSubSelected.value = selectedRowsData[0]
+  console.log(dataSubSelected)
+}
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.rekap.gangguanRatingPerPosko,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    queries.gangguan.rekap.gangguanRatingPerPosko,
+    {
+      dateFrom: dateValue[0]
+        ? dateValue[0].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      dateTo: dateValue[1]
+        ? dateValue[1].split('-').reverse().join('-')
+        : new Date().toISOString().slice(0, 10),
+      posko: posko.id,
+      idUid: uid.id,
+      idUp3: up3.id
+    }
+  )
+
   refetch({
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -193,6 +661,420 @@ const filterData = (params: any) => {
   onError((error) => {
     console.log(error)
   })
+  watch(loading, (value) => {
+    loading.value = value
+  })
 }
 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: '',
+        id_posko: 0,
+        nama_posko: '',
+        total: 3169,
+        total_selesai: 3169,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 194,
+        persen_rating: 6.121804985799937,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 194,
+        indeks_rating: 1,
+        total_nonrating: 2975,
+        persen_nonrating: 93.87819501420006
+      },
+      {
+        id: 1,
+        nama_regional: 'REGIONAL SULMAPANA',
+        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',
+        total: 34,
+        total_selesai: 34,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 6,
+        persen_rating: 17.647058823529413,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 6,
+        indeks_rating: 1,
+        total_nonrating: 28,
+        persen_nonrating: 82.35294117647058
+      },
+      {
+        id: 2,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 31,
+        nama_uid: 'WILAYAH SULAWESI UTARA,TENGAH DAN GORONTALO',
+        id_up3: 31600,
+        nama_up3: 'UP3 GORONTALO',
+        id_ulp: 31620,
+        nama_ulp: 'ULP MARISA',
+        id_posko: 316201,
+        nama_posko: 'POSKO ULP MARISA',
+        total: 19,
+        total_selesai: 19,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 15,
+        persen_rating: 78.94736842105263,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 15,
+        indeks_rating: 1,
+        total_nonrating: 4,
+        persen_nonrating: 21.052631578947366
+      },
+      {
+        id: 3,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 430,
+        nama_uid: 'WILAYAH NUSA TENGGARA TIMUR',
+        id_up3: 433,
+        nama_up3: 'UP3 SUMBA',
+        id_ulp: 43380,
+        nama_ulp: 'ULP SUMBA BARAT DAYA',
+        id_posko: 433801,
+        nama_posko: 'POSKO ULP SUMBA BARAT DAYA',
+        total: 62,
+        total_selesai: 62,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 18,
+        persen_rating: 29.03225806451613,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 18,
+        indeks_rating: 1,
+        total_nonrating: 44,
+        persen_nonrating: 70.96774193548387
+      },
+      {
+        id: 4,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 103,
+        nama_uid: 'DISTRIBUSI JAWA TIMUR',
+        id_up3: 149,
+        nama_up3: 'UP3 MOJOKERTO',
+        id_ulp: 51460,
+        nama_ulp: 'ULP NGANJUK',
+        id_posko: 514603,
+        nama_posko: 'POSKO ULP NGANJUK',
+        total: 183,
+        total_selesai: 183,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 47,
+        persen_rating: 25.683060109289617,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 1,
+        nilai_rating4: 0,
+        nilai_rating5: 46,
+        indeks_rating: 1.978723404255319,
+        total_nonrating: 136,
+        persen_nonrating: 74.31693989071039
+      },
+      {
+        id: 5,
+        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',
+        id_posko: 532931,
+        nama_posko: 'POSKO ULP LELES',
+        total: 36,
+        total_selesai: 36,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 7,
+        persen_rating: 19.444444444444446,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 7,
+        indeks_rating: 1,
+        total_nonrating: 29,
+        persen_nonrating: 80.55555555555556
+      },
+      {
+        id: 6,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 2,
+        nama_uid: 'DISTRIBUSI JAKARTA RAYA',
+        id_up3: 9,
+        nama_up3: 'UP3 CIPUTAT',
+        id_ulp: 54360,
+        nama_ulp: 'UP3 CIPUTAT',
+        id_posko: 543601,
+        nama_posko: 'POSKO CIPUTAT',
+        total: 207,
+        total_selesai: 207,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 57,
+        persen_rating: 27.536231884057973,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 57,
+        indeks_rating: 1,
+        total_nonrating: 150,
+        persen_nonrating: 72.46376811594203
+      },
+      {
+        id: 7,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 32,
+        nama_uid: 'WILAYAH SULAWESI SELATAN, TENGGARA DAN BARAT',
+        id_up3: 32700,
+        nama_up3: 'UP3 BULUKUMBA',
+        id_ulp: 32760,
+        nama_ulp: 'ULP SINJAI',
+        id_posko: 327601,
+        nama_posko: 'POSKO ULP SINJAI',
+        total: 26,
+        total_selesai: 26,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 1,
+        persen_rating: 3.8461538461538463,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 1,
+        indeks_rating: 1,
+        total_nonrating: 25,
+        persen_nonrating: 96.15384615384616
+      },
+      {
+        id: 8,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 140,
+        nama_uid: 'WILAYAH SUMATERA SELATAN, JAMBI & BENGKULU (S2JB)',
+        id_up3: 1403,
+        nama_up3: 'UP3 BENGKULU',
+        id_ulp: 14630,
+        nama_ulp: 'ULP MUARA AMAN',
+        id_posko: 146301,
+        nama_posko: 'POSKO ULP MUARA AMAN',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 1,
+        persen_rating: 33.33333333333333,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 1,
+        indeks_rating: 1,
+        total_nonrating: 2,
+        persen_nonrating: 66.66666666666666
+      },
+      {
+        id: 9,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 56,
+        nama_uid: 'DISTRIBUSI BANTEN',
+        id_up3: 534,
+        nama_up3: 'UP3 BANTEN UTARA',
+        id_ulp: 56120,
+        nama_ulp: 'ULP CILEGON',
+        id_posko: 561201,
+        nama_posko: 'POSKO ULP CILEGON',
+        total: 55,
+        total_selesai: 55,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 14,
+        persen_rating: 25.454545454545453,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 14,
+        indeks_rating: 1,
+        total_nonrating: 41,
+        persen_nonrating: 74.54545454545455
+      },
+      {
+        id: 10,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 110,
+        nama_uid: 'WILAYAH ACEH',
+        id_up3: 114,
+        nama_up3: 'UP3 MEULABOH',
+        id_ulp: 11443,
+        nama_ulp: 'ULP SINABANG',
+        id_posko: 114431,
+        nama_posko: 'POSKO ULP SINABANG',
+        total: 9,
+        total_selesai: 9,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 4,
+        persen_rating: 44.44444444444444,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 4,
+        indeks_rating: 1,
+        total_nonrating: 5,
+        persen_nonrating: 55.55555555555556
+      },
+      {
+        id: 11,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 287,
+        nama_uid: 'DISTRIBUSI BALI',
+        id_up3: 329,
+        nama_up3: 'UP3 BALI UTARA',
+        id_ulp: 55320,
+        nama_ulp: 'ULP SERIRIT',
+        id_posko: 553202,
+        nama_posko: 'POSKO ULP SERIRIT',
+        total: 19,
+        total_selesai: 19,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 5,
+        persen_rating: 26.31578947368421,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 5,
+        indeks_rating: 1,
+        total_nonrating: 14,
+        persen_nonrating: 73.68421052631578
+      },
+      {
+        id: 12,
+        nama_regional: 'REGIONAL SUMKAL',
+        id_uid: 120,
+        nama_uid: 'WILAYAH SUMATERA UTARA',
+        id_up3: 12500,
+        nama_up3: 'UP3 RANTAU PRAPAT',
+        id_ulp: 12516,
+        nama_ulp: 'ULP SIMPANG KAWAT',
+        id_posko: 125161,
+        nama_posko: 'POSKO ULP SIMPANG KAWAT',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: null,
+        persen_rating: null,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 0,
+        indeks_rating: null,
+        total_nonrating: null,
+        persen_nonrating: null
+      },
+      {
+        id: 13,
+        nama_regional: 'REGIONAL SULMAPANA',
+        id_uid: 430,
+        nama_uid: 'WILAYAH NUSA TENGGARA TIMUR',
+        id_up3: 437,
+        nama_up3: 'UP3 FLORES BAGIAN BARAT',
+        id_ulp: 43760,
+        nama_ulp: 'ULP LABUAN BAJO',
+        id_posko: 437601,
+        nama_posko: 'POSKO ULP LABUAN BAJO',
+        total: 3,
+        total_selesai: 3,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 2,
+        persen_rating: 66.66666666666666,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 2,
+        indeks_rating: 1,
+        total_nonrating: 1,
+        persen_nonrating: 33.33333333333333
+      },
+      {
+        id: 14,
+        nama_regional: 'REGIONAL JMB',
+        id_uid: 101,
+        nama_uid: 'DISTRIBUSI JAWA TENGAH & DIY',
+        id_up3: 52300,
+        nama_up3: 'UP3 SEMARANG',
+        id_ulp: 52310,
+        nama_ulp: 'ULP BOJA',
+        id_posko: 523101,
+        nama_posko: 'POSKO ULP BOJA',
+        total: 17,
+        total_selesai: 17,
+        persen_selesai: 100,
+        total_inproses: 0,
+        persen_inproses: 0,
+        total_rating: 16,
+        persen_rating: 94.11764705882352,
+        nilai_rating1: 0,
+        nilai_rating2: 0,
+        nilai_rating3: 0,
+        nilai_rating4: 0,
+        nilai_rating5: 16,
+        indeks_rating: 1,
+        total_nonrating: 1,
+        persen_nonrating: 5.88235294117647
+      }
+    ]
+  }
+})
+</script>
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index aa9ca71..885a054 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -628,23 +628,31 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            in_process
-            indeks_rating
-            jumlah_non_rating
-            jumlah_rating
+            id
+            nama_regional
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
             nama_posko
-            persen_in_process
-            persen_non_rating
-            persen_rating
-            persen_selesai
-            rating_1
-            rating_2
-            rating_3
-            rating_4
-            rating_5
-            regu
-            selesai
             total
+            total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_rating
+            persen_rating
+            nilai_rating1
+            nilai_rating2
+            nilai_rating3
+            nilai_rating4
+            nilai_rating5
+            indeks_rating
+            total_nonrating
+            persen_nonrating
           }
         }
       `,
@@ -885,29 +893,27 @@ export const queries = {
             idUid: $idUid
             idUp3: $idUp3
           ) {
-            avg_waktu_recovery_mobile_marking
-            avg_waktu_recovery_mobile_nonmarking
-            avg_waktu_recovery_nonmobile_marking
-            avg_waktu_recovery_nonmobile_nonmarking
-            avg_waktu_response_mobile_marking
-            avg_waktu_response_mobile_nonmarking
-            avg_waktu_response_nonmobile_marking
-            avg_waktu_response_nonmobile_nonmarking
+            id
+            id_regu
+            nama_regu
             kode_regu
-            persen_belum_selesai
-            persen_laporan_mobile_marking
-            persen_laporan_mobile_nonmarking
-            persen_laporan_nonmobile_marking
-            persen_laporan_nonmobile_nonmarking
-            persen_selesai
-            regu
-            total_belum_selesai
-            total_laporan
-            total_laporan_mobile_marking
-            total_laporan_mobile_nonmarking
-            total_laporan_nonmobile_marking
-            total_laporan_nonmobile_nonmarking
+            total
             total_selesai
+            persen_selesai
+            total_inproses
+            persen_inproses
+            total_mobile_marking
+            total_mobile_nonmarking
+            total_nonmobile_marking
+            total_nonmobile_nonmarking
+            avg_durasi_response_time_mobile_marking
+            avg_durasi_response_time_mobile_nonmarking
+            avg_durasi_response_time_nonmobile_marking
+            avg_durasi_response_time_nonmobile_nonmarking
+            avg_durasi_recovery_time_mobile_marking
+            avg_durasi_recovery_time_mobile_nonmarking
+            avg_durasi_recovery_time_nonmobile_marking
+            avg_durasi_recovery_time_nonmobile_nonmarking
           }
         }
       `,