From 81d77fc10112e7ee0b215c9ea6d13ae864de976e Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Fri, 23 Feb 2024 17:07:59 +0700
Subject: [PATCH] Fix idUlp type in filterData function

---
 src/components/Form/FiltersType/Type1.vue    |  8 +-
 src/components/Form/FiltersType/Type11.vue   | 92 +++++++------------
 src/components/Form/FiltersType/Type3.vue    | 25 +++--
 src/components/Form/FiltersType/Type7.vue    | 12 +--
 src/components/Form/FiltersType/reference.ts | 97 +++++++++++++-------
 src/components/Pages/Gangguan/Table_1.vue    |  8 +-
 src/components/Pages/Gangguan/Table_14.vue   |  3 +
 src/components/Pages/Keluhan/Table_23.vue    | 47 +++++-----
 src/components/Pages/Keluhan/Table_24.vue    | 66 ++++++-------
 src/components/Pages/Keluhan/Table_25.vue    |  4 +-
 src/components/Pages/Keluhan/Table_26.vue    | 23 ++---
 src/components/Pages/Keluhan/Table_27.vue    |  4 +-
 src/components/Pages/Keluhan/Table_28.vue    |  4 +-
 src/components/Pages/Keluhan/Table_29.vue    |  4 +-
 src/components/Pages/Keluhan/Table_30.vue    |  2 +-
 src/components/Pages/Keluhan/Table_31.vue    |  2 +-
 src/components/Pages/Keluhan/Table_32.vue    |  2 +-
 src/components/Pages/Keluhan/Table_33.vue    |  4 +-
 src/components/Pages/Keluhan/Table_34.vue    |  4 +-
 src/components/Pages/Keluhan/Table_35.vue    |  2 +-
 src/components/Select.vue                    |  2 +
 21 files changed, 213 insertions(+), 202 deletions(-)

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 44672e6..aba3642 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -1,30 +1,35 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
-import { onMounted, ref } from 'vue';
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+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: 0, name: ulpPlaceholder });
 const emit = defineEmits(['update:filters'])
+
 const data = ref({
   uid: uid.value,
-  up3: uppp.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: 0, name: ulpPlaceholder };
   data.value.up3 = value;
@@ -36,8 +41,8 @@ const setUlp = (value: any) => {
   data.value.ulp = value;
 };
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -63,9 +68,9 @@ 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">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
-        data.periode = value
-      }
+    <DatePicker @update:date-value="(value) => {
+      data.periode = value
+    }
       " />
   </div>
 </template>
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/reference.ts b/src/components/Form/FiltersType/reference.ts
index b73e00f..dbf6727 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
@@ -28,12 +28,12 @@ const years = ref<Item[]>([])
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
-const itemsUid = ref<Item[]>([])
-const itemsUp3 = ref<Item[]>([])
-const itemsPosko = ref<Item[]>([])
-const itemsUlp = ref<Item[]>([])
-const itemsRegional = ref<Item[]>([])
-const itemsMedia = ref<Item[]>([])
+let itemsUid = ref<Item[]>([])
+let itemsUp3 = ref<Item[]>([])
+let itemsPosko = ref<Item[]>([])
+let itemsUlp = ref<Item[]>([])
+let itemsRegional = ref<Item[]>([])
+let itemsMedia = ref<Item[]>([])
 // Fetch data from the API using Axios
 const fetchMedia = () => {
   itemsMedia.value = [
@@ -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 {
@@ -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 () => {
@@ -136,15 +168,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 991fc26..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
     }
@@ -278,6 +276,8 @@ const onExporting = (e: any) => {
     //   jsPDFDocument: doc,
     //   component: e.component,
     // }).then(() => {
+    // doc.save(`Daftar Gangguan Dialihkan Ke Posko Lain.pdf`)
+
     // })
   } else {
     const workbook = new Workbook()
@@ -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_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index d8aa38b..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>
@@ -109,6 +111,7 @@ const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
       idUp3: $idUp3
     ) {
       media
+      total
       tgl1
       tgl10
       tgl11
diff --git a/src/components/Pages/Keluhan/Table_23.vue b/src/components/Pages/Keluhan/Table_23.vue
index ba05c15..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="idUlp" caption="Nama ULP"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -138,20 +135,20 @@ const GET_DATA = gql`
       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
-      idUlp
-      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,
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, 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,
-        idUlp: idUlp ? idUlp.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 678798d..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="idUlp" caption="Nama ULP"
+            <DxColumn :width="150" alignment="center" data-field="nama_unit" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -140,20 +135,20 @@ const GET_DATA = gql`
       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
-      idUlp
-      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,
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, 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,
-        idUlp: idUlp ? idUlp.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 7a3a3e6..23ab09d 100755
--- a/src/components/Pages/Keluhan/Table_25.vue
+++ b/src/components/Pages/Keluhan/Table_25.vue
@@ -159,7 +159,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),
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -170,7 +170,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),
-        idUlp: idUlp ? idUlp.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 94dae7c..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" />
@@ -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),
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
 
 const filterData = (params: any) => {
     const dateValue = params.periode.split(' s/d ')
-      const { idUlp, 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),
-        idUlp: idUlp ? idUlp.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 d7109e6..42b7342 100755
--- a/src/components/Pages/Keluhan/Table_27.vue
+++ b/src/components/Pages/Keluhan/Table_27.vue
@@ -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),
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0,
     media: 'Twitter'
@@ -168,7 +168,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),
-        idUlp: idUlp ? idUlp.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 364367f..0932408 100755
--- a/src/components/Pages/Keluhan/Table_28.vue
+++ b/src/components/Pages/Keluhan/Table_28.vue
@@ -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),
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
   })
@@ -179,7 +179,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),
-        idUlp: idUlp ? idUlp.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 b284b46..a8fe7d0 100755
--- a/src/components/Pages/Keluhan/Table_29.vue
+++ b/src/components/Pages/Keluhan/Table_29.vue
@@ -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),
-    idUlp: '',
+    idUlp: 0,
     idUid: 0,
     idUp3: 0
 })
@@ -194,7 +194,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),
-        idUlp: idUlp ? idUlp.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 1c6f626..d4a94c1 100755
--- a/src/components/Pages/Keluhan/Table_30.vue
+++ b/src/components/Pages/Keluhan/Table_30.vue
@@ -188,7 +188,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),
-        idUlp: idUlp ? idUlp.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 3da43a6..7a230b4 100755
--- a/src/components/Pages/Keluhan/Table_31.vue
+++ b/src/components/Pages/Keluhan/Table_31.vue
@@ -188,7 +188,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),
-        idUlp: idUlp ? idUlp.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 9820702..e17c568 100755
--- a/src/components/Pages/Keluhan/Table_32.vue
+++ b/src/components/Pages/Keluhan/Table_32.vue
@@ -197,7 +197,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),
-    idUlp: idUlp ? idUlp.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 91c35bc..a602e4d 100755
--- a/src/components/Pages/Keluhan/Table_33.vue
+++ b/src/components/Pages/Keluhan/Table_33.vue
@@ -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),
-  idUlp: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
@@ -196,7 +196,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),
-    idUlp: idUlp ? idUlp.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 666be59..4c011bc 100755
--- a/src/components/Pages/Keluhan/Table_34.vue
+++ b/src/components/Pages/Keluhan/Table_34.vue
@@ -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),
-  idUlp: '',
+  idUlp: 0,
   idUid: 0,
   idUp3: 0
 })
@@ -157,7 +157,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),
-    idUlp: idUlp ? idUlp.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 82c7654..af8584f 100755
--- a/src/components/Pages/Keluhan/Table_35.vue
+++ b/src/components/Pages/Keluhan/Table_35.vue
@@ -177,7 +177,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),
-        idUlp: idUlp ? idUlp.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
   }
 )