Update version.json to 0.0.143-vm

package.json

@@ -1 +1 @@
-{"name":"eis","version":"0.0.141-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}
+{"name":"eis","version":"0.0.143-vm","private":true,"scripts":{"dev":"vite","host":"vite --host","tailwind":"tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/style.css --watch","build":"run-p type-check build-only","preview":"vite preview --host","test:unit":"vitest","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","deploy":"node deploy.js"},"dependencies":{"@apollo/client":"^3.8.10","@apollo/link-context":"^2.0.0-beta.3","@flavorly/vanilla-components":"^0.7.65","@headlessui/tailwindcss":"^0.2.0","@headlessui/vue":"^1.7.19","@heroicons/vue":"^2.0.18","@lottiefiles/lottie-player":"^2.0.4","@phosphor-icons/vue":"^2.1.6","@types/qs":"^6.9.12","@types/uuid":"^9.0.8","@types/vue-select":"^3.16.8","@vue/apollo-components":"^4.0.0","@vue/apollo-composable":"^4.0.1","@vue/apollo-option":"^4.0.0","axios":"^1.6.7","devextreme":"23.2.4","devextreme-vue":"23.2.4","docx":"^8.5.0","dotenv":"^16.3.1","encrypt-storage":"^2.12.22","exceljs":"^4.4.0","file-saver":"^2.0.5","graphql":"^16.8.1","graphql-tag":"^2.12.6","jspdf":"^2.5.1","jspdf-autotable":"^3.8.2","pinia":"^2.1.3","qs":"^6.11.2","uuid":"^9.0.1","vue":"^3.3.4","vue-html-to-paper":"^2.0.3","vue-router":"^4.2.2","vue-tailwind-datepicker":"^1.6.1","vue3-star-ratings":"^3.0.5"},"devDependencies":{"@rushstack/eslint-patch":"^1.5.1","@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/container-queries":"^0.1.1","@tailwindcss/forms":"^0.5.7","@tailwindcss/typography":"^0.5.10","@tsconfig/node18":"^2.0.1","@types/file-saver":"^2.0.6","@types/jsdom":"^21.1.1","@types/node":"^18.16.17","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^12.0.0","@vue/test-utils":"^2.3.2","@vue/tsconfig":"^0.4.0","autoprefixer":"^10.4.14","eslint":"^8.39.0","eslint-plugin-vue":"^9.11.0","jsdom":"^22.1.0","npm-run-all":"^4.1.5","postcss":"^8.4.24","prettier":"^3.0.3","tailwindcss":"^3.3.2","typescript":"~5.2.2","vite":"^4.3.9","vitest":"^1.3.1","vue-tsc":"^2.0.5"}}

public/version.json

@@ -1 +1 @@
-{"version":"0.0.141-vm"}
+{"version":"0.0.143-vm"}

src/components/Form/FiltersType/Type1.vue

@@ -41,25 +41,26 @@ const props = defineProps({
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
-const up3 = ref(props.up3)
-const uid = ref(props.uid)
-const posko = ref(props.posko)
 const emit = defineEmits(['update:filters'])
 const data = ref({
-  uid: uid.value,
+  uid: props.uid,
-  up3: up3.value,
+  up3: props.up3,
-  posko: posko.value,
+  posko: props.posko,
   periode: props.periode
 })
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3placeholder }
+  data.value = {
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
   data.value.uid = value
 
   renderUp3.value = true
@@ -71,11 +72,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Posko(value)
-  console.log(itemsPosko)
+  data.value = {
-  posko.value = { id: 0, name: poskoPlaceholder }
+    ...data.value,
-  data.value.up3 = value
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -84,9 +86,11 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {

src/components/Form/FiltersType/Type10.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -16,26 +16,30 @@ import InputNumber from '@/components/Form/InputNumber.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-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,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -46,10 +50,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -58,9 +64,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 onMounted(() => {
   emit('update:filters', data.value)
@@ -83,7 +91,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
 
@@ -91,7 +98,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -103,7 +109,6 @@ onMounted(() => {
         v-if="renderUlp"
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
 
@@ -111,7 +116,6 @@ onMounted(() => {
         v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type11.vue

@@ -6,7 +6,7 @@ interface SlaOption {
   max: string
 }
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -52,9 +52,6 @@ const totalMax = ref('5 Menit')
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-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 isHidden = ref(false)
 
@@ -64,21 +61,28 @@ const setDataMax = (value: any) => (totalMax.value = value)
 const getDataMax = () => totalMax.value
 
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   minTime: getDataMin().split(' ')[0],
   maxTime: getDataMax().split(' ')[0]
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -89,10 +93,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -101,9 +107,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setMin = (value: any) => {
@@ -160,7 +168,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
 
@@ -168,7 +175,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -181,7 +187,6 @@ onMounted(() => {
         @update:selected="setUlp($event)"
         :data="itemsUlp"
         :placeholder="ulpPlaceholder"
-        :selected="ulp"
       />
 
       <Select
@@ -189,7 +194,6 @@ onMounted(() => {
         @update:selected="setUlp($event)"
         :data="itemsUlp"
         :placeholder="ulpPlaceholder"
-        :selected="ulp"
       />
     </div>
 

src/components/Form/FiltersType/Type12.vue

@@ -11,30 +11,34 @@ 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 uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: uppp.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   minDurasiResponseTime: 1,
   maxDurasiResponseTime: 1
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -45,10 +49,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -57,9 +63,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 const triggerInput = ref(false)
 const sla = [

src/components/Form/FiltersType/Type13.vue

@@ -11,30 +11,34 @@ 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 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,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   groupBy: false
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -45,10 +49,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -57,9 +63,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 
   console.log('data.value', data.value)
 }
@@ -85,7 +93,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
 
@@ -93,7 +100,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -104,7 +110,6 @@ onMounted(() => {
         v-if="renderUlp"
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
 
@@ -112,7 +117,6 @@ onMounted(() => {
         v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
     </div>
@@ -122,12 +126,12 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
 
-    <div class="flex flex-col flex-1 space-y-2" v-if="ulp.id == 0">
+    <div class="flex flex-col flex-1 space-y-2" v-if="data.ulp.id == 0">
       <label class="filter-input-label"
         >Group By
         {{
-          uid.id != 0
+          data.uid.id != 0
-            ? up3.id != 0
+            ? data.up3.id != 0
               ? 'Unit Layanan Pelanggan/Posko'
               : 'Unit Pelaksanaan Pelayanan Pelanggan'
             : 'Kode Unit Distribusi'

src/components/Form/FiltersType/Type14.vue

@@ -10,28 +10,31 @@ import {
   itemsUp3,
   itemsPosko
 } from './reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Distribusi/Wilayah'
 const up3Placeholder = 'Semua Area'
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
-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'])
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: up3Placeholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: ''
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -42,10 +45,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -54,9 +59,11 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 onMounted(() => {
   emit('update:filters', data.value)
@@ -68,12 +75,7 @@ onMounted(() => {
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Distribusi/Wilayah:</label>
-      <Select
+      <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
-        :data="itemsUid"
-        @update:selected="setUid($event)"
-        :placeholder="uidPlaceholder"
-        :selected="uid"
-      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -82,14 +84,12 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
       <Select
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -100,14 +100,12 @@ onMounted(() => {
         v-if="renderPosko"
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
       <Select
         v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type16.vue

@@ -18,20 +18,17 @@ const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
 const mediaPlaceholder = 'Semua Media'
-const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
 const media = ref({ id: '', name: mediaPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   media: media.value,
   periode: ''
 })
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
@@ -39,10 +36,13 @@ const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -53,10 +53,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -65,14 +67,19 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 const setMedia = (value: any) => {
   media.value = value
-  data.value.media = value
+  data.value = {
+    ...data.value,
+    media: value
+  }
 }
 
 onMounted(() => {
@@ -87,12 +94,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select
+      <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
-        :data="itemsUid"
-        @update:selected="setUid($event)"
-        :placeholder="uidPlaceholder"
-        :selected="uid"
-      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -103,7 +105,6 @@ onMounted(() => {
         :data="itemsUp3"
         @update:selected="setUp3($event)"
         :placeholder="up3Placeholder"
-        :selected="up3"
       />
 
       <Select
@@ -111,7 +112,6 @@ onMounted(() => {
         :data="itemsUp3"
         @update:selected="setUp3($event)"
         :placeholder="up3Placeholder"
-        :selected="up3"
       />
     </div>
 
@@ -123,7 +123,6 @@ onMounted(() => {
         :data="itemsPosko"
         @update:selected="setPosko($event)"
         :placeholder="poskoPlaceholder"
-        :selected="posko"
       />
 
       <Select
@@ -131,7 +130,6 @@ onMounted(() => {
         :data="itemsPosko"
         @update:selected="setPosko($event)"
         :placeholder="poskoPlaceholder"
-        :selected="posko"
       />
     </div>
 

src/components/Form/FiltersType/Type17.vue

@@ -18,10 +18,6 @@ const ulpPlaceholder = 'Pilih Rayon'
 const statusPlaceholder = 'Pilih Status'
 const slaPlaceholder = 'Pilih Durasi SLA'
 
-const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder })
-
 const keyword = ref('')
 const reportType = [
   { id: 1, title: 'No Lapor' },
@@ -65,9 +61,9 @@ const sla = ref(slaType[0])
 const emit = defineEmits(['update:filters'])
 
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   status: status.value,
   keyword: keyword.value,
   searchBy: searchBy.value,
@@ -77,15 +73,21 @@ const data = ref({
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: {
+      id: 0,
+      name: up3Placeholder
+    },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -96,10 +98,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -108,9 +112,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setStatus = (value: any) => {
@@ -158,28 +164,24 @@ onMounted(() => {
             v-if="renderUp3"
             @update:selected="setUp3($event)"
             :data="itemsUp3"
-            :selected="up3"
             :placeholder="up3Placeholder"
           />
           <Select
             v-else
             @update:selected="setUp3($event)"
             :data="itemsUp3"
-            :selected="up3"
             :placeholder="up3Placeholder"
           />
           <Select
             v-if="renderUlp"
             @update:selected="setUlp($event)"
             :data="itemsUlp"
-            :selected="ulp"
             :placeholder="ulpPlaceholder"
           />
           <Select
             v-else
             @update:selected="setUlp($event)"
             :data="itemsUlp"
-            :selected="ulp"
             :placeholder="ulpPlaceholder"
           />
         </div>

src/components/Form/FiltersType/Type18.vue

@@ -17,9 +17,6 @@ import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-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'])
 const jenisTransakasi = [
   { id: 1, value: 'Koreksi Transaksi Individual', label: 'Koreksi Transaksi Individual' },
@@ -28,9 +25,9 @@ const jenisTransakasi = [
   { id: 4, value: 'Koreksi Kode Gangguan dan Anev', label: 'Koreksi Kode Gangguan dan Anev' }
 ]
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: '',
   jenisTransaksi: [],
   group: 1
@@ -38,15 +35,18 @@ const data = ref({
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -57,10 +57,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -69,13 +71,18 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 const setTags = (value: any) => {
-  data.value.jenisTransaksi = value
+  data.value = {
+    ...data.value,
+    jenisTransaksi: value
+  }
 }
 
 onMounted(() => {
@@ -103,7 +110,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
       />
 
@@ -111,7 +117,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
       />
     </div>
@@ -123,7 +128,6 @@ onMounted(() => {
         v-if="renderPosko"
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         placeholder="Semua Posko"
       />
 
@@ -131,7 +135,6 @@ onMounted(() => {
         v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         placeholder="Semua Posko"
       />
     </div>

src/components/Form/FiltersType/Type2.vue

@@ -12,7 +12,7 @@ import {
   months,
   years
 } from './reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { getMonthName } from '@/utils/texts'
 
 const renderUid = ref(false)
@@ -27,12 +27,8 @@ const bulanPlaceholder = getMonthName(new Date().getMonth() + 1)
 const tahunPlaceholder = new Date().getFullYear().toString()
 const bulanSelected = new Date().getMonth() + 1
 const tahunSelected = new Date().getFullYear()
-const uppp = ref({ id: 0, name: up3Placholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder })
 const bulan = ref({ id: bulanSelected, name: bulanPlaceholder })
 const tahun = ref({ id: tahunSelected, name: tahunPlaceholder })
-const regional = ref({ id: 0, name: regionalPlaceholder })
 const emit = defineEmits(['update:filters'])
 // Find index of January
 const bulanIndex = months.findIndex((month) => month.id === bulan.value.id)
@@ -47,22 +43,31 @@ if (tahunIndex !== -1) {
 }
 
 const data = ref({
-  regional: regional.value,
+  regional: { id: 0, name: regionalPlaceholder },
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: uppp.value,
+  up3: { id: 0, name: up3Placholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   bulan: bulan.value,
   tahun: tahun.value
 })
 
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const setRegional = (value: any) => {
-  regional.value = value
+  console.log(value)
+
   fetchUid()
-  // harusnya fetchUidWithRegional(value);
   selectedUid(value)
-  uid.value = { id: 0, name: uidPlaceholder }
+  data.value = {
-  data.value.regional = value
+    ...data.value,
+    regional: value,
+    uid: { id: 0, name: uidPlaceholder },
+    up3: { id: 0, name: up3Placholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUid.value = true
   renderUp3.value = true
@@ -75,10 +80,13 @@ const setRegional = (value: any) => {
 }
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: up3Placholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -89,10 +97,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -101,9 +111,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUp3Ulp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setMonth = (value: any) => {
@@ -142,7 +154,6 @@ onMounted(() => {
         v-if="renderUid"
         @update:selected="setUid($event)"
         :data="itemsUid"
-        :selected="uid"
         :placeholder="uidPlaceholder"
       />
 
@@ -150,7 +161,6 @@ onMounted(() => {
         v-else
         @update:selected="setUid($event)"
         :data="itemsUid"
-        :selected="uid"
         :placeholder="uidPlaceholder"
       />
     </div>
@@ -161,7 +171,6 @@ onMounted(() => {
       <Select
         v-if="renderUp3"
         @update:selected="setUp3($event)"
-        :selected="uppp"
         :data="itemsUp3"
         :placeholder="up3Placholder"
       />
@@ -169,7 +178,6 @@ onMounted(() => {
       <Select
         v-else
         @update:selected="setUp3($event)"
-        :selected="uppp"
         :data="itemsUp3"
         :placeholder="up3Placholder"
       />
@@ -182,7 +190,6 @@ onMounted(() => {
         v-if="renderUlp"
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
 
@@ -190,7 +197,6 @@ onMounted(() => {
         v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type3.vue

@@ -18,27 +18,27 @@ const renderUlp = ref(false)
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
-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,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: ''
 })
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -49,10 +49,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -61,9 +63,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 onMounted(() => {
@@ -87,14 +91,12 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
       <Select
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -106,14 +108,12 @@ onMounted(() => {
         v-if="renderUlp"
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
       <Select
         v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type4.vue

@@ -10,13 +10,10 @@ import {
   itemsUlp,
   fetchUid
 } from './reference'
-import { computed, onMounted, ref } from 'vue'
+import { computed, 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 uid = ref({ id: 0, name: uidPlaceholder })
-const ulp = ref({ id: 0, name: ulpPlaceholder })
 const emit = defineEmits(['update:filters'])
 const props = defineProps({
   jenisLaporan: {
@@ -33,17 +30,25 @@ const renderUlp = ref(false)
 
 const jenisLaporan = ref(computed(() => props.jenisLaporan))
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: uppp.value,
+  up3: { id: 0, name: up3Placeholder },
-  ulp: ulp.value,
+  ulp: { id: 0, name: ulpPlaceholder },
   periode: '',
   jenisLaporan: jenisLaporan.value[0]
 })
+
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUp3.value = true
   renderUlp.value = true
@@ -54,10 +59,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
 
   renderUlp.value = true
   setTimeout(() => {
@@ -66,9 +73,11 @@ const setUp3 = (value: any) => {
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 onMounted(() => {

src/components/Form/FiltersType/Type5.vue

@@ -15,28 +15,27 @@ import DatePicker from '@/components/DatePicker.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 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: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: uppp.value,
+  up3: { id: 0, name: uppPlaceholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: ''
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
-watch(data.value, (value) => {
-  emit('update:filters', value)
-})
-
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: uppPlaceholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -47,10 +46,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -59,9 +60,11 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -75,12 +78,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select
+      <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
-        :data="itemsUid"
-        @update:selected="setUid($event)"
-        :placeholder="uidPlaceholder"
-        :selected="uid"
-      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -90,14 +88,12 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="uppp"
         :placeholder="uppPlaceholder"
       />
       <Select
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="uppp"
         :placeholder="uppPlaceholder"
       />
     </div>
@@ -109,14 +105,12 @@ onMounted(() => {
         v-if="renderPosko"
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
       <Select
         v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type6.vue

@@ -11,32 +11,35 @@ import {
   itemsUp3,
   itemsPosko
 } from './reference'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const emit = defineEmits(['update:filters'])
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: '',
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
 
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -47,10 +50,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -59,9 +64,11 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -85,14 +92,12 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
       <Select
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -104,7 +109,6 @@ onMounted(() => {
         v-if="renderPosko"
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
 
@@ -112,7 +116,6 @@ onMounted(() => {
         v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type7.vue

@@ -50,9 +50,6 @@ const emit = defineEmits(['update:filters'])
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
-const up3 = ref({ id: 0, name: up3Placeholder })
-const uid = ref({ id: 0, name: uidPlaceholder })
-const posko = ref({ id: 0, name: poskoPlaceholder })
 const isHidden = ref(false)
 const totalMin = ref('1 Menit')
 const totalMax = ref('5 Menit')
@@ -64,19 +61,25 @@ const getDataMax = () => totalMax.value
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: up3.value,
+  up3: { id: 0, name: up3Placeholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: '',
   minTime: getDataMin().split(' ')[0],
   maxTime: getDataMax().split(' ')[0]
 })
+watch(data, (value) => {
+  emit('update:filters', value)
+})
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  up3.value = { id: 0, name: up3Placeholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: up3Placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -87,10 +90,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -99,9 +104,11 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 const setMin = (value: any) => {
@@ -135,9 +142,6 @@ const changeDuration = (value: any) => {
     isHidden.value = true
   }
 }
-watch(data, (newValue) => {
-  emit('update:filters', newValue)
-})
 
 onMounted(() => {
   fetchUid()
@@ -160,7 +164,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
 
@@ -168,7 +171,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -180,7 +182,6 @@ onMounted(() => {
         v-if="renderPosko"
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
 
@@ -188,7 +189,6 @@ onMounted(() => {
         v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type8.vue

@@ -8,28 +8,27 @@ import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 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: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: uppp.value,
+  up3: { id: 0, name: uppPlaceholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: ''
 })
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
 const renderUp3 = ref(false)
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: uppPlaceholder }
+  }
 
   renderUp3.value = true
   setTimeout(() => {
@@ -38,8 +37,10 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value
+  }
 }
 
 onMounted(() => {
@@ -63,7 +64,6 @@ onMounted(() => {
         v-if="renderUp3"
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="uppp"
         :placeholder="uppPlaceholder"
       />
 
@@ -71,7 +71,6 @@ onMounted(() => {
         v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="uppp"
         :placeholder="uppPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type9.vue

@@ -17,29 +17,29 @@ import {
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 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: 0, name: poskoPlaceholder })
 const emit = defineEmits(['update:filters'])
 const data = ref({
-  uid: uid.value,
+  uid: { id: 0, name: uidPlaceholder },
-  up3: uppp.value,
+  up3: { id: 0, name: uppPlaceholder },
-  posko: posko.value,
+  posko: { id: 0, name: poskoPlaceholder },
   periode: '',
   groupBy: false
 })
 const renderUp3 = ref(false)
 const renderPosko = ref(false)
 
-watch(data.value, (value) => {
+watch(data, (value) => {
   emit('update:filters', value)
 })
 
 const setUid = (value: any) => {
-  uid.value = value
   selectedUid(value)
-  uppp.value = { id: 0, name: uppPlaceholder }
+  data.value = {
-  data.value.uid = value
+    ...data.value,
+    uid: value,
+    up3: { id: 0, name: uppPlaceholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderUp3.value = true
   renderPosko.value = true
@@ -50,10 +50,12 @@ const setUid = (value: any) => {
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
   selectedUp3Posko(value)
-  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
 
   renderPosko.value = true
   setTimeout(() => {
@@ -62,9 +64,11 @@ const setUp3 = (value: any) => {
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -89,7 +93,6 @@ onMounted(() => {
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :placeholder="uppPlaceholder"
-        :selected="uppp"
       />
 
       <Select
@@ -97,7 +100,6 @@ onMounted(() => {
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :placeholder="uppPlaceholder"
-        :selected="uppp"
       />
     </div>
 
@@ -109,7 +111,6 @@ onMounted(() => {
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :placeholder="poskoPlaceholder"
-        :selected="posko"
       />
 
       <Select
@@ -117,7 +118,6 @@ onMounted(() => {
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :placeholder="poskoPlaceholder"
-        :selected="posko"
       />
     </div>
 
@@ -127,12 +127,12 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
 
-    <div class="flex flex-col flex-1 space-y-2" v-if="posko.id == 0">
+    <div class="flex flex-col flex-1 space-y-2" v-if="data.posko.id == 0">
       <label class="filter-input-label"
         >Group By
         {{
-          uid.id != 0
+          data.uid.id != 0
-            ? uppp.id != 0
+            ? data.up3.id != 0
               ? 'Unit Layanan Pelanggan/Posko'
               : 'Unit Pelaksanaan Pelayanan Pelanggan'
             : 'Kode Unit Distribusi'

src/components/Pages/Monalisa/Gangguan/Rekap/MonalisaGR_DispatchingTimeGangguan.vue

@@ -1319,6 +1319,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const { regional, ulp, uid, up3, bulan, tahun } = params
+  console.log(params)
 
   var groupList: any[] = [
     {
@@ -1361,7 +1362,7 @@ const filterData = async (params: any) => {
   grouping.value = groupList
 
   const query = {
-    namaRegional: regional.name == 'Semua Regional' ? '' : regional.name,
+    namaRegional: regional.id == 0 ? '' : regional.name,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,