diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
index c36bb19..847939d 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGP.vue
@@ -10,7 +10,7 @@
     />
   </Filters>
 
-  <Anomali_LAPPGP_LPT :data="data" :loading="loading" />
+  <Anomali_LAPPGP_LPT :data="data" :loading="loadingData" />
   <Anomali_LAPPGP_LPP :data="data" />
 </template>
 
@@ -21,7 +21,19 @@ import { useQuery } from '@vue/apollo-composable'
 import { Type4 } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import { queries } from '@/utils/api/api.graphql'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
+
+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({
   jenisLaporan: {
     id: 1,
@@ -32,38 +44,31 @@ const filters = ref({
   up3: 0
 })
 
-const { onResult, onError, loading, refetch } = useQuery(
-  filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
-    ? queries.anomali.gangguan.petugasBerulang
-    : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
-      ? queries.anomali.gangguan.petugasRatingNegatif
-      : queries.anomali.gangguan.petugasSkipStep,
-  {
-    namaRegional: '',
-    // dateFrom: new Date().toISOString().slice(0, 10),
-    // dateTo: new Date().toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
 const filterData = (params: any) => {
   const { ulp, uid, up3, jenisLaporan } = params
 
   const dateValue = params.periode.split(' s/d ')
-  refetch({
-    namaRegional: '',
-    // 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: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.petugasBerulang
+      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.petugasRatingNegatif
+        : queries.anomali.gangguan.petugasSkipStep,
+    {
+      namaRegional: '',
+      // 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: ulp ? ulp.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0
+    }
+  )
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       if (jenisLaporan.name == 'Laporan Berulang Unit') {
@@ -81,7 +86,7 @@ const filterData = (params: any) => {
   })
 
   watch(loading, (value) => {
-    loading.value = value
+    loadingData.value = value
   })
 }
 
diff --git a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
index 26e2bd6..152bd3f 100644
--- a/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
+++ b/src/components/Pages/Anomali/Gangguan/Anomali_LAPPGU.vue
@@ -10,7 +10,7 @@
     />
   </Filters>
 
-  <Anomali_LAPPGU_LPT :data="data" :loading="loading" />
+  <Anomali_LAPPGU_LPT :data="data" :loading="loadingData" />
   <Anomali_LAPPGU_LPP :data="data" />
 </template>
 
@@ -21,7 +21,19 @@ import { Anomali_LAPPGU_LPP, Anomali_LAPPGU_LPT } from '../.'
 import { useQuery } from '@vue/apollo-composable'
 import { onMounted, ref, watch } from 'vue'
 import { queries } from '@/utils/api/api.graphql'
+import { apolloClient } from '@/utils/api/api.graphql'
+import { provideApolloClient } from '@vue/apollo-composable'
+
+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({
   jenisLaporan: {
     id: 1,
@@ -32,38 +44,31 @@ const filters = ref({
   up3: 0
 })
 
-const { onResult, onError, loading, refetch } = useQuery(
-  filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
-    ? queries.anomali.gangguan.unitBerulang
-    : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
-      ? queries.anomali.gangguan.unitRatingNegatif
-      : queries.anomali.gangguan.unitSkipStep,
-  {
-    namaRegional: '',
-    // dateFrom: new Date().toISOString().slice(0, 10),
-    // dateTo: new Date().toISOString().slice(0, 10),
-    idUlp: 0,
-    idUid: 0,
-    idUp3: 0
-  }
-)
-
 const filterData = (params: any) => {
   const { ulp, uid, up3, jenisLaporan } = params
 
   const dateValue = params.periode.split(' s/d ')
-  refetch({
-    namaRegional: '',
-    // 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: ulp ? ulp.id : 0,
-    idUid: uid ? uid.id : 0,
-    idUp3: up3 ? up3.id : 0
-  })
+
+  const { onResult, onError, loading, refetch } = useQuery(
+    filters.value.jenisLaporan.name == 'Laporan Berulang Unit'
+      ? queries.anomali.gangguan.unitBerulang
+      : filters.value.jenisLaporan.name == 'Laporan Rating Negatif'
+        ? queries.anomali.gangguan.unitRatingNegatif
+        : queries.anomali.gangguan.unitSkipStep,
+    {
+      namaRegional: '',
+      // 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: ulp ? ulp.id : 0,
+      idUid: uid ? uid.id : 0,
+      idUp3: up3 ? up3.id : 0
+    }
+  )
+
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
       if (jenisLaporan.name == 'Laporan Berulang Unit') {
@@ -74,14 +79,14 @@ const filterData = (params: any) => {
         data.value = queryResult.data.anomaliPenangananPengaduanGangguanUnitSkipStep
       }
     }
-    console.log(queryResult.data)
   })
+
   onError((error) => {
     console.log(error)
   })
 
   watch(loading, (value) => {
-    loading.value = value
+    loadingData.value = value
   })
 }