diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index cc7083c..5036b84 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -12,12 +12,20 @@
 
   <Anomali_LAPPGP_LPT
     :data="data"
-    :loading="loadingData"
     :filters="filters"
     @update:data-sub="dataSub = $event"
     @update:loading-sub-data="loadingSubData = $event"
+    @update:marking="marking = $event"
   />
-  <Anomali_LAPPGP_LPP :data="dataSub" :filters="filters" />
+
+  <Anomali_LAPPGP_LPP
+    :data="dataSub"
+    :filters="filters"
+    :marking="marking"
+    @update:loading-sub-data="loadingSubData = $event"
+  />
+
+  <BufferDialog v-if="loadingData || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -29,6 +37,7 @@ import Filters from '@/components/Form/Filters.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
@@ -37,6 +46,7 @@ const dataSub = ref<any[]>([])
 const dialogDetail = ref(false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const marking = ref<any>(0)
 const filters = ref({
   jenisLaporan: {
     id: 1,
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
index 04806da..fb0bdf9 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPP.vue
@@ -1,7 +1,4 @@
 <template>
-  <div class="mt-4 lg:mt-6 max-w-7xl">
-    <h1 class="text-xl font-medium md:text-2xl text-dark">Laporan Pengaduan PLN Mobile</h1>
-  </div>
   <DxDataGrid
     ref="dataGridRef"
     :allow-column-reordering="true"
@@ -71,7 +68,7 @@
     <DxColumn
       :width="170"
       alignment="center"
-      data-field=""
+      data-field="nama_petugas"
       caption="Nama Petugas"
       css-class="custom-table-column"
       cell-template="formatText"
@@ -85,11 +82,11 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field=""
+          data-field="wo_total"
           data-type="number"
           caption="a"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberTotalWo"
         />
       </DxColumn>
     </DxColumn>
@@ -102,33 +99,33 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="anomali_pln_mobile_marking"
+          data-field="wo_pln_mobile"
           data-type="number"
           caption="b"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberPLNMobile"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="CC 123" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="anomali_cc123_marking"
+          data-field="wo_cc123"
           data-type="number"
           caption="c"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberCC"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="total_anomali_marking"
           data-type="number"
           caption="d=b+c"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberTotal"
+          :calculate-display-value="(rowData: any) => rowData.wo_pln_mobile + rowData.wo_cc123"
         />
       </DxColumn>
     </DxColumn>
@@ -141,7 +138,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_pln_mobile_marking"
+          data-field="persen_anomali_pln_mobile"
           data-type="number"
           caption="e=b/a"
           css-class="custom-table-column"
@@ -152,7 +149,7 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_cc123_marking"
+          data-field="persen_anomali_cc123"
           data-type="number"
           caption="f=c/a"
           css-class="custom-table-column"
@@ -163,17 +160,102 @@
         <DxColumn
           :width="150"
           alignment="center"
-          data-field="persen_anomali_marking"
           data-type="number"
           caption="g=e+f"
           css-class="custom-table-column"
           cell-template="formatPercentage"
+          :calculate-display-value="
+            (rowData: any) => rowData.persen_anomali_pln_mobile + rowData.persen_anomali_cc123
+          "
         />
       </DxColumn>
     </DxColumn>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalWo="{ data }">
+      <p
+        class="text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberPLNMobile="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 1
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCC="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 2
+          })
+        "
+      >
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotal="{ data }">
+      <p
+        class="text-right cursor-pointer"
+        @click="
+          setParameterRequest({
+            media: 0
+          })
+        "
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -185,23 +267,576 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer">
+      <p
+        class="text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer">
+      <p
+        class="text-left"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right">
+      <p
+        class="!text-right"
+        @click="
+          setParameterRequest({
+            media: null
+          })
+        "
+      >
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
   </DxDataGrid>
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Daftar Detail Anomali Penanganan Pengaduan Berulang Petugas"
+    @on-close="closedialogDetail"
+    :full-width="true"
+  >
+    <div class="w-full mb-4 lg:w-[70%] lg:float-left">
+      <div class="p-4 bg-white rounded-xl lg:mr-4">
+        <DxDataGrid
+          :allow-column-reordering="true"
+          class="max-h-[calc(100vh-140px)]"
+          :data-source="dataSub"
+          :show-column-lines="true"
+          :show-row-lines="false"
+          :show-borders="true"
+          :row-alternation-enabled="true"
+          :hover-state-enabled="true"
+          @selection-changed="onDataSubSelectionChanged"
+          :column-width="100"
+          @exporting="onExportingDetail"
+          :allow-column-resizing="true"
+          column-resizing-mode="widget"
+        >
+          <DxSelection mode="single" />
+          <DxPaging :page-size="20" :enabled="true" />
+          <DxPager
+            :visible="true"
+            :allowed-page-sizes="[20, 50, 100]"
+            display-mode="full"
+            :show-page-size-selector="true"
+            :show-info="true"
+            :show-navigation-buttons="true"
+          />
+
+          <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"
+            :calculate-display-value="(item: any) => dataSub.findIndex((i: any) => i == item) + 1"
+            data-type="number"
+            caption="No"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_uid"
+            caption="UIW/D"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_up3"
+            caption="UP3"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_ulp"
+            caption="Rayon"
+            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="no_laporan"
+            caption="No Laporan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="No Laporan Referensi"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
+            caption="Tgl/Jam Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_response"
+            caption="Tgl/Jam Datang"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_recovery"
+            caption="Tgl/Jam Nyala"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_response_time"
+            caption="Durasi Response Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_recovery_time"
+            caption="Durasi Recovery Time"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_dispatch_time"
+            caption="Durasi Penugasan Regu"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="durasi_perjalanan"
+            caption="Durasi Perjalanan Regu"
+            css-class="custom-table-column"
+            cell-template="formatTime"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="distance"
+            caption="Jarak Closing (m)"
+            css-class="custom-table-column"
+            cell-template="formatNumber"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="dispatch_by"
+            caption="Dispacth Oleh"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="idpel_nometer"
+            caption="IDPEL/NO METER"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="nama_pelapor"
+            caption="Nama Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="alamat_pelapor"
+            caption="Alamat Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="no_telp_pelapor"
+            caption="No Telp Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="keterangan_pelapor"
+            caption="Keterangan Pelapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="media"
+            caption="Sumber Lapor"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="diselesaikan_oleh"
+            caption="Diselesaikan Oleh"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="status_akhir"
+            caption="Status"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Status Induk"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="referensi_marking"
+            caption="Referensi Marking"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field=""
+            caption="Referensi Marking Induk"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="kode_gangguan"
+            caption="Kode Gangguan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="jenis_gangguan"
+            caption="Jenis Gangguan"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="penyebab"
+            caption="Penyebab"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="tindakan"
+            caption="Tindakan"
+            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">UIW/D:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" 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="dataSubSelected?.nama_up3" 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">Rayon:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" 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">No Laporan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Laporan Referensi:</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/Jam Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Datang:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_response"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tgl/Jam Nyala:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.waktu_recovery"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Response Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_response_time)
+                ? formatWaktu(dataSubSelected?.durasi_response_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Recovery Time:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_recovery_time)
+                ? formatWaktu(dataSubSelected?.durasi_recovery_time)
+                : '-'
+            "
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Penugasan Regu:</h3>
+          <InputText
+            :readonly="true"
+            class-name="flex-1"
+            :value="
+              parseInt(dataSubSelected?.durasi_dispatch_time)
+                ? formatWaktu(dataSubSelected?.durasi_dispatch_time)
+                : '-'
+            "
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Durasi Perjalanan Regu:</h3>
+          <InputText
+            :readonly="true"
+            :value="
+              parseInt(dataSubSelected?.durasi_perjalanan)
+                ? formatWaktu(dataSubSelected?.durasi_perjalanan)
+                : '-'
+            "
+            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">Jarak Closing (m):</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.distance" 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">Dispatch Oleh:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.dispatch_by" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">IDPEL/NO METER:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.idpel_nometer" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama Pelapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">No Telp Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Keterangan Pelapor:</h3>
+          <InputText
+            :readonly="true"
+            type="textarea"
+            :value="dataSubSelected?.keterangan_pelapor"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.media" 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">Diselesaikan Oleh:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.diselesaikan_oleh"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.status_akhir" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Status Induk:</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="dataSubSelected?.referensi_marking"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Referensi Marking Induk:</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="dataSubSelected?.kode_gangguan" 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="dataSubSelected?.jenis_gangguan"
+            class-name="flex-1"
+          />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Penyebab:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.penyebab" class-name="flex-1" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between w-full">
+          <h3 class="text-sm font-medium w-[135px] text-gray-800">Tindakan:</h3>
+          <InputText :readonly="true" :value="dataSubSelected?.tindakan" class-name="flex-1" />
+        </div>
+      </div>
+    </div>
+  </DetailDialog>
 </template>
 
 <script setup lang="ts">
@@ -211,6 +846,7 @@ import {
   DxColumnFixing,
   DxExport,
   DxGrouping,
+  DxPager,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
@@ -220,28 +856,111 @@ import { computed, ref } from 'vue'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPP'
-
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
+import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
+import InputText from '@/components/InputText.vue'
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any
+  filters: Object as () => any,
+  marking: {
+    type: Number,
+    default: 0
+  }
 })
+const filters = computed(() => props.filters)
+const emit = defineEmits(['update:loadingSubData'])
 const data = computed(() => props.data)
-const dataSub = ref([])
-const dataSelected = ref({})
-const dataSubSelected = ref({})
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>(null)
+const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
+const loadingSubData = ref(false)
+const agreeToShowDialog = ref(false)
+const parameterRequest = ref<any>({
+  media: null
+})
+const closedialogDetail = () => (dialogDetail.value = false)
+
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  dataSub.value = []
+  dataSubSelected.value = null
+}
+
+const getDetail = async () => {
+  resetData()
+  const { jenisLaporan } = filters.value
+
+  const selected = dataSelected.value
+  const query = {
+    idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    idUid: selected?.id_uid ? selected?.id_uid : 0,
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: parameterRequest.value?.media,
+    isMarking: props.marking,
+    idPetugas: selected?.id_petugas ? selected?.id_petugas : 0
+  }
+
+  loadingSubData.value = true
+  emit('update:loadingSubData', loadingSubData.value)
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.petugasBerulangDetailSub
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.petugasRatingNegatifDetailSub
+        : queries.anomali.gangguan.petugasSkipStepDetailSub,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
+        } else {
+          dataSub.value =
+            result.data.data.subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep
+        }
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+      dialogDetail.value = true
+      emit('update:loadingSubData', loadingSubData.value)
+    })
+}
+
 const dataGridRef = ref<DxDataGrid | null>(null)
 const reportMeta = ref<any>(computed(() => props.filters))
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
-  dialogDetail.value = true
-}
-const closeDialog = () => {
-  dialogDetail.value = false
+  dataSub.value = []
+  dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
+    getDetail()
+  }
 }
 
 const onExporting = (e: any) => {
@@ -256,7 +975,14 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
+}
+
+const onExportingDetail = (e: any) => {}
+
+const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
+  const data = selectedRowsData[0]
+  dataSubSelected.value = data
 }
 </script>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index b785dc6..ffe17e9 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -227,7 +227,10 @@
     </DxColumn>
 
     <template #formatNumberPLNMobileMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -239,7 +242,10 @@
     </template>
 
     <template #formatNumberPLNMobileNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -251,7 +257,10 @@
     </template>
 
     <template #formatNumberCCMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -263,7 +272,10 @@
     </template>
 
     <template #formatNumberCCNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -275,7 +287,7 @@
     </template>
 
     <template #formatNumberTotalMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -287,7 +299,7 @@
     </template>
 
     <template #formatNumberTotalNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -299,7 +311,10 @@
     </template>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -311,19 +326,25 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-left cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right" @click="setParameterRequest(null, null)">
+      <p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -436,7 +457,18 @@
     </DxSummary>
   </DxDataGrid>
 
-  <BufferDialog v-if="loading" />
+  <div class="mt-4 lg:mt-6 max-w-7xl">
+    <h1 class="text-xl font-medium md:text-2xl text-dark">
+      Laporan Pengaduan {{ parameterRequest.media != null ? parameterRequest.media : '' }}
+      {{
+        parameterRequest.marking != null
+          ? parameterRequest.marking == 1
+            ? 'Marking'
+            : 'Non Marking'
+          : ''
+      }}
+    </h1>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -459,7 +491,6 @@ import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX } from '@/report/Anomali/Gangguan/Anomali_LAPPGP_LPT'
-import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -467,32 +498,28 @@ const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any,
-  loading: {
-    type: Boolean,
-    default: false
-  }
+  filters: Object as () => any
 })
+const emit = defineEmits(['update:dataSub', 'update:loadingSubData', 'update:marking'])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
 const dataSelected = ref<any>(null)
 const dataSubSelected = ref<any>(null)
 const dialogDetail = ref(false)
-const loadingData = ref(computed(() => props.loading))
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
-const mediaSelected = ref<any>(null)
-const markingSelected = ref<any>(null)
 const reportMeta = ref<any>(computed(() => props.filters))
+const parameterRequest = ref<any>({
+  media: null,
+  marking: null
+})
 
-const emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
-
-const setParameterRequest = (media: any, marking: any) => {
-  mediaSelected.value = media
-  markingSelected.value = marking
-
-  if (media != null && marking != null) {
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null && parameter.marking != null) {
+    emit('update:marking', parameter.marking)
     agreeToShowDialog.value = true
   } else {
     agreeToShowDialog.value = false
@@ -506,27 +533,16 @@ const resetData = () => {
 
 const getDetail = async () => {
   resetData()
-  const { ulp, uid, up3, jenisLaporan, periode } = filters.value
-  console.table('LAPPGU', jenisLaporan)
-  console.log('Media', mediaSelected.value)
-  console.log('isMarking', markingSelected.value)
-  console.log('periode', periode)
+  const { jenisLaporan } = filters.value
 
-  const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
   const query = {
-    // dateFrom: dateValue[0]
-    //   ? dateValue[0].split('-').reverse().join('-')
-    //   : new Date().toISOString().slice(0, 10),
-    // dateTo: dateValue[1]
-    //   ? dateValue[1].split('-').reverse().join('-')
-    //   : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
-    namaRegional: '',
-    media: mediaSelected.value,
-    isMarking: markingSelected.value
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    media: parameterRequest.value?.media,
+    isMarking: parameterRequest.value?.marking
   }
 
   loadingSubData.value = true
@@ -542,11 +558,12 @@ const getDetail = async () => {
     .then((result) => {
       if (result.data.data != undefined) {
         if (jenisLaporan.name == 'Laporan Berulang Unit') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasBerulang
         } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
+          dataSub.value =
+            result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif
         } else {
-          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanPetugasSkipStep
         }
       } else {
         dataSub.value = []
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index c663d70..c9854c0 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -10,8 +10,14 @@
     />
   </Filters>
 
-  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" :filters="filters" />
+  <Anomali_LAPPGU_LPT
+    :data="data"
+    :filters="filters"
+    @update:loading-sub-data="loadingData = $event"
+  />
   <Anomali_LAPPGU_LPP :data="dataSecond" :filters="filters" />
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -23,6 +29,7 @@ import { onMounted, ref, watch } from 'vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { apolloClient } from '@/utils/api/api.graphql'
 import { provideApolloClient } from '@vue/apollo-composable'
+import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const client = apolloClient()
 provideApolloClient(client)
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index 92ff148..424f49c 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -277,7 +277,10 @@
     </DxColumn>
 
     <template #formatNumberPLNMobileMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -289,7 +292,10 @@
     </template>
 
     <template #formatNumberPLNMobileNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'PLN Mobile', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -301,7 +307,10 @@
     </template>
 
     <template #formatNumberCCMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 1 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -313,7 +322,10 @@
     </template>
 
     <template #formatNumberCCNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: 'Call PLN 123', marking: 2 })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -325,7 +337,7 @@
     </template>
 
     <template #formatNumberTotalMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 1 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -337,7 +349,7 @@
     </template>
 
     <template #formatNumberTotalNonMarking="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+      <p class="text-right cursor-pointer" @click="setParameterRequest({ media: '', marking: 2 })">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -349,7 +361,10 @@
     </template>
 
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -361,19 +376,25 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-right cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
+      <p
+        class="text-left cursor-pointer"
+        @click="setParameterRequest({ media: null, marking: null })"
+      >
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right" @click="setParameterRequest(null, null)">
+      <p class="!text-right" @click="setParameterRequest({ media: null, marking: null })">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -788,7 +809,7 @@
             :width="150"
             alignment="center"
             data-field="tindakan"
-            caption="Tindaan"
+            caption="Tindakan"
             css-class="custom-table-column"
             cell-template="formatText"
           />
@@ -1022,8 +1043,6 @@
       </div>
     </div>
   </DetailDialog>
-
-  <BufferDialog v-if="loading || loadingSubData" />
 </template>
 
 <script setup lang="ts">
@@ -1053,17 +1072,13 @@ import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
-const loading = ref(computed(() => props.loading))
 const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
-  filters: Object as () => any,
-  loading: {
-    type: Boolean,
-    default: false
-  }
+  filters: Object as () => any
 })
+const emit = defineEmits(['update:loadingSubData'])
 const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
@@ -1074,15 +1089,16 @@ const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const agreeToShowDialog = ref(false)
-const mediaSelected = ref<any>(null)
-const markingSelected = ref<any>(null)
 const reportMeta = ref<any>(computed(() => props.filters))
+const parameterRequest = ref<any>({
+  media: null,
+  marking: null
+})
 
-const setParameterRequest = (media: any, marking: any) => {
-  mediaSelected.value = media
-  markingSelected.value = marking
-
-  if (media != null && marking != null) {
+const setParameterRequest = (data: any) => {
+  parameterRequest.value = data
+  const parameter = parameterRequest.value
+  if (parameter.media != null && parameter.marking != null) {
     agreeToShowDialog.value = true
   } else {
     agreeToShowDialog.value = false
@@ -1096,11 +1112,7 @@ const resetData = () => {
 
 const getDetail = async () => {
   resetData()
-  const { ulp, uid, up3, jenisLaporan, periode } = filters.value
-  console.table('LAPPGU', jenisLaporan)
-  console.log('Media', mediaSelected.value)
-  console.log('isMarking', markingSelected.value)
-  console.log('periode', periode)
+  const { jenisLaporan, periode } = filters.value
 
   const dateValue = periode.split(' s/d ')
   const selected = dataSelected.value
@@ -1115,11 +1127,12 @@ const getDetail = async () => {
     idUid: selected?.id_uid ? selected?.id_uid : 0,
     idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
     namaRegional: '',
-    media: mediaSelected.value,
-    isMarking: markingSelected.value
+    media: parameterRequest.value?.media,
+    isMarking: parameterRequest.value?.marking
   }
 
   loadingSubData.value = true
+  emit('update:loadingSubData', true)
   await requestGraphQl(
     jenisLaporan.name == 'Laporan Berulang Unit'
       ? queries.anomali.gangguan.unitBerulangDetail
@@ -1147,6 +1160,7 @@ const getDetail = async () => {
     .finally(() => {
       loadingSubData.value = false
       dialogDetail.value = true
+      emit('update:loadingSubData', false)
     })
 }
 
diff --git a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
index 700f12b..c5f6199 100755
--- a/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
+++ b/src/components/Pages/Ctt/CTT_LaporanCttKwhPeriksa.vue
@@ -73,7 +73,7 @@
             data-type="number"
             caption="a"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoCC"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="PLN Mobile" css-class="custom-table-column">
@@ -84,7 +84,7 @@
             data-type="number"
             caption="b"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoPLMMobile"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="COMCEN" css-class="custom-table-column">
@@ -95,7 +95,7 @@
             data-type="number"
             caption="c"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoComcen"
           />
         </DxColumn>
         <DxColumn alignment="center" caption="Total" css-class="custom-table-column">
@@ -106,7 +106,7 @@
             data-type="number"
             caption="d=a+b+c"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberWoTotal"
           />
         </DxColumn>
       </DxColumn>
@@ -119,7 +119,7 @@
             data-type="number"
             caption="e"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRekomendasi1"
           />
         </DxColumn>
         <DxColumn
@@ -134,7 +134,7 @@
             data-type="number"
             caption="f"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberRekomendasi2"
           />
         </DxColumn>
       </DxColumn>
@@ -146,7 +146,7 @@
           data-type="number"
           caption="g"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberDlpd"
         />
       </DxColumn>
       <DxColumn alignment="center" caption="Histori P2TL" css-class="custom-table-column">
@@ -157,7 +157,7 @@
           data-type="number"
           caption="h"
           css-class="custom-table-column"
-          cell-template="formatNumber"
+          cell-template="formatNumberHistory"
         />
       </DxColumn>
 
@@ -179,6 +179,182 @@
         </p>
       </template>
 
+      <template #formatNumberWoPLMMobile="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 2,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberWoCC="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 1,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberWoComcen="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 3,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberWoTotal="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRekomendasi1="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 1,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberRekomendasi2="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 2,
+              dlpd: 0,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberDlpd="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 0,
+              dlpd: 1,
+              historyP2tl: 0
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
+      <template #formatNumberHistory="{ data }">
+        <p
+          class="text-right cursor-pointer"
+          @click="
+            setRequirementData({
+              woType: 0,
+              rekomendasiSistem: 0,
+              dlpd: 0,
+              historyP2tl: 1
+            })
+          "
+        >
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
+
       <DxSummary :calculate-custom-summary="calculateCustomSummary">
         <DxGroupItem
           column="wo_cc123"
@@ -305,7 +481,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_uid"
             caption="UIW/D"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -313,7 +489,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_up3"
             caption="UP3"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -321,7 +497,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_ulp"
             caption="Rayon"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -329,7 +505,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="id_pelanggan"
             caption="IDPEL"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -337,7 +513,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nomormeter"
             caption="NOMETER"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -345,7 +521,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_telp_pelapor"
             caption="No. Telpon"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -353,7 +529,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="nama_pelapor"
             caption="Nama"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -361,7 +537,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="alamat_pelapor"
             caption="Alamat"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -369,7 +545,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="media"
             caption="Sumber Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -377,7 +553,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_laporan"
             caption="No Laporan"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -385,15 +561,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
-            caption=""
-            css-class="custom-table-column"
-            cell-template="formatText"
-          />
-          <DxColumn
-            :width="150"
-            alignment="center"
-            data-field=""
+            data-field="r08"
             caption="08"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -401,7 +569,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r70"
             caption="70"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -409,7 +577,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r71"
             caption="71"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -417,7 +585,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r41"
             caption="41"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -425,7 +593,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r44"
             caption="44"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -433,7 +601,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r45"
             caption="45"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -441,7 +609,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r46"
             caption="46"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -449,7 +617,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r37"
             caption="37"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -457,7 +625,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="r47"
             caption="47"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -465,7 +633,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="jenis_dlpd"
             caption="Jenis DLPD"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -473,7 +641,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="keterangan_dlpd"
             caption="Keterangan DLPD"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -481,7 +649,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="blth_dlpd"
             caption="Bulan Tahun DLPD"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -489,7 +657,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_agenda_p2tl"
             caption="No. Agenda P2TL"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -497,7 +665,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_mohon_p2tl"
             caption="Tgl Mohon P2T"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -505,7 +673,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="tgl_sah_p2tl"
             caption="Tgl Sah P2TL"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -513,7 +681,15 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field="Rekomendasi Sistem"
+            data-field="rekomendasi_sistem"
+            caption="Rekomendasi Sistem"
+            css-class="custom-table-column"
+            cell-template="formatText"
+          />
+          <DxColumn
+            :width="150"
+            alignment="center"
+            data-field="waktu_lapor"
             caption="Tgl/Jam Lapor"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -521,7 +697,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="petugas_regu"
             caption="Petugas Regu"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -529,7 +705,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="user_vcc"
             caption="User VCC"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -559,142 +735,171 @@
       <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">UIW/D:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_uid" 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" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_up3" 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">Rayon:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_ulp" 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:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.id_pelanggan" 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">NOMETER:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nomormeter" 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. Telpon:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_telp_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Nama:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.nama_pelapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Alamat:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.alamat_pelapor"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Sumber Lapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.media" 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 Laporan:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.no_laporan" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">08:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r08" 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">70:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r70" 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">71:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r71" 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">41:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r41" 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">44:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r44" 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">45:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r45" 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">46:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r46" 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">37:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r37" 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">47:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.r47" 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 DLPD:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.jenis_dlpd" 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 DLPD:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.keterangan_dlpd"
+            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">Bulan Tahun DLPD:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.blth_dlpd" 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. Agenda P2TL:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_agenda_p2tl"
+            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 Mohon P2T:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.tgl_mohon_p2tl"
+            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 Sah P2TL:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.tgl_sah_p2tl" 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">Rekomendasi Sistem:</h3>
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.rekomendasi_sistem"
+            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/Jam Lapor:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.waktu_lapor" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">Petugas Regu:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.petugas_regu" class-name="flex-1" />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
           <h3 class="text-sm font-medium w-[135px] text-gray-800">User VCC:</h3>
-          <InputText :readonly="true" value="" class-name="flex-1" />
+          <InputText :readonly="true" :value="dataSubSelected?.user_vcc" class-name="flex-1" />
         </div>
       </div>
     </div>
@@ -751,6 +956,14 @@ const dialogDetail = ref(false)
 const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
+const requirementData = ref<any>({
+  woType: 0,
+  rekomendasiSistem: 0,
+  dlpd: 0,
+  historyP2tl: 0
+})
+
+const setRequirementData = (data: any) => (requirementData.value = data)
 
 let cc123 = 0
 let plnMobile = 0
@@ -864,7 +1077,7 @@ const filterData = async (params: any) => {
     })
 }
 
-const getDetail = () => {
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const selected = dataSelected.value
 
@@ -876,28 +1089,32 @@ const getDetail = () => {
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
     idUlp: selected?.id_ulp ? selected?.id_ulp : 0,
+    idPosko: selected?.id_posko ? selected?.id_posko : 0,
     idUid: selected?.id_uid ? selected?.id_uid : 0,
-    idUp3: selected?.id_up3 ? selected?.id_up3 : 0
+    idUp3: selected?.id_up3 ? selected?.id_up3 : 0,
+    namaRegional: selected?.nama_regional ? selected?.nama_regional : '',
+    tipeWo: requirementData.value?.woType ? requirementData.value?.woType : '',
+    rekomendasiSistem: requirementData.value?.rekomendasiSistem,
+    isDlpd: requirementData.value?.dlpd ? requirementData.value?.dlpd : 0,
+    isHistoriP2tl: requirementData.value?.historyP2tl ? requirementData.value?.historyP2tl : 0
   }
 
-  const { onResult, onError, loading } = useQuery(
-    queries.keluhan.rekap.rekapKeluhanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailKeluhanAll
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.cttKwhPeriksa.laporanCttKwhPeriksaDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailLaporanCttKwhPeriksa
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+      dialogDetail.value = true
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -908,7 +1125,6 @@ const clearSelection = () => {
 const showDetail = () => {
   clearSelection()
   dataSubSelected.value = null
-  dialogDetail.value = true
   getDetail()
 }
 
diff --git a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
index bb6f00a..1b54708 100755
--- a/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
+++ b/src/components/Pages/Gangguan/Rekap/RGangguan_RatingPerPosko.vue
@@ -684,7 +684,59 @@ const reportMeta = ref({
 })
 const agreeToShowDialog = ref(false)
 const progressSelected = ref(0)
+// const ratingToShow = ref(0)
+// const nonRating = ref(0)
 
+// const setAgreementDialog = (
+//   status: boolean,
+//   progress: number,
+//   rating: number,
+//   ratingStatus: number
+// ) => {
+//   agreeToShowDialog.value = status
+//   progressSelected.value = progress
+//   ratingToShow.value = rating
+//   nonRating.value = ratingStatus
+// }
+
+// const getDetail = async () => {
+//   const dateValue = filters.value.periode.split(' s/d ')
+//   const ref = dataSelected.value
+
+//   const query = {
+//     dateFrom: dateValue[0]
+//       ? dateValue[0].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     dateTo: dateValue[1]
+//       ? dateValue[1].split('-').reverse().join('-')
+//       : new Date().toISOString().slice(0, 10),
+//     posko: ref?.id_ulp ? ref?.id_ulp : 0,
+//     idUid: ref?.id_uid ? ref?.id_uid : 0,
+//     idUp3: ref?.id_up3 ? ref?.id_up3 : 0,
+//     idRegu: ref?.id_regu ? ref?.id_regu : 0,
+//     namaRegional: ref?.nama_regional ? ref?.nama_regional : '',
+//     isSelesai: progressSelected.value,
+//     isNonRating: nonRating.value,
+//     nilaiRating: ratingToShow.value
+//   }
+
+//   loadingSubData.value = true
+//   await requestGraphQl(queries.gangguan.rekap.gangguanRatingDetail, query)
+//     .then((result) => {
+//       if (result.data.data != undefined) {
+//         dataSub.value = result.data.data.detailRekapitulasiGangguanBerdasarkanRating
+//       } else {
+//         dataSub.value = []
+//       }
+//     })
+//     .catch((err) => {
+//       console.error(err)
+//     })
+//     .finally(() => {
+//       loadingSubData.value = false
+//       dialogDetail.value = true
+//     })
+// }
 const setAgreementDialog = (status: boolean, progress: number) => {
   agreeToShowDialog.value = status
   progressSelected.value = progress
diff --git a/src/components/Pages/Material/Daftar/Material_DGMYG.vue b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
index 39042a3..8b65304 100755
--- a/src/components/Pages/Material/Daftar/Material_DGMYG.vue
+++ b/src/components/Pages/Material/Daftar/Material_DGMYG.vue
@@ -7,14 +7,15 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       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=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -41,49 +42,56 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
 
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="nomo_gangguan"
+        data-field="no_laporan"
         caption="Nomor Gangguan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="nama_pelanggan"
+        data-field="nama_pelapor"
         caption="Nama Pelanggan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="300"
         alignment="center"
-        data-field="isi_laporan"
+        data-field="keterangan_pelapor"
         caption="Isi Laporan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
-        :width="170"
+        :width="300"
         alignment="center"
-        data-field="penyebab_gangguan"
+        data-field="penyebab"
         caption="Penyebab Gangguan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="waktu_padam"
+        data-field="waktu_lapor"
         caption="Tgl Padam"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field=""
+        data-field="waktu_recovery"
         caption="Tgl Nyala"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -91,40 +99,123 @@
         alignment="center"
         data-field="regu"
         caption="Regu"
+        cell-template="formatText"
       />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Material Yang Dipakai">
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="sumber"
+          data-field="media"
           caption="Sumber"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field=""
+          data-field="nama_material"
           caption="Nama"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="satuan"
+          data-field="satuan_material"
           caption="Satuan"
+          cell-template="formatText"
         />
         <DxColumn
           css-class="custom-table-column"
           :width="170"
           alignment="center"
-          data-field="volume"
+          data-field="volume_material"
           caption="Vol"
+          cell-template="formatText"
         />
       </DxColumn>
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+
+  <DetailDialog :open="dialogDetail" title="Detail Gangguan dan Material" @on-close="closeDialog">
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">No Gangguan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.no_laporan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Pelapor:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Isi Laporan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.keterangan_pelapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Penyebab Gangguan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.penyebab" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Padam:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_lapor" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl Nyala:</h3>
+        <InputText :readonly="true" :value="dataSelected?.waktu_recovery" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Regu:</h3>
+        <InputText :readonly="true" :value="dataSelected?.regu" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber:</h3>
+        <InputText :readonly="true" :value="dataSelected?.media" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.satuan_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Vol:</h3>
+        <InputText :readonly="true" :value="dataSelected?.volume_material" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -145,12 +236,19 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+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 loading = ref(false)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
 
 const resetData = () => {
   data.value = []
@@ -170,10 +268,10 @@ const filterData = async (params: any) => {
       : new Date().toISOString().slice(0, 10),
     idUid: idUid ? idUid.id : 0,
     idUp3: idUp3 ? idUp3.id : 0,
-    posko: posko ? posko.id : 0
+    idPosko: posko ? posko.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.material.daftar.daftarGangguanDanMaterialDipakai, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -186,8 +284,33 @@ const filterData = async (params: any) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onExporting = (e: any) => {}
+
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Material/Rekap/Material_RPM.vue b/src/components/Pages/Material/Rekap/Material_RPM.vue
index 56ecc2d..e8a42f7 100755
--- a/src/components/Pages/Material/Rekap/Material_RPM.vue
+++ b/src/components/Pages/Material/Rekap/Material_RPM.vue
@@ -7,14 +7,15 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       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=""
+      @selection-changed="onSelectionChanged"
       :column-width="100"
-      @exporting=""
+      @exporting="onExporting"
       :allow-column-resizing="true"
       column-resizing-mode="widget"
     >
@@ -41,14 +42,16 @@
         :calculate-display-value="(item: any) => data.findIndex((i) => i == item) + 1"
         data-type="number"
         caption="No"
+        cell-template="formatNumber"
       />
 
       <DxColumn
         css-class="custom-table-column"
         :width="170"
         alignment="center"
-        data-field="kode_material"
+        data-field="kode"
         caption="Kode Material"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -56,6 +59,7 @@
         alignment="center"
         data-field="nama_material"
         caption="Nama Material"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -63,6 +67,7 @@
         alignment="center"
         data-field="satuan"
         caption="Satuan"
+        cell-template="formatText"
       />
       <DxColumn
         css-class="custom-table-column"
@@ -70,6 +75,7 @@
         alignment="center"
         data-field="sumber_material"
         caption="Sumber Material"
+        cell-template="formatText"
       />
       <DxColumn css-class="custom-table-column" alignment="center" caption="Tanggal">
         <DxColumn
@@ -80,11 +86,77 @@
           data-type="number"
           :caption="i"
           css-class="custom-table-column"
+          cell-template="formatNumber"
         />
       </DxColumn>
+      <DxColumn
+        css-class="custom-table-column"
+        :width="170"
+        alignment="center"
+        data-field="total"
+        caption="Jumlah"
+        cell-template="formatNumber"
+      />
+
+      <template #formatText="{ data }">
+        <p class="text-left">
+          {{ data.text }}
+        </p>
+      </template>
+
+      <template #formatNumber="{ data }">
+        <p class="text-right">
+          {{
+            isNumber(data.text)
+              ? data.column.caption == '%'
+                ? formatPercentage(data.text)
+                : formatNumber(data.text)
+              : data.text
+          }}
+        </p>
+      </template>
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+
+  <DetailDialog
+    :open="dialogDetail"
+    title="Detail Rekapitulasi Pemakaian Material"
+    @on-close="closeDialog"
+  >
+    <div class="w-full p-4 space-y-2 bg-white rounded-xl">
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Kode Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.kode" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Nama Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.nama_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Satuan:</h3>
+        <InputText :readonly="true" :value="dataSelected?.satuan" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Sumber Material:</h3>
+        <InputText :readonly="true" :value="dataSelected?.sumber_material" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full" v-for="i in 31">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Tgl {{ i }}:</h3>
+        <InputText :readonly="true" :value="dataSelected[`tgl${i}`]" class-name="flex-1" />
+      </div>
+
+      <div class="flex flex-row items-center justify-between w-full">
+        <h3 class="text-sm font-medium w-[170px] text-gray-800">Jumlah:</h3>
+        <InputText :readonly="true" :value="dataSelected?.total" class-name="flex-1" />
+      </div>
+    </div>
+  </DetailDialog>
+
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -105,12 +177,19 @@ import { useQuery } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+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 loading = ref(false)
+const dataSub = ref<any[]>([])
+const dataSelected = ref<any>()
+const dataSubSelected = ref<any>()
+const dialogDetail = ref(false)
+const loadingData = ref(false)
 
 const resetData = () => {
   data.value = []
@@ -132,7 +211,7 @@ const filterData = async (params: any) => {
     posko: posko ? posko.id : 0
   }
 
-  loading.value = true
+  loadingData.value = true
   await requestGraphQl(queries.material.rekap.rekapitulasiPemakaianMaterial, query)
     .then((result) => {
       if (result.data.data != undefined) {
@@ -145,8 +224,33 @@ const filterData = async (params: any) => {
       console.error(err)
     })
     .finally(() => {
-      loading.value = false
+      loadingData.value = false
     })
 }
+
+const dataGridRef = ref<DxDataGrid | null>(null)
+const clearSelection = () => {
+  const dataGrid = dataGridRef.value!.instance!
+  dataGrid.clearSelection()
+}
+const showDetail = () => {
+  clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
+}
+
+const onExporting = (e: any) => {}
+
 const filters = ref()
 </script>
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index 5747583..daeec91 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -7,6 +7,7 @@
       ref="dataGridRef"
       :allow-column-reordering="true"
       class="max-h-[calc(100vh-140px)] mb-10"
+      :data-source="data"
       :show-column-lines="true"
       :show-row-lines="false"
       :show-borders="true"
@@ -118,7 +119,7 @@
       />
     </DxDataGrid>
   </div>
-  <BufferDialog v-if="loading" />
+  <BufferDialog v-if="loadingData" />
 </template>
 
 <script setup lang="ts">
@@ -142,13 +143,17 @@ import { Workbook } from 'exceljs'
 import { Type17 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 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 loading = ref(false)
+const loadingData = ref(false)
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
     const doc = new jsPDF()
@@ -182,9 +187,21 @@ const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
-const onSelectionChanged = ({ selectedRowsData }: any) => {
-  const data = selectedRowsData[0]
+const showDetail = () => {
   clearSelection()
+  dataSub.value = []
+  dataSubSelected.value = null
+  dialogDetail.value = true
+}
+const closeDialog = () => {
+  dialogDetail.value = false
+}
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+  if (selectedRowsData[0] != undefined) {
+    dataSelected.value = selectedRowsData[0]
+    showDetail()
+  }
 }
 
 const onRowPrepared = (e: any) => {
@@ -199,53 +216,41 @@ const onRowPrepared = (e: any) => {
   }
 }
 
-const data = [
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  },
-  {
-    noLapor: 'K2316081000039',
-    tipeIsu: 'PDPB',
-    nama: 'BAPAK HAIRUL',
-    unit: 'ULP BARABAI',
-    noTelp: '081350000000',
-    permasalahan: 'MCB KWH SERING TURUN',
-    deskripsi: '-',
-    tglBuat: '10/08/2016 07:18:17',
-    lapUlang: 0,
-    ketLapUlang: '-',
-    status: 'Dalam Proses Manager Unit',
-    durasi: '2638 01:59:17'
-  }
-]
-
 const filters = ref()
-const filterData = (filters: any) => {
-  console.log(filters)
+const resetData = () => {
+  data.value = []
+}
+
+const filterData = async (params: any) => {
+  resetData()
+  const dateValue = params.periode.split(' s/d ')
+  const { posko, idUid, idUp3 } = params
+  const query = {
+    dateFrom: dateValue[0]
+      ? dateValue[0].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    dateTo: dateValue[1]
+      ? dateValue[1].split('-').reverse().join('-')
+      : new Date().toISOString().slice(0, 10),
+    idUid: idUid ? idUid.id : 0,
+    idUp3: idUp3 ? idUp3.id : 0,
+    posko: posko ? posko.id : 0
+  }
+
+  loadingData.value = true
+  await requestGraphQl(queries.transaksi.transaksiAPKT, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiPemakaianMaterial
+      } else {
+        data.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 </script>
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 208a86a..bd06e69 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -862,6 +862,71 @@ export const queries = {
           }
         }
       `,
+      gangguanRatingDetail: gql`
+        query detailRekapitulasiGangguanBerdasarkanRating(
+          $dateFrom: Date!
+          $dateTo: Date!
+          $posko: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $idRegu: Int!
+          $namaRegional: String!
+          $isSelesai: Int
+          $isNonRating: Int
+          $nilaiRating: Int
+        ) {
+          detailRekapitulasiGangguanBerdasarkanRating(
+            dateFrom: $dateFrom
+            dateTo: $dateTo
+            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idRegu: $idRegu
+            namaRegional: $namaRegional
+            isSelesai: $isSelesai
+            isNonRating: $isNonRating
+            nilaiRating: $nilaiRating
+          ) {
+            alamat_pelapor
+            diselesaikan_oleh
+            dispatch_oleh
+            durasi_dispatch_time
+            durasi_recovery_time
+            durasi_response_time
+            id
+            idpel_nometer
+            id_posko
+            id_uid
+            id_ulp
+            id_up3
+            is_marking
+            is_non_rating
+            is_selesai
+            jarak_closing
+            jenis_gangguan
+            keterangan_pelapor
+            kode_gangguan
+            media
+            nama_pelapor
+            nama_posko
+            nama_regional
+            nama_uid
+            nama_ulp
+            nama_up3
+            nilai_rating
+            no_laporan
+            no_telp_pelapor
+            pembuat_laporan
+            penyebab
+            referensi_marking
+            status_akhir
+            tindakan
+            waktu_lapor
+            waktu_recovery
+            waktu_response
+          }
+        }
+      `,
       gangguanRatingPerPosko: gql`
         query rekapitulasiGangguanRatingPerPosko(
           $dateFrom: Date!
@@ -3468,22 +3533,24 @@ export const queries = {
           }
         }
       `,
-      petugasBerulangDetail: gql`
-        query detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+      petugasBerulangDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
           $namaRegional: String!
           $idUlp: Int!
           $idUid: Int!
           $idUp3: Int!
           $media: String
           $isMarking: Int!
+          $idPetugas: Int!
         ) {
-          detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+          subDetailAnomaliPenangananPengaduanGangguanPetugasBerulang(
             namaRegional: $namaRegional
             idUlp: $idUlp
             idUid: $idUid
             idUp3: $idUp3
             media: $media
             isMarking: $isMarking
+            idPetugas: $idPetugas
           ) {
             id
             nama_regional
@@ -3519,6 +3586,51 @@ export const queries = {
           }
         }
       `,
+      petugasBerulangDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasBerulang(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            nama_petugas
+            nama_unit
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_total
+            wo_lainnya
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_cc123
+            total_anomali_pln_mobile
+            total_anomali
+            persen_anomali_cc123
+            persen_anomali_pln_mobile
+            persen_anomali
+          }
+        }
+      `,
       petugasBerulang: gql`
         query anomaliPenangananPengaduanGangguanPetugasBerulang(
           $dateFrom: Date!
@@ -3558,8 +3670,8 @@ export const queries = {
           }
         }
       `,
-      petugasRatingNegatifDetail: gql`
-        query detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+      petugasRatingNegatifDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
           $dateFrom: Date!
           $dateTo: Date!
           $namaRegional: String!
@@ -3568,8 +3680,9 @@ export const queries = {
           $idUp3: Int!
           $media: String
           $isMarking: Int!
+          $idPetugas: Int!
         ) {
-          detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          subDetailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
             dateFrom: $dateFrom
             dateTo: $dateTo
             namaRegional: $namaRegional
@@ -3578,6 +3691,7 @@ export const queries = {
             idUp3: $idUp3
             media: $media
             isMarking: $isMarking
+            idPetugas: $idPetugas
           ) {
             id
             nama_regional
@@ -3613,6 +3727,51 @@ export const queries = {
           }
         }
       `,
+      petugasRatingNegatifDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasRatingNegatif(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            nama_petugas
+            nama_unit
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_total
+            wo_lainnya
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_cc123
+            total_anomali_pln_mobile
+            total_anomali
+            persen_anomali_cc123
+            persen_anomali_pln_mobile
+            persen_anomali
+          }
+        }
+      `,
       petugasRatingNegatif: gql`
         query anomaliPenangananPengaduanGangguanPetugasRatingNegatif(
           $dateFrom: Date!
@@ -3652,8 +3811,8 @@ export const queries = {
           }
         }
       `,
-      petugasSkipStepDetail: gql`
-        query detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+      petugasSkipStepDetailSub: gql`
+        query subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
           $dateFrom: Date!
           $dateTo: Date!
           $namaRegional: String!
@@ -3662,8 +3821,9 @@ export const queries = {
           $idUp3: Int!
           $media: String
           $isMarking: Int!
+          $idPetugas: Int!
         ) {
-          detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+          subDetailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
             dateFrom: $dateFrom
             dateTo: $dateTo
             namaRegional: $namaRegional
@@ -3672,6 +3832,7 @@ export const queries = {
             idUp3: $idUp3
             media: $media
             isMarking: $isMarking
+            idPetugas: $idPetugas
           ) {
             id
             nama_regional
@@ -3707,6 +3868,51 @@ export const queries = {
           }
         }
       `,
+      petugasSkipStepDetail: gql`
+        query detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+          $namaRegional: String!
+          $idUlp: Int!
+          $idUid: Int!
+          $idUp3: Int!
+          $media: String
+          $isMarking: Int!
+        ) {
+          detailAnomaliPenangananPengaduanGangguanPetugasSkipStep(
+            namaRegional: $namaRegional
+            idUlp: $idUlp
+            idUid: $idUid
+            idUp3: $idUp3
+            media: $media
+            isMarking: $isMarking
+          ) {
+            id_uid
+            nama_uid
+            id_up3
+            nama_up3
+            id_ulp
+            nama_ulp
+            id_posko
+            nama_posko
+            nama_petugas
+            nama_unit
+            wo_cc123
+            wo_pln_mobile
+            wo_loket
+            wo_total
+            wo_lainnya
+            anomali_pln_mobile_marking
+            anomali_pln_mobile_non_marking
+            anomali_cc123_marking
+            anomali_cc123_non_marking
+            total_anomali_cc123
+            total_anomali_pln_mobile
+            total_anomali
+            persen_anomali_cc123
+            persen_anomali_pln_mobile
+            persen_anomali
+          }
+        }
+      `,
       petugasSkipStep: gql`
         query anomaliPenangananPengaduanGangguanPetugasSkipStep(
           $dateFrom: Date!
@@ -4034,6 +4240,70 @@ export const queries = {
           history_p2lt
         }
       }
+    `,
+    laporanCttKwhPeriksaDetail: gql`
+      query detailLaporanCttKwhPeriksa(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $tipeWo: Int!
+        $rekomendasiSistem: Int!
+        $isDlpd: Int!
+        $idUlp: Int!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $namaRegional: String
+        $isHistoriP2tl: Int!
+      ) {
+        detailLaporanCttKwhPeriksa(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          tipeWo: $tipeWo
+          rekomendasiSistem: $rekomendasiSistem
+          isDlpd: $isDlpd
+          idUlp: $idUlp
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          namaRegional: $namaRegional
+          isHistoriP2tl: $isHistoriP2tl
+        ) {
+          id
+          nama_regional
+          id_uid
+          nama_uid
+          id_up3
+          nama_up3
+          id_ulp
+          nama_ulp
+          id_pelanggan
+          nomormeter
+          no_telp_pelapor
+          nama_pelapor
+          alamat_pelapor
+          media
+          no_laporan
+          r08
+          r70
+          r71
+          r41
+          r44
+          r45
+          r46
+          r37
+          r47
+          jenis_dlpd
+          keterangan_dlpd
+          blth_dlpd
+          no_agenda_p2tl
+          tgl_mohon_p2tl
+          tgl_sah_p2tl
+          rekomendasi_sistem
+          waktu_lapor
+          petugas_regu
+          user_vcc
+        }
+      }
     `
   },
   material: {
@@ -4042,27 +4312,29 @@ export const queries = {
         query DaftardaftarGangguanDanMaterialDipakai(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: String
+          $idPosko: Int
           $idUid: Int
           $idUp3: Int
         ) {
           daftarGangguanDanMaterialDipakai(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            distribusi: $idUid
-            area: $idUp3
-            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idPosko: $idPosko
           ) {
-            isi_laporan
-            nama_material
-            nama_pelanggan
-            nomor_gangguan
-            penyebab_gangguan
+            id
+            no_laporan
+            nama_pelapor
+            keterangan_pelapor
+            penyebab
+            waktu_lapor
+            waktu_recovery
             regu
-            satuan
-            sumber
-            volume
-            waktu_padam
+            media
+            nama_material
+            satuan_material
+            volume_material
           }
         }
       `
@@ -4072,18 +4344,19 @@ export const queries = {
         query DaftarrekapitulasiPemakaianMaterial(
           $dateFrom: Date!
           $dateTo: Date!
-          $posko: String
+          $idPosko: Int
           $idUid: Int
           $idUp3: Int
         ) {
           rekapitulasiPemakaianMaterial(
             dateFrom: $dateFrom
             dateTo: $dateTo
-            distribusi: $idUid
-            area: $idUp3
-            posko: $posko
+            idUid: $idUid
+            idUp3: $idUp3
+            idPosko: $idPosko
           ) {
-            kode_material
+            id
+            kode
             nama_material
             satuan
             sumber_material
@@ -4118,9 +4391,52 @@ export const queries = {
             tgl7
             tgl8
             tgl9
+            total
           }
         }
       `
     }
+  },
+  transaksi: {
+    transaksiAPKT: gql`
+      query transaksiApkt(
+        $dateFrom: Date!
+        $dateTo: Date!
+        $idPosko: Int!
+        $idUid: Int!
+        $idUp3: Int!
+        $tipe_sla: Int!
+        $operator_sla: String!
+        $is_sla: Int!
+        $status_akhir: String!
+        $no_laporan: String!
+      ) {
+        transaksiApkt(
+          dateFrom: $dateFrom
+          dateTo: $dateTo
+          idPosko: $idPosko
+          idUid: $idUid
+          idUp3: $idUp3
+          tipe_sla: $tipe_sla
+          operator_sla: $operator_sla
+          is_sla: $is_sla
+          status_akhir: $status_akhir
+          no_laporan: $no_laporan
+        ) {
+          no_laporan
+          issuetype
+          nama_pelapor
+          nama_posko
+          no_telp_pelapor
+          penyebab
+          keterangan_pelapor
+          waktu_lapor
+          jumlah_lapor
+          tipe_sla
+          operator_sla
+          is_sla
+        }
+      }
+    `
   }
 }