From 5bae24d35bba7320e01b080244d6b004234779ae Mon Sep 17 00:00:00 2001
From: Eko Haryadi <ekoharyadi416@gmail.com>
Date: Fri, 23 Feb 2024 14:59:20 +0700
Subject: [PATCH] Daftar Keluhan Pelanggan Lebih Dari 1 Kali

---
 src/components/Form/FiltersType/Type3.vue  |  8 +--
 src/components/Pages/Gangguan/Table_14.vue |  5 +-
 src/components/Pages/Gangguan/Table_15.vue | 18 +++---
 src/components/Pages/Keluhan/Table_21.vue  | 73 +++++++++++-----------
 src/components/Pages/Keluhan/Table_22.vue  | 56 +++++++++--------
 src/components/Pages/Keluhan/Table_23.vue  | 14 ++---
 src/components/Pages/Keluhan/Table_24.vue  | 14 ++---
 src/components/Pages/Keluhan/Table_25.vue  | 14 ++---
 src/components/Pages/Keluhan/Table_26.vue  | 12 ++--
 src/components/Pages/Keluhan/Table_27.vue  | 12 ++--
 src/components/Pages/Keluhan/Table_28.vue  | 14 ++---
 src/components/Pages/Keluhan/Table_29.vue  | 10 +--
 src/components/Pages/Keluhan/Table_30.vue  | 10 +--
 src/components/Pages/Keluhan/Table_31.vue  | 10 +--
 src/components/Pages/Keluhan/Table_32.vue  | 10 +--
 src/components/Pages/Keluhan/Table_33.vue  | 14 ++---
 src/components/Pages/Keluhan/Table_34.vue  | 10 +--
 src/components/Pages/Keluhan/Table_35.vue  | 14 ++---
 src/components/Select.vue                  |  4 +-
 19 files changed, 164 insertions(+), 158 deletions(-)

diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index 8e010bc..44672e6 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -8,12 +8,12 @@ const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
 const uppp = 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,
+  ulp: ulp.value,
   periode: ''
 })
 const setUid = (value: any) => {
@@ -26,14 +26,14 @@ const setUid = (value: any) => {
 const setUp3 = (value: any) => {
   uppp.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)
diff --git a/src/components/Pages/Gangguan/Table_14.vue b/src/components/Pages/Gangguan/Table_14.vue
index d12b89a..d8aa38b 100755
--- a/src/components/Pages/Gangguan/Table_14.vue
+++ b/src/components/Pages/Gangguan/Table_14.vue
@@ -35,8 +35,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,
@@ -148,7 +147,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/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..ba05c15 100755
--- a/src/components/Pages/Keluhan/Table_23.vue
+++ b/src/components/Pages/Keluhan/Table_23.vue
@@ -50,7 +50,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="idUlp" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -125,7 +125,7 @@ const GET_DATA = gql`
     $dateTo: Date!
     $minDurasiResponseTime: Int!
     $maxDurasiResponseTime: Int!
-    $posko: Int!
+    $idUlp: Int!
     $idUid: Int!
     $idUp3: Int!
   ) {
@@ -134,7 +134,7 @@ const GET_DATA = gql`
       dateTo: $dateTo
       minDurasiResponseTime: $minDurasiResponseTime
       maxDurasiResponseTime: $maxDurasiResponseTime
-      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
@@ -160,13 +160,13 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     minDurasiResponseTime: 0,
     maxDurasiResponseTime: 0,
-    posko: '',
+    idUlp: '',
     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
     const minDurasiResponseTime = params.minDurasiResponseTime ? params.minDurasiResponseTime : 0
     const maxDurasiResponseTime = params.maxDurasiResponseTime ? params.maxDurasiResponseTime : 0
     refetch({
@@ -174,7 +174,7 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiResponseTime: minDurasiResponseTime,
         maxDurasiResponseTime: maxDurasiResponseTime,
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : "",
         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..678798d 100755
--- a/src/components/Pages/Keluhan/Table_24.vue
+++ b/src/components/Pages/Keluhan/Table_24.vue
@@ -52,7 +52,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="idUlp" caption="Nama ULP"
                 css-class="custom-table-column" />
         </DxDataGrid>
     </div>
@@ -127,14 +127,14 @@ 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
@@ -150,7 +150,7 @@ const GET_DATA = gql`
       nama_pelapor
       no_laporan
       no_telp_pelapor
-      posko
+      idUlp
       status_akhir
       waktu_recovery
       waktu_response
@@ -163,14 +163,14 @@ const { onResult, onError, loading, refetch } = useQuery(GET_DATA, {
     dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
     minDurasiRecoveryTime: 0,
     maxDurasiRecoveryTime: 0,
-    posko: '',
+    idUlp: '',
     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
     const minDurasiRecoveryTime = params.minDurasiRecoveryTime ? params.minDurasiRecoveryTime : 0
     const maxDurasiRecoveryTime = params.maxDurasiRecoveryTime ? params.maxDurasiRecoveryTime : 0
     refetch({
@@ -178,7 +178,7 @@ const filterData = (params: any) => {
         dateTo: dateValue[1] ? dateValue[1].split('-').reverse().join('-') : new Date().toISOString().slice(0, 10),
         minDurasiRecoveryTime: minDurasiRecoveryTime,
         maxDurasiRecoveryTime: maxDurasiRecoveryTime,
-        posko: posko ? posko.id : "",
+        idUlp: idUlp ? idUlp.id : "",
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
     onResult((queryResult) => {
diff --git a/src/components/Pages/Keluhan/Table_25.vue b/src/components/Pages/Keluhan/Table_25.vue
index 34d5f57..7a3a3e6 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: '',
     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 : "",
         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..94dae7c 100755
--- a/src/components/Pages/Keluhan/Table_26.vue
+++ b/src/components/Pages/Keluhan/Table_26.vue
@@ -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,18 +157,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: '',
     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 : "",
         idUid: uid ? uid.id :0,
         idUp3: up3? up3.id:0})
 
diff --git a/src/components/Pages/Keluhan/Table_27.vue b/src/components/Pages/Keluhan/Table_27.vue
index 5400f45..d7109e6 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: '',
     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 : "",
         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..364367f 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: '',
     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 : "",
         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..b284b46 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: '',
     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 : "",
         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..1c6f626 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 : "",
         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..3da43a6 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 : "",
         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..9820702 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 : "",
     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..91c35bc 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: '',
   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 : "",
     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..666be59 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: '',
   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 : "",
     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..82c7654 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 : "",
         idUid: uid ? uid.id : 0,
         idUp3: up3 ? up3.id : 0
     })
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 4c5b34e..13637ca 100755
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -28,7 +28,7 @@ const selected = ref(data.value[0].id)
 
 computed(() => {
   if (props.selected.id === 0) {
-    selected.value = 0
+    selected.value = props.selected.id
   }
 })
 
@@ -36,7 +36,7 @@ watch(
   () => props.selected,
   (value: any) => {
     if (value.id === 0) {
-      selected.value = 0
+      selected.value = value.id
     }
   }
 )