diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index 630b0ff..5c2d61a 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -10,8 +10,14 @@
     />
   </Filters>
 
-  <Anomali_LAPPGP_LPT :data="data" :loading="loadingData" />
-  <Anomali_LAPPGP_LPP :data="data" />
+  <Anomali_LAPPGP_LPT
+    :data="data"
+    :loading="loadingData"
+    :filters="filters"
+    @update:data-sub="dataSub = $event"
+    @update:loading-sub-data="loadingSubData = $event"
+  />
+  <Anomali_LAPPGP_LPP :data="dataSub" />
 </template>
 
 <script setup lang="ts">
@@ -28,10 +34,7 @@ const client = apolloClient()
 provideApolloClient(client)
 const data = ref<any[]>([])
 const dataSub = ref<any[]>([])
-const dataSelected = ref<any>()
-const dataSubSelected = ref<any>()
 const dialogDetail = ref(false)
-const closedialogDetail = () => (dialogDetail.value = false)
 const loadingData = ref(false)
 const loadingSubData = ref(false)
 const filters = ref({
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
index 7085bec..bfc1f49 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP_LPT.vue
@@ -29,8 +29,7 @@
       :show-indicator="showIndicator"
       :show-pane="showPane"
       :shading="shading"
-      v-if="loading"
-      v-model:visible="loading"
+      v-model:visible="loadingData"
       :enabled="true"
     />
     <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
@@ -104,7 +103,7 @@
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberPLNMobileMarking"
           />
           <DxColumn
             :width="150"
@@ -113,7 +112,7 @@
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberPLNMobileNonMarking"
           />
         </DxColumn>
       </DxColumn>
@@ -126,7 +125,7 @@
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberCCMarking"
           />
           <DxColumn
             :width="150"
@@ -135,7 +134,7 @@
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberCCNonMarking"
           />
         </DxColumn>
       </DxColumn>
@@ -148,7 +147,7 @@
             data-type="number"
             caption="Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberTotalMarking"
           />
           <DxColumn
             :width="150"
@@ -157,7 +156,7 @@
             data-type="number"
             caption="Non Marking"
             css-class="custom-table-column"
-            cell-template="formatNumber"
+            cell-template="formatNumberTotalNonMarking"
           />
         </DxColumn>
       </DxColumn>
@@ -235,8 +234,80 @@
       </DxColumn>
     </DxColumn>
 
+    <template #formatNumberPLNMobileMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 1)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberPLNMobileNonMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('PLN Mobile', 2)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCCMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 1)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberCCNonMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('Call PLN 123', 2)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('', 1)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
+    <template #formatNumberTotalNonMarking="{ data }">
+      <p class="text-right cursor-pointer" @click="setParameterRequest('', 2)">
+        {{
+          isNumber(data.text)
+            ? data.column.caption == '%'
+              ? formatPercentage(data.text)
+              : formatNumber(data.text)
+            : data.text
+        }}
+      </p>
+    </template>
+
     <template #formatNumber="{ data }">
-      <p class="text-right cursor-pointer">
+      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
         {{
           isNumber(data.text)
             ? data.column.caption == '%'
@@ -248,19 +319,19 @@
     </template>
 
     <template #formatPercentage="{ data }">
-      <p class="text-right cursor-pointer">
+      <p class="text-right cursor-pointer" @click="setParameterRequest(null, null)">
         {{ isNumber(data.text) ? formatPercentage(data.text) : data.text }}
       </p>
     </template>
 
     <template #formatText="{ data }">
-      <p class="text-left cursor-pointer">
+      <p class="text-left cursor-pointer" @click="setParameterRequest(null, null)">
         {{ data.text }}
       </p>
     </template>
 
     <template #formatTime="{ data }">
-      <p class="!text-right">
+      <p class="!text-right" @click="setParameterRequest(null, null)">
         {{ parseInt(data.text) ? formatWaktu(data.text) : '-' }}
       </p>
     </template>
@@ -397,6 +468,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import { formatWaktu } from '@/components/Form/FiltersType/reference'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -404,29 +476,115 @@ const shading = ref(true)
 const showPane = ref(true)
 const props = defineProps({
   data: Array as () => any[],
+  filters: Object as () => any,
   loading: {
     type: Boolean,
     default: false
   }
 })
+const filters = ref<any>(computed(() => props.filters))
 const data = computed(() => props.data)
 const dataSub = ref<any[]>([])
-const dataSelected = ref<any>({})
-const dataSubSelected = 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 emit = defineEmits(['update:dataSub', 'update:loadingSubData'])
+
+const setParameterRequest = (media: any, marking: any) => {
+  mediaSelected.value = media
+  markingSelected.value = marking
+
+  if (media != null && marking != null) {
+    agreeToShowDialog.value = true
+  } else {
+    agreeToShowDialog.value = false
+  }
+}
+
+const resetData = () => {
+  dataSub.value = []
+  dataSubSelected.value = null
+}
+
+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 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
+  }
+
+  loadingSubData.value = true
+  emit('update:loadingSubData', loadingSubData.value)
+  await requestGraphQl(
+    jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.petugasBerulangDetail
+      : jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.petugasRatingNegatifDetail
+        : queries.anomali.gangguan.petugasSkipStepDetail,
+    query
+  )
+    .then((result) => {
+      if (result.data.data != undefined) {
+        if (jenisLaporan.name == 'Laporan Berulang Unit') {
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitBerulang
+        } else if (jenisLaporan.name == 'Laporan Rating Negatif') {
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitRatingNegatif
+        } else {
+          dataSub.value = result.data.data.detailAnomaliPenangananPengaduanGangguanUnitSkipStep
+        }
+      } else {
+        dataSub.value = []
+      }
+      emit('update:dataSub', dataSub.value)
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+      emit('update:loadingSubData', loadingSubData.value)
+    })
+}
+
 const dataGridRef = ref<DxDataGrid | null>(null)
 const clearSelection = () => {
   const dataGrid = dataGridRef.value!.instance!
   dataGrid.clearSelection()
 }
+
 const showDetail = () => {
   clearSelection()
-  dialogDetail.value = true
+  dataSub.value = []
+  dataSubSelected.value = null
+  if (agreeToShowDialog.value) {
+    dialogDetail.value = true
+    getDetail()
+  }
 }
-const closeDialog = () => {
-  dialogDetail.value = false
-}
-const loading = ref(computed(() => props.loading))
 
 const onExporting = (e: any) => {
   if (e.format === 'pdf') {
@@ -460,7 +618,7 @@ const onExporting = (e: any) => {
 const onDataSelectionChanged = ({ selectedRowsData }: any) => {
   if (selectedRowsData[0] != undefined) {
     dataSelected.value = selectedRowsData[0]
+    showDetail()
   }
-  showDetail()
 }
 </script>
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
index c4d6aa3..3ec0358 100755
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU_LPT.vue
@@ -618,7 +618,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="no_laporan_referensi"
             caption="No Laporan Referensi"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -762,7 +762,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="status_induk"
             caption="Status Induk"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -770,7 +770,7 @@
           <DxColumn
             :width="150"
             alignment="center"
-            data-field=""
+            data-field="referensi_marking_induk"
             caption="Referensi Marking Induk"
             css-class="custom-table-column"
             cell-template="formatText"
@@ -847,7 +847,11 @@
 
         <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" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.no_laporan_referensi"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
@@ -995,12 +999,16 @@
 
         <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" />
+          <InputText :readonly="true" :value="dataSubSelected?.status_induk" class-name="flex-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" />
+          <InputText
+            :readonly="true"
+            :value="dataSubSelected?.referensi_marking_induk"
+            class-name="flex-1"
+          />
         </div>
 
         <div class="flex flex-row items-center justify-between w-full">
diff --git a/src/utils/api/api.graphql.ts b/src/utils/api/api.graphql.ts
index 26cd82e..c6a333d 100755
--- a/src/utils/api/api.graphql.ts
+++ b/src/utils/api/api.graphql.ts
@@ -3031,7 +3031,9 @@ export const queries = {
             id_ulp
             nama_ulp
             no_laporan
+            no_laporan_referensi
             referensi_marking
+            referensi_marking_induk
             waktu_lapor
             waktu_response
             waktu_recovery
@@ -3049,6 +3051,7 @@ export const queries = {
             media
             diselesaikan_oleh
             status_akhir
+            status_induk
             kode_gangguan
             jenis_gangguan
             penyebab
@@ -3129,7 +3132,9 @@ export const queries = {
             id_ulp
             nama_ulp
             no_laporan
+            no_laporan_referensi
             referensi_marking
+            referensi_marking_induk
             waktu_lapor
             waktu_response
             waktu_recovery
@@ -3147,6 +3152,7 @@ export const queries = {
             media
             diselesaikan_oleh
             status_akhir
+            status_induk
             kode_gangguan
             jenis_gangguan
             penyebab
@@ -3227,7 +3233,9 @@ export const queries = {
             id_ulp
             nama_ulp
             no_laporan
+            no_laporan_referensi
             referensi_marking
+            referensi_marking_induk
             waktu_lapor
             waktu_response
             waktu_recovery
@@ -3245,6 +3253,7 @@ export const queries = {
             media
             diselesaikan_oleh
             status_akhir
+            status_induk
             kode_gangguan
             jenis_gangguan
             penyebab