diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 9438058..6c8def1 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -12,9 +12,9 @@ import {
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
-const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-const up3 = ref({ id: 0, name: up3laceholder })
+const up3 = ref({ id: 0, name: up3placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
 const posko = ref({ id: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
@@ -32,7 +32,7 @@ watch(data.value, (value) => {
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3laceholder }
+  up3.value = { id: 0, name: up3placeholder }
   data.value.uid = value
 }
 
@@ -65,7 +65,7 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3laceholder" />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 24144c8..3ae83d4 100755
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-  
+
 import { onMounted, ref, watch } from 'vue'
+import { useTotalDuration } from '@/stores/totalDuration';
+
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -13,7 +15,7 @@ import {
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-
+import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
@@ -21,6 +23,7 @@ const uppp = ref({ id: 0, name: up3Placeholder });
 const uid = ref({ id: 0, name: uidPlaceholder });
 const ulp = ref({ id: "", name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
+
 const sla = [
   {
     id: 1,
@@ -36,8 +39,8 @@ const data = ref({
   up3: uppp.value,
   posko: ulp.value,
   periode: '',
-  minDurasiRecoveryTime: 1,
-  maxDurasiRecoveryTime: 1
+  minTime: 1,
+  maxTime: 1
 })
 const setUid = (value: any) => {
   uid.value = value;
@@ -58,25 +61,34 @@ const setUlp = (value: any) => {
   selectedUlp(value);
   data.value.posko = value;
 };
+const setMin = (value: any) => {
+  console.log(value)
+  data.value.minTime = value
+  useTotalDuration().setDataMin(value)
+
+}
+const setMax = (value: any) => {
+  data.value.maxTime = value
+  useTotalDuration().setDataMax(value)
+}
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
+    setMin("1")
+    setMax("5")
     console.log('Durasi Menit')
-    data.value.minDurasiRecoveryTime = 0
-    data.value.maxDurasiRecoveryTime = 5
     triggerInput.value = false
   } else if (value.id === 1) {
-    data.value.minDurasiRecoveryTime = 0
-    data.value.maxDurasiRecoveryTime = 45
+    setMin("1")
+    setMax("45")
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    data.value.minDurasiRecoveryTime = 46
-    data.value.maxDurasiRecoveryTime = 99999 * 60 * 24
+    setMin("45")
+    setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
 }
 onMounted(() => {
   emit('update:filters', data.value)
@@ -88,43 +100,27 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select 
-      @update:selected="setUid($event)" 
-      :data="itemsUid" 
-      :placeholder="uidPlaceholder"
-    />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Pelaksanaan Pelayanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-    <Select
-      @update:selected="setUp3($event)"
-      :data="itemsUp3"
-      :placeholder="up3Placeholder"
-    />
+    <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
-      >Unit Layanan Pelanggan:</label
-    >
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
 
-    <Select
-      @update:selected="setUlp($event)"
-      :data="itemsUlp"
-      :placeholder="ulpPlaceholder"
-    />
+    <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 
@@ -132,31 +128,13 @@ onMounted(() => {
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
-      <Select 
-        @update:selected="changeDuration($event)" 
-        :data="sla" 
-        placeholder="Durasi Menit"
-      />
-
+      <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <InputWithSuffix 
-          @update:minute-value="
-          (value :any)=> {
-            data.minDurasiRecoveryTime =value
-          }
-          "
-        @value="data.minDurasiRecoveryTime"
-        :disabled=triggerInput />
+        <InputWithSuffix :value="`${data.minTime} Menit`" />
         <small class="flex items-center">s/d</small>
-        <InputWithSuffix 
-          @update:minute-value="
-          (value :any)=> {
-            data.maxDurasiRecoveryTime = value
-          }
-          "
-        @value="data.maxDurasiRecoveryTime"
-        :disabled="triggerInput" />
+        <InputWithSuffix :value="`${data.maxTime} Menit`" />
       </div>
     </div>
   </div>
+
 </template>
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index d59e805..1ee987d 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -10,42 +10,47 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-const uppp = ref({ id: 0, name: up3Placeholder })
+const up3 = ref({ id: 0, name: up3Placeholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: '', name: ulpPlaceholder })
+const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
+
 const data = ref({
   uid: uid.value,
-  up3: uppp.value,
-  posko: ulp.value,
+  up3: up3.value,
+  ulp: ulp.value,
   periode: ''
 })
+watch(data.value, (value) => {
+  emit('update:filters', value)
+})
+
 const setUid = (value: any) => {
   uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: up3Placeholder }
+  up3.value = { id: 0, name: up3Placeholder }
   data.value.uid = value
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: '', name: ulpPlaceholder }
+  ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
 }
 
 const setUlp = (value: any) => {
   ulp.value = value
   selectedUlp(value)
-  data.value.posko = value
+  data.value.ulp = value
 }
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index 51d2ae9..afb7573 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -65,18 +65,18 @@ const setMax = (value: any) => {
 const triggerInput = ref(false)
 const changeDuration = (value: any) => {
   if (value.id === 0) {
-    setMin("1 Menit")
-    setMax("5 Menit")
+    setMin("1")
+    setMax("5")
     console.log('Durasi Menit')
     triggerInput.value = false
   } else if (value.id === 1) {
-    setMin("1 Menit")
-    setMax("45 Menit")
+    setMin("1")
+    setMax("45")
     console.log('Dibawah  / Sesuai SLA (<= 45 menit)')
     triggerInput.value = true
   } else {
-    setMin("45 Menit")
-    setMax(99999 * 60 * 24+ ' Menit')
+    setMin("45")
+    setMax(99999 * 60 * 24)
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index 88ec1e9..d09e46b 100755
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -19,7 +19,7 @@ const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const uppp = ref({ id: 0, name: uppPlaceholder })
 const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: "" ,name: poskoPlaceholder })
+const posko = ref({ id: 0 ,name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
   uid: uid.value,
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index b73e00f..f3134d1 100755
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -2,7 +2,7 @@ import { usePostsStore } from '@/stores/posts'
 import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
 import { useUp3Store } from '@/stores/up3'
-import { getUid, getUp3, getPosko, getUlp, getRegional } from '@/utils/network'
+import { getUid, getUp3, getPosko, getUlp, getRegional, getUidRegional } from '@/utils/network'
 import { ref } from 'vue'
 interface Item {
   id: any
@@ -52,6 +52,23 @@ const fetchMedia = () => {
     { id: 'Call PLN 123', name: 'Call PLN 123' }
   ]
 }
+const fetchUidByRegional = async (regional: number) => {
+  if (regional == 0) {
+    itemsUid.value = [];
+  } else {
+    try {
+      const res = await getUidRegional(regional)
+      itemsUid.value = res.data.map((item: any) => (
+        {
+          id: item.id,
+          name: item.nama.toUpperCase(),
+        }
+      ));
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }
+}
 // Fetch data from the API using Axios
 const fetchUid = async () => {
   try {
@@ -59,7 +76,7 @@ const fetchUid = async () => {
     itemsUid.value = res.data.map((item: any) => (
       {
         id: item.id,
-        name: item.nama.toUpperCase(),
+        name: item.nama,
       }
     ));
   } catch (error) {
@@ -68,36 +85,51 @@ const fetchUid = async () => {
 }
 
 const fetchDataUp3 = async (uid: number) => {
-  try {
-    const res = await getUp3(uid)
-    itemsUp3.value = res.data.map((item: any) => ({
-      id: item.id,
-      name: item.nama
-    }))
-  } catch (error) {
-    console.error('Error fetching data:', error)
+  if (uid == 0) {
+    itemsUp3.value = [];
+    itemsUlp.value = [];
+    itemsPosko.value = [];
+  } else {
+    try {
+      const res = await getUp3(uid);
+      itemsUp3.value = res.data.map((item: any) => ({
+        id: item.id,
+        name: item.nama
+      }))
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
   }
 }
 const fetchDataUlp = async (up3: number) => {
-  try {
-    const res = await getUlp(up3)
-    itemsUlp.value = res.data.map((item: any) => ({
-      id: item.id,
-      name: item.nama
-    }))
-  } catch (error) {
-    console.error('Error fetching data:', error)
+
+  if (up3 == 0) {
+    itemsUlp.value = []
+  } else {
+    try {
+      const res = await getUlp(up3)
+      itemsUlp.value = res.data.map((item: any) => ({
+        id: item.id,
+        name: item.name
+      }))
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
   }
 }
 const fetchDataPosko = async (up3: number) => {
-  try {
-    const res = await getPosko(up3)
-    itemsPosko.value = res.data.map((item: any) => ({
-      id: item.id,
-      name: item.nama
-    }))
-  } catch (error) {
-    console.error('Error fetching data:', error)
+  if (up3 == 0) {
+    itemsPosko.value = []
+  } else {
+    try {
+      const res = await getPosko(up3)
+      itemsPosko.value = res.data.map((item: any) => ({
+        id: item.id,
+        name: item.nama
+      }))
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
   }
 }
 const fetchRegional = async () => {
@@ -115,18 +147,17 @@ const fetchRegional = async () => {
 }
 
 const selectedUid = (value: any) => {
-  useRegionStore().setData(value.id)
   fetchDataUp3(value.id)
 }
 const selectedUp3Posko = (value: any) => {
   if (value.id != 0) {
-    useUp3Store().setData(value.id)
     fetchDataPosko(value.id)
   }
 }
 const selectedUp3Ulp = (value: any) => {
-  useUp3Store().setData(value.id)
-  fetchDataUlp(value.id)
+  if (value.id != 0) {
+    fetchDataUlp(value.id)
+  }
 }
 const selectedPosko = (value: any) => {
   usePostsStore().setData(value.id)
@@ -136,15 +167,16 @@ const selectedUlp = (value: any) => {
 }
 
 export {
+
   selectedUid,
   selectedUp3Posko,
   selectedUp3Ulp,
   selectedPosko,
   selectedUlp,
   fetchRegional,
+  fetchUidByRegional,
   fetchUid,
   fetchMedia,
-  fetchStatus,
   itemsUid,
   itemsUp3,
   itemsPosko,
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index e874a5c..3783e22 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,9 +1,7 @@
 <template>
   <Filters @run-search="() => {
-    console.log(filters)
     filterData(filters)
-  }
-    " class="mb-4">
+  }" class="mb-4">
     <Type1 @update:filters="(value) => {
       filters = value
     }
@@ -242,35 +240,45 @@ const closeDetail = () => {
   showDetail.value = false
 }
 const onExporting = (e: any) => {
+
   if (e.format === 'pdf') {
     const doc = new jsPDF({
       orientation: 'landscape',
       unit: 'mm',
-      format: 'a4',
-     
+      format: 'F4',
     })
+    // Add title on each page
+    const title = "Daftar Gangguan Dialihkan Ke Posko Lain";
 
-    // autoTable(doc, {
-   
-    //   margin: { top: 20 }, // Adjust top margin as needed
-    //   styles: {
-    //     fontSize: 8,
-    //     overflow: 'linebreak', // Enable linebreaks to fit content
-    //   },
-    //   startY: 10, // Adjust startY position as needed
-    //   head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
-    //   body: data.value.map((item) =>
-    //     [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko])
+    // Initialize page number
+    const pageNumber = ref(1);
+    autoTable(doc, {
+      head: [['No Laporan', 'Pembuat Laporan', 'Tgl Lapor', 'Tgl Dialihkan', 'Tgl Response', 'Tgl Recovery', 'Durasi Response Time', 'Durasi Recovery Time', 'Posko Awal', 'Posko Tujuan', 'Status', 'IDPEL/NO METER', 'Nama Pelapor', 'Alamat Pelapor', 'No Telp Pelapor', 'Keterangan Pelapor', 'Sumber Lapor', 'Posko']],
+      startY: 10,
+      body: data.value.map((item) =>
+        [item.no_laporan, item.pembuat_laporan, item.waktu_lapor, item.waktu_dialihkan, item.waktu_response, item.waktu_recovery, item.durasi_response_time, item.durasi_recovery_time, item.nama_posko_lama, item.nama_posko_baru, item.status_akhir, item.idpel_nometer, item.nama_pelapor, item.alamat_pelapor, item.no_telp_pelapor, item.keterangan_pelapor, item.media, item.posko]),
+      styles: {
+        fontSize: 6,
+        cellWidth: 'wrap'
+      },
+
+
+    })
+    doc.setProperties({
+      title: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+      subject: 'Daftar Gangguan Dialihkan Ke Posko Lain',
+    });
+    
+    pageNumber.value++; // Increment the pageNumber
+    doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+
+    // exportToPdf({
+    //   jsPDFDocument: doc,
+    //   component: e.component,
+    // }).then(() => {
+    // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
 
     // })
-
-
-    exportToPdf({
-      jsPDFDocument: doc,
-      component: e.component,
-    }).then(() => {
-      doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
-    })
   } else {
     const workbook = new Workbook()
     const worksheet = workbook.addWorksheet('Daftar Gangguan Dialihkan Ke Posko Lain')
@@ -332,15 +340,7 @@ const filterData = (params: any) => {
   })
   onResult((queryResult) => {
     if (queryResult.data != undefined) {
-      queryResult.data.daftarGangguanDialihkanKePoskoLain.forEach((item: any) => {
-        data.value = [
-          ...data.value,
-          {
-            ...item,
-            posko: item.nama_posko_baru
-          }
-        ]
-      })
+        data.value =  queryResult.data.daftarGangguanDialihkanKePoskoLain
     }
     console.log(queryResult.data)
     console.log(queryResult.loading)
@@ -355,7 +355,7 @@ const { onResult, onError, loading, refetch } = useQuery(
   {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0
   }
diff --git a/src/components/Pages/Gangguan/Table_10.vue b/src/components/Pages/Gangguan/Table_10.vue
index 9f59704..5008e7e 100755
--- a/src/components/Pages/Gangguan/Table_10.vue
+++ b/src/components/Pages/Gangguan/Table_10.vue
@@ -103,11 +103,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import gql from 'graphql-tag'
-import { useDateStore } from '@/stores/date'
-import { useSearchStore } from '@/stores/filtersAction'
-import { usePostsStore } from '@/stores/posts'
-import { useRegionStore } from '@/stores/region'
-import { useUp3Store } from '@/stores/up3'
+
 import { useQuery } from '@vue/apollo-composable'
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -181,7 +177,7 @@ const onExporting = (e: any) => {
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAP_JENIS_GANGGUAN_SE004, {
     dateFrom: new Date().toISOString().slice(0, 10),
     dateTo: new Date().toISOString().slice(0, 10),
-    posko: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -191,7 +187,7 @@ const filterData = (params: any) => {
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko,
+        posko: posko ? posko.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Pages/Gangguan/Table_11.vue b/src/components/Pages/Gangguan/Table_11.vue
index c1d3fcb..407b58b 100755
--- a/src/components/Pages/Gangguan/Table_11.vue
+++ b/src/components/Pages/Gangguan/Table_11.vue
@@ -19,12 +19,11 @@
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
-            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
+            
             <DxColumn :width="60" alignment="center" data-field="no" caption="NO" css-class="custom-table-column" />
-            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="posko" caption="Posko"
+            <DxColumn :width="150" name="poskoGroup" alignment="center" data-field="nama_posko" caption="Posko"
                 css-class="custom-table-column" :group-index="0" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Posko" css-class="custom-table-column" />
+            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Posko" css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="120" alignment="center" data-field="laporan.total" data-type="number" caption="Total"
                     css-class="custom-table-column" />
@@ -188,25 +187,19 @@ query rekapitulasiGangguanPerPosko(
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
+        id_posko
         max_durasi_recovery
         max_durasi_response
-        min_durasi_dispatch
         min_durasi_recovery
         min_durasi_response
+        nama_posko
         persen_inproses
         persen_selesai
-        posko
         total
-        total_diatas_sla_dispatch
         total_diatas_sla_recovery
         total_diatas_sla_response
-        total_dibawah_sla_dispatch
         total_dibawah_sla_recovery
         total_dibawah_sla_response
         total_inproses
@@ -272,7 +265,7 @@ const filterData = (params: any) => {
             queryResult.data.rekapitulasiGangguanPerPosko.forEach((item: any) => {
                 const entry = {
                     no: Number(i++),
-                    posko: item.posko,
+                    nama_posko: item.nama_posko,
                     laporan: {
                         total: item.total,
                         sudahSelesai: {
diff --git a/src/components/Pages/Gangguan/Table_12.vue b/src/components/Pages/Gangguan/Table_12.vue
index 8e0c536..112c86c 100755
--- a/src/components/Pages/Gangguan/Table_12.vue
+++ b/src/components/Pages/Gangguan/Table_12.vue
@@ -22,7 +22,7 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn :width="120" alignment="center" data-field="kode_regu" caption="Kode"
+            <DxColumn :width="120" alignment="center" data-field="id_regu" caption="Kode"
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="nama_regu" caption="Nama Regu"
                 css-class="custom-table-column" />
@@ -116,26 +116,20 @@ query rekapitulasiGangguanPerRegu(
         idUid: $idUid
         idUp3: $idUp3
     ) {
+        id_regu
         nama_regu
-        avg_durasi_dispatch
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
         max_durasi_recovery
         max_durasi_response
-        min_durasi_dispatch
         min_durasi_recovery
         min_durasi_response
         persen_inproses
         persen_selesai
-        posko
+        nama_posko
         total
-        total_diatas_sla_dispatch
         total_diatas_sla_recovery
         total_diatas_sla_response
-        total_dibawah_sla_dispatch
         total_dibawah_sla_recovery
         total_dibawah_sla_response
         total_inproses
diff --git a/src/components/Pages/Gangguan/Table_13.vue b/src/components/Pages/Gangguan/Table_13.vue
index f21b23b..e8bd5e1 100755
--- a/src/components/Pages/Gangguan/Table_13.vue
+++ b/src/components/Pages/Gangguan/Table_13.vue
@@ -1,30 +1,27 @@
 <template>
     <Filters @run-search="() => filterData(filters)" class="mb-4">
-    <Type9 @update:filters="(value) => {
-        filters = value
-      }
-      " />
-  </Filters>
+        <Type9 @update:filters="(value) => {
+            filters = value
+        }
+            " />
+    </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
-            :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
-            :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
-            :word-wrap-enabled="true">
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false"
+            :show-borders="true" :row-alternation-enabled="true" :hover-state-enabled="true"
+            @selection-changed="onSelectionChanged" :column-width="100" @exporting="onExporting"
+            :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :enabled="false" />
             <DxScrolling column-rendering-mode="virtual" mode="virtual" />
-            <DxLoadPanel :position="position" :show-indicator="showIndicator" 
-            :show-pane="showPane" :shading="shading"
-            v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
 
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
 
-             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
-            :calculateCellValue="(item:any) => data.findIndex((i)=>i == item)+1"
-             data-type="number"
-                caption="No" />
+            <DxColumn css-class="custom-table-column" :width="50" alignment="center"
+                :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="tanggal" caption="Tanggal Lapor"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
@@ -47,36 +44,36 @@
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_response" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_response" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_response" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_response" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_response" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_response" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
             <DxColumn alignment="center" caption="Recovery Time" css-class="custom-table-column">
                 <DxColumn alignment="center" caption="Menit" css-class="custom-table-column">
                     <DxColumn :width="120" alignment="center" data-field="total_recovery" data-type="number" caption="Total"
                         css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number" caption="Rata-Rata"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number" caption="Max"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number" caption="Min"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="avg_durasi_recovery" data-type="number"
+                        caption="Rata-Rata" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="max_durasi_recovery" data-type="number"
+                        caption="Max" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="min_durasi_recovery" data-type="number"
+                        caption="Min" css-class="custom-table-column" />
                 </DxColumn>
                 <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
-                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number" caption=">SLA"
-                        css-class="custom-table-column" />
-                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number" caption="≤SLA"
-                        css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_diatas_sla_recovery" data-type="number"
+                        caption=">SLA" css-class="custom-table-column" />
+                    <DxColumn :width="120" alignment="center" data-field="total_dibawah_sla_recovery" data-type="number"
+                        caption="≤SLA" css-class="custom-table-column" />
                 </DxColumn>
             </DxColumn>
         </DxDataGrid>
@@ -152,25 +149,19 @@ query rekapitulasiGangguanPerTanggal(
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        avg_durasi_dispatch
+        nama_posko
         avg_durasi_recovery
         avg_durasi_response
-        id_uid
-        id_up3
-        max_durasi_dispatch
         max_durasi_recovery
         max_durasi_response
-        min_durasi_dispatch
         min_durasi_recovery
         min_durasi_response
         persen_inproses
         persen_selesai
         tanggal
         total
-        total_diatas_sla_dispatch
         total_diatas_sla_recovery
         total_diatas_sla_response
-        total_dibawah_sla_dispatch
         total_dibawah_sla_recovery
         total_dibawah_sla_response
         total_inproses
@@ -178,22 +169,22 @@ query rekapitulasiGangguanPerTanggal(
         }
 }`;
 
-    const { onResult, onError,loading,refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
-        dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
-        dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-        posko: 0,
-        idUid: 0,
-        idUp3: 0,
-    })
+const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_GANGGUAN_PER_TANGGAL, {
+    dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
+    dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
+    posko: 0,
+    idUid: 0,
+    idUp3: 0,
+})
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { posko, uid, up3 } = params
     refetch({
         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),
+        dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         posko: posko ? posko.id : 0,
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0,
     })
     onResult(queryResult => {
         if (queryResult.data != undefined) {
@@ -206,7 +197,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-   
+
 }
 const filters = ref();
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index d12b89a..91ee2d4 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -28,6 +28,8 @@
                 <DxColumn v-for="i in 31" :width="150" alignment="center" :data-field="`tgl${i}`" data-type="number"
                     :caption="i" css-class="custom-table-column" />
             </DxColumn>
+            <DxColumn :width="170" alignment="center" data-field="total" caption="Total"
+                css-class="custom-table-column" />
         </DxDataGrid>
     </div>
 </template>
@@ -35,8 +37,7 @@
 <script setup lang="ts">
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
-import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
+import {  ref } from 'vue'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -110,6 +111,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
       idUp3: $idUp3
     ) {
       media
+      total
       tgl1
       tgl10
       tgl11
@@ -148,7 +150,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    posko: 0,
     idUid: 0,
     idUp3: 0
 })
diff --git a/src/components/Pages/Gangguan/Table_15.vue b/src/components/Pages/Gangguan/Table_15.vue
index 8914187..ee68ac8 100755
--- a/src/components/Pages/Gangguan/Table_15.vue
+++ b/src/components/Pages/Gangguan/Table_15.vue
@@ -22,8 +22,8 @@
 
             <DxColumn css-class="custom-table-column" :width="50" alignment="center"
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
-            <DxColumn alignment="center" data-field="id_uid" caption="Nama UP3" css-class="custom-table-column" />
-            <DxColumn alignment="center" data-field="id_up3" caption="Nama Posko" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_up3" caption="Nama UP3" css-class="custom-table-column" />
+            <DxColumn alignment="center" data-field="nama_posko" caption="Nama Posko" css-class="custom-table-column" />
             <DxColumn :width="100" alignment="center" data-field="posko_in" caption="Posko IN"
                 css-class="custom-table-column" />
             <DxColumn :width="100" alignment="center" data-field="posko_out" caption="Posko OUT"
@@ -37,7 +37,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type1 from '@/components/Form/FiltersType/Type1.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import { DxColumn, DxColumnFixing, DxExport, DxLoadPanel, DxPaging, DxScrolling, DxSearchPanel, DxSelection } from 'devextreme-vue/data-grid'
 import { jsPDF } from 'jspdf'
@@ -102,11 +101,14 @@ query rekapitulasiGangguanAlihPosko
         idUid: $idUid
         idUp3: $idUp3
     ) {
-        id_uid
-        id_up3
-        posko
-        posko_in
-        posko_out
+        id_posko
+id_uid
+id_up3
+nama_posko
+nama_uid
+nama_up3
+posko_in
+posko_out
         }
 }`;
 
diff --git a/src/components/Pages/Gangguan/Table_9.vue b/src/components/Pages/Gangguan/Table_9.vue
index f49eb13..5ea5241 100755
--- a/src/components/Pages/Gangguan/Table_9.vue
+++ b/src/components/Pages/Gangguan/Table_9.vue
@@ -154,14 +154,14 @@ const showPane = ref(true)
 const dataReal = ref<any[]>([])
 
 const GET_REKAP_JENIS_GANGGUAN = gql`
-  query daftarGangguanRecoveryTime(
+  query rekapitulasiPerJenisGangguan(
     $dateFrom: Date!
     $dateTo: Date!
     $posko: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    rekapitulasiJenisGangguan(
+    rekapitulasiPerJenisGangguan(
       dateFrom: $dateFrom
       dateTo: $dateTo
       posko: $posko
@@ -247,7 +247,7 @@ const filterData = (params: any) => {
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             let no = 0
-            queryResult.data.rekapitulasiJenisGangguan.forEach((item: any) => {
+            queryResult.data.rekapitulasiPerJenisGangguan.forEach((item: any) => {
                 dataReal.value = [
                     ...dataReal.value,
                     {
diff --git a/src/components/Pages/Keluhan/Table_21.vue b/src/components/Pages/Keluhan/Table_21.vue
index 28e867b..d81a93a 100755
--- a/src/components/Pages/Keluhan/Table_21.vue
+++ b/src/components/Pages/Keluhan/Table_21.vue
@@ -12,10 +12,10 @@
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -38,7 +38,7 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="posko_asal" caption="Unit Asal"
+            <DxColumn :width="170" alignment="center" data-field="nama_unit_lama" caption="Unit Asal"
                 css-class="custom-table-column" />
             <DxColumn :width="120" alignment="center" data-field="status_akhir" caption="Status"
                 css-class="custom-table-column" />
@@ -60,7 +60,6 @@
 import Filters from '@/components/Form/Filters.vue'
 import Type3 from '@/components/Form/FiltersType/Type3.vue'
 import { onMounted, ref } from 'vue'
-import { useFiltersStore } from '@/stores/filters'
 import { DxDataGrid } from 'devextreme-vue'
 import {
     DxColumn,
@@ -119,46 +118,47 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN = gql`
-  query daftarKeluhanDipindahkanKePoskoLain(
+const GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN = gql`
+  query daftarKeluhanDialihkanKeUnitLain(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
-    daftarKeluhanDipindahkanKePoskoLain(
+    daftarKeluhanDialihkanKeUnitLain(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      id_uid
-      id_up3
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko_asal
-      posko_tujuan
-      status_akhir
-      waktu_dialihkan
-      waktu_recovery
-      waktu_response
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        id_unit_baru
+        id_unit_lama
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        nama_unit_baru
+        nama_unit_lama
+        no_laporan
+        no_telp_pelapor
+        pembuat_laporan
+        status_akhir
+        waktu_dialihkan
+        waktu_lapor
+        waktu_recovery
+        waktu_response
     }
   }
 `
-const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_POSKO_LAIN, {
+const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPINDAHKAN_KE_idUlp_LAIN, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -166,16 +166,17 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DAFTAR_KELUHAN_DIPI
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { ulp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUlp: ulp ? ulp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
-            data.value = queryResult.data.daftarKeluhanDipindahkanKePoskoLain
+            data.value = queryResult.data.daftarKeluhanDialihkanKeUnitLain
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_22.vue b/src/components/Pages/Keluhan/Table_22.vue
index 0aaf7d5..65549a9 100755
--- a/src/components/Pages/Keluhan/Table_22.vue
+++ b/src/components/Pages/Keluhan/Table_22.vue
@@ -12,10 +12,10 @@
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -54,7 +54,7 @@
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
+            <DxColumn :width="150" alignment="center" data-field="idUlp" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -129,7 +129,7 @@ const GET_DATA = gql`
     $maxJmlLapor: Int!
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -138,24 +138,27 @@ const GET_DATA = gql`
       dateTo: $dateTo
       minJmlLapor: $minJmlLapor
       maxJmlLapor: $maxJmlLapor
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
+        alamat_pelapor
+durasi_recovery_time
+durasi_response_time
+idpel_nometer
+jumlah_lapor
+keterangan_pelapor
+media
+nama_pelapor
+nama_unit
+no_laporan
+no_telp_pelapor
+status_akhir
+waktu_lapor
+
+waktu_recovery
+
+waktu_response
     }
   }
 `
@@ -165,7 +168,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     maxJmlLapor: 100,
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -173,7 +176,7 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { ulp, uid, up3 } = params
     const minJmlLapor = params.minJmlLapor ? params.minJmlLapor : 1;
     const maxJmlLapor = params.maxJmlLapor ? params.maxJmlLapor : 100;
     refetch({
@@ -181,9 +184,10 @@ const filterData = (params: any) => {
         maxJmlLapor: maxJmlLapor,
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUlp: ulp ? ulp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanMelaporLebihDariSatuKali
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index 8b59eea..48c9d22 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -24,12 +24,9 @@
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-                css-class="custom-table-column" />
+           
             <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
@@ -50,7 +47,7 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -125,7 +122,7 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -134,24 +131,24 @@ const GET_DATA = gql`
       dateTo: $dateTo
       minDurasiResponseTime: $minDurasiResponseTime
       maxDurasiResponseTime: $maxDurasiResponseTime
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
+        alamat_pelapor
+        durasi_recovery_time
+        durasi_response_time
+        idpel_nometer
+        keterangan_pelapor
+        media
+        nama_pelapor
+        nama_unit
+        no_laporan
+        no_telp_pelapor
+        status_akhir
+        waktu_lapor
+        waktu_recovery
+        waktu_response
     }
   }
 `
@@ -160,21 +157,19 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     minDurasiResponseTime: 0,
     maxDurasiResponseTime: 0,
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
-    const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
+      const { ulp, uid, up3,maxTime,minTime } = params
     refetch({
         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),
-        minDurasiResponseTime: minDurasiResponseTime,
-        maxDurasiResponseTime: maxDurasiResponseTime,
-        posko: posko ? posko.id : "",
+        minDurasiResponseTime: minTime,
+        maxDurasiResponseTime:maxTime,
+        idUlp: ulp ? ulp.id :0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_24.vue b/src/components/Pages/Keluhan/Table_24.vue
index 8b8ad9c..bcec550 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -12,10 +12,10 @@
             :allow-column-resizing="true" column-resizing-mode="widget" :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -24,18 +24,13 @@
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="170" alignment="center" data-field="no_laporan" caption="No Laporan"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="pembuat_laporan" caption="Pembuat Laporan"
-                css-class="custom-table-column" />
+            
             <DxColumn :width="170" alignment="center" data-field="waktu_lapor" caption="Tgl Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="waktu_dialihkan" caption="Tgl Dialihkan"
-                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_response" caption="Tgl Response"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="waktu_recovery" caption="Tgl Recovery"
                 css-class="custom-table-column" />
-            <DxColumn :width="120" alignment="center" data-field="jumlah_lapor" caption="Jml Lapor"
-                css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_response_time" caption="Durasi Response Time"
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="durasi_recovery_time" caption="Durasi Recovery Time"
@@ -52,7 +47,7 @@
                 css-class="custom-table-column" />
             <DxColumn :width="170" alignment="center" data-field="keterangan_pelapor" caption="Keterangan Pelapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="posko" caption="Nama ULP"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -127,33 +122,33 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiRecoveryTime: Int!
     $maxDurasiRecoveryTime: Int!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     daftarKeluhanRecoveryTime(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       minDurasiRecoveryTime: $minDurasiRecoveryTime
       maxDurasiRecoveryTime: $maxDurasiRecoveryTime
       idUid: $idUid
       idUp3: $idUp3
     ) {
-      alamat_pelapor
-      durasi_recovery_time
-      durasi_response_time
-      id_keluhan
-      idpel_nometer
-      keterangan_pelapor
-      media
-      nama_pelapor
-      no_laporan
-      no_telp_pelapor
-      posko
-      status_akhir
-      waktu_recovery
-      waktu_response
+        alamat_pelapor
+durasi_recovery_time
+durasi_response_time
+idpel_nometer
+keterangan_pelapor
+media
+nama_pelapor
+nama_unit
+no_laporan
+no_telp_pelapor
+status_akhir
+waktu_lapor
+waktu_recovery
+waktu_response
     }
   }
 `
@@ -163,28 +158,27 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     minDurasiRecoveryTime: 0,
     maxDurasiRecoveryTime: 0,
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
-    const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
-    const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
+    const { ulp, uid, up3,minTime,maxTime } = params
     refetch({
         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),
-        minDurasiRecoveryTime: minDurasiRecoveryTime,
-        maxDurasiRecoveryTime: maxDurasiRecoveryTime,
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        minDurasiRecoveryTime: minTime,
+        maxDurasiRecoveryTime: maxTime,
+        idUlp: ulp ? ulp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanRecoveryTime
-    
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
@@ -193,7 +187,7 @@ const filterData = (params: any) => {
     onError((error) => {
         console.log(error)
     })
-    
+
 }
 const filters = ref();
 </script>
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 34d5f57..23ab09d 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -54,7 +54,7 @@
                 css-class="custom-table-column" />
             <DxColumn :width="150" alignment="center" data-field="media" caption="Sumber Lapor"
                 css-class="custom-table-column" />
-            <DxColumn :width="150" alignment="center" data-field="nama_posko" caption="Nama ULP"
+            <DxColumn :width="150" alignment="center" data-field="nama_idUlp" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -127,14 +127,14 @@ const GET_DATA = gql`
   query daftarKeluhanSelesaiTanpaIdPelanggan(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     daftarKeluhanSelesaiTanpaIdPelanggan(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -148,7 +148,7 @@ const GET_DATA = gql`
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko
+      idUlp
       status_akhir
       waktu_recovery
       waktu_response
@@ -159,18 +159,18 @@ const GET_DATA = gql`
 const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_26.vue b/src/components/Pages/Keluhan/Table_26.vue
index 5720b80..f6d2589 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -6,16 +6,16 @@
             " />
     </Filters>
     <div id="data">
-        <DxDataGrid class="max-h-[calc(100vh-140px)]" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
+        <DxDataGrid class="max-h-[calc(100vh-140px)]" :data-source="data" :show-column-lines="true" :show-row-lines="false" :show-borders="true"
             :row-alternation-enabled="true" :hover-state-enabled="true" @selection-changed="onSelectionChanged"
             :column-width="100" @exporting="onExporting" :allow-column-resizing="true" column-resizing-mode="widget"
             :word-wrap-enabled="true">
             <DxSelection mode="single" />
             <DxPaging :page-size="5" :enabled="true" />
-            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full"
-                :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" />
-               <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
-        v-if="loading" v-model:visible="loading" :enabled="true" />
+            <DxPager :visible="true" :allowed-page-sizes="[5, 10, 20]" display-mode="full" :show-page-size-selector="true"
+                :show-info="true" :show-navigation-buttons="true" />
+            <DxLoadPanel :position="position" :show-indicator="showIndicator" :show-pane="showPane" :shading="shading"
+                v-if="loading" v-model:visible="loading" :enabled="true" />
             <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
             <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
             <DxColumnFixing :enabled="true" />
@@ -123,7 +123,7 @@ const GET_DATA = gql`
   query daftarKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
     $media: String!
@@ -131,7 +131,7 @@ const GET_DATA = gql`
     daftarKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
       media: $media
@@ -146,7 +146,7 @@ const GET_DATA = gql`
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko
+      idUlp
       status_akhir
       waktu_recovery
       waktu_response
@@ -157,25 +157,26 @@ const GET_DATA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
-        idUid: uid ? uid.id :0,
-        idUp3: up3? up3.id:0})
+        idUlp: idUlp ? idUlp.id : 0,
+        idUid: uid ? uid.id : 0,
+        idUp3: up3 ? up3.id : 0
+    })
 
     onResult((queryResult) => {
         if (queryResult.data != undefined) {
             data.value = queryResult.data.daftarKeluhanBerdasarkanMedia
-    
+
         }
         console.log(queryResult.data)
         console.log(queryResult.loading)
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 5400f45..42b7342 100755
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -121,7 +121,7 @@ const GET_DATA = gql`
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -129,7 +129,7 @@ const GET_DATA = gql`
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -143,7 +143,7 @@ const GET_DATA = gql`
         nama_pelapor
         no_laporan
         no_telp_pelapor
-        posko
+        idUlp
         status_akhir
         waktu_recovery
         waktu_response
@@ -154,7 +154,7 @@ const GET_DATA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
     media: 'Twitter'
@@ -163,12 +163,12 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     const media = params.media ? params.media.id : ''
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0,
         media: media
diff --git a/src/components/Pages/Keluhan/Table_28.vue b/src/components/Pages/Keluhan/Table_28.vue
index edfd39a..0932408 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -19,7 +19,7 @@
       <DxExport :enabled="true" :formats="['pdf', 'xlsx', 'document']" :allow-export-selected-data="false" />
       <DxColumnFixing :enabled="true" />
 
-      <DxColumn :width="170" alignment="center" data-field="posko" caption="Nama Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="idUlp" caption="Nama Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Response Time" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
@@ -126,7 +126,7 @@ query rekapitulasiKeluhanAll
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -134,7 +134,7 @@ query rekapitulasiKeluhanAll
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -151,7 +151,7 @@ query rekapitulasiKeluhanAll
         min_durasi_response
         persen_inproses
         persen_selesai
-        posko
+        idUlp
         total
         total_diatas_sla_dispatch
         total_diatas_sla_recovery
@@ -167,7 +167,7 @@ query rekapitulasiKeluhanAll
   const { onResult, onError,loading,refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
   })
@@ -175,11 +175,11 @@ query rekapitulasiKeluhanAll
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_29.vue b/src/components/Pages/Keluhan/Table_29.vue
index 09931a5..a8fe7d0 100755
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -147,14 +147,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanPenyelesaianPerFungsiBidang(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -182,7 +182,7 @@ const GET_DATA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -190,11 +190,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_30.vue b/src/components/Pages/Keluhan/Table_30.vue
index 7fc828f..d4a94c1 100755
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -138,7 +138,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -146,7 +146,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -176,7 +176,7 @@ query rekapitulasiKeluhanPerJenisKeluhan
 const { onResult, onError, loading,refetch } = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -184,11 +184,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_31.vue b/src/components/Pages/Keluhan/Table_31.vue
index 57cc70f..7a230b4 100755
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -138,7 +138,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -146,7 +146,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -176,7 +176,7 @@ query rekapitulasiKeluhanPerKelompokKeluhan
 const { onResult, onError ,loading,refetch} = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -184,11 +184,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { posko, uid, up3 } = params
+      const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_32.vue b/src/components/Pages/Keluhan/Table_32.vue
index 728ddae..e17c568 100755
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -145,14 +145,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPerTanggal(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanPerTanggal(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -185,7 +185,7 @@ const GET_DATA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: '',
+  idUlp: '',
   idUid: 0,
   idUp3: 0
 })
@@ -193,11 +193,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
diff --git a/src/components/Pages/Keluhan/Table_33.vue b/src/components/Pages/Keluhan/Table_33.vue
index 3e6708c..a602e4d 100755
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -21,7 +21,7 @@
 
       <DxColumn :width="50" alignment="center" :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
         caption="NO" css-class="custom-table-column" />
-      <DxColumn :width="170" alignment="center" data-field="posko" caption="Unit" css-class="custom-table-column" />
+      <DxColumn :width="170" alignment="center" data-field="idUlp" caption="Unit" css-class="custom-table-column" />
       <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
         <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
           css-class="custom-table-column" />
@@ -144,14 +144,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanPerUnit(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanPerUnit(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -168,7 +168,7 @@ const GET_DATA = gql`
       min_durasi_response
       persen_inproses
       persen_selesai
-      posko
+      idUlp
       total
       total_diatas_sla_dispatch
       total_diatas_sla_recovery
@@ -184,7 +184,7 @@ const GET_DATA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
@@ -192,11 +192,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
diff --git a/src/components/Pages/Keluhan/Table_34.vue b/src/components/Pages/Keluhan/Table_34.vue
index 3e7b0a4..4c011bc 100755
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -96,14 +96,14 @@ const GET_DATA = gql`
   query rekapitulasiKeluhanBerdasarkanMedia(
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
     rekapitulasiKeluhanBerdasarkanMedia(
       dateFrom: $dateFrom
       dateTo: $dateTo
-      posko: $posko
+      idUlp: $idUlp
       idUid: $idUid
       idUp3: $idUp3
     ) {
@@ -145,7 +145,7 @@ const GET_DATA = gql`
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-  posko: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
@@ -153,11 +153,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
   const dateValue = params.periode.split(' s/d ')
-  const { posko, uid, up3 } = params
+  const { idUlp, uid, up3 } = params
   refetch({
     dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
     dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-    posko: posko ? posko.id : "",
+    idUlp: idUlp ? idUlp.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   })
diff --git a/src/components/Pages/Keluhan/Table_35.vue b/src/components/Pages/Keluhan/Table_35.vue
index 1b5667f..af8584f 100755
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -23,7 +23,7 @@
                 :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1" data-type="number" caption="No" />
             <DxColumn :width="150" alignment="center" data-field="regu" caption="Kode Unit"
                 css-class="custom-table-column" />
-            <DxColumn :width="170" alignment="center" data-field="nama_posko" caption="Nama Unit"
+            <DxColumn :width="170" alignment="center" data-field="nama_idUlp" caption="Nama Unit"
                 css-class="custom-table-column" />
             <DxColumn alignment="center" caption="Laporan" css-class="custom-table-column">
                 <DxColumn :width="150" alignment="center" data-field="total" data-type="number" caption="Total"
@@ -131,7 +131,7 @@ query rekapitulasiKeluhanRatingPerUnit
 (
     $dateFrom: Date!
     $dateTo: Date!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
 ) {
@@ -139,7 +139,7 @@ query rekapitulasiKeluhanRatingPerUnit
 (
         dateFrom: $dateFrom
         dateTo: $dateTo
-        posko: $posko
+        idUlp: $idUlp
         idUid: $idUid
         idUp3: $idUp3
     ) {
@@ -147,7 +147,7 @@ query rekapitulasiKeluhanRatingPerUnit
         indeks_rating 
         jumlah_non_rating 
         jumlah_rating 
-        nama_posko      
+        nama_idUlp      
         persen_in_process 
         persen_non_rating 
         persen_rating 
@@ -165,7 +165,7 @@ query rekapitulasiKeluhanRatingPerUnit
 const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateFrom: new Date("2023-10-01").toISOString().slice(0, 10),
     dateTo: new Date("2023-10-01").toISOString().slice(0, 10),
-    posko: 0,
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
 })
@@ -173,11 +173,11 @@ const filters = ref();
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-    const { posko, uid, up3 } = params
+    const { idUlp, uid, up3 } = params
     refetch({
         dateFrom: dateValue[0] ? dateValue[0].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : 0,
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 5092440..57b341b 100755
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -29,6 +29,8 @@ const selected = ref(data.value[0].id)
 watch(
   () => props.selected,
   (value: any) => {
+    console.log('value', value)
+    console.log('aaaaaaaaaaaaaaaa')
     selected.value = value.id
   }
 )