diff --git a/package.json b/package.json
index 338827b..b60c23a 100755
--- a/package.json
+++ b/package.json
@@ -1 +1 @@
-{"name":"eis","version":"0.0.138-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"}}
\ No newline at end of file
+{"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"}}
\ No newline at end of file
diff --git a/public/version.json b/public/version.json
index f5d6f51..0134d5c 100644
--- a/public/version.json
+++ b/public/version.json
@@ -1 +1 @@
-{"version":"0.0.138-vm"}
\ No newline at end of file
+{"version":"0.0.141-vm"}
\ No newline at end of file
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 306a726..d520386 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -38,6 +38,9 @@ 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)
@@ -58,6 +61,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   up3.value = { id: 0, name: up3placeholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 100)
 }
 
 const setUp3 = (value: any) => {
@@ -66,6 +76,11 @@ const setUp3 = (value: any) => {
   console.log(itemsPosko)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 100)
 }
 
 const setPosko = (value: any) => {
@@ -92,6 +107,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :selected="up3"
@@ -103,6 +127,15 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        :placeholder="poskoPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :selected="posko"
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index 002bd4f..038df88 100755
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -28,12 +28,21 @@ const data = ref({
   minJmlLapor: 1,
   maxJmlLapor: 1
 })
+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.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -41,6 +50,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -65,13 +79,41 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
-      <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
+      <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>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -84,11 +126,16 @@ onMounted(() => {
       <label class="filter-input-label">Lapor Ulang:</label>
 
       <div class="flex flex-1 justify-between gap-x-1.5">
-        <InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" class="flex flex-1" />
+        <InputNumber
+          @update:time-value="(value) => (data.minJmlLapor = value)"
+          class="flex flex-1"
+        />
         <small class="flex items-center">s/d</small>
-        <InputNumber @update:time-value="(value) => (data.maxJmlLapor = value)" class="flex flex-1" />
+        <InputNumber
+          @update:time-value="(value) => (data.maxJmlLapor = value)"
+          class="flex flex-1"
+        />
       </div>
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 1fc8135..c6a9aa9 100755
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -71,12 +71,21 @@ const data = ref({
   minTime: getDataMin().split(' ')[0],
   maxTime: getDataMax().split(' ')[0]
 })
+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.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -84,6 +93,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -143,6 +157,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3Placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :selected="up3"
@@ -154,6 +177,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
       <Select
+        v-if="renderUlp"
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+        :selected="ulp"
+      />
+
+      <Select
+        v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
         :placeholder="ulpPlaceholder"
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
index fc052e2..56fe476 100755
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -1,15 +1,23 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
-import InputWithSuffix from '../InputWithSuffix.vue';
-import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
-import { onMounted, ref } 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 });
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithSuffix from '../InputWithSuffix.vue'
+import {
+  selectedUid,
+  selectedUp3Ulp,
+  selectedUlp,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsUlp
+} from './reference'
+import { onMounted, ref } 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,
@@ -19,25 +27,40 @@ const data = ref({
   minDurasiResponseTime: 1,
   maxDurasiResponseTime: 1
 })
+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.uid = value;
-};
+  uid.value = value
+  selectedUid(value)
+  uppp.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
+}
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
-  selectedUp3Ulp(value);
-  ulp.value = { id: 0, name: ulpPlaceholder };
-  data.value.up3 = value;
-};
+  uppp.value = value
+  selectedUp3Ulp(value)
+  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value.up3 = value
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
-  selectedUlp(value);
-  data.value.ulp = value;
-};
+  ulp.value = value
+  selectedUlp(value)
+  data.value.ulp = value
+}
 const triggerInput = ref(false)
 const sla = [
   {
@@ -52,7 +75,7 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-];
+]
 const changeDuration = (value: any) => {
   if (value.id === 0) {
     console.log('Durasi Menit')
@@ -70,7 +93,6 @@ const changeDuration = (value: any) => {
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
 }
 onMounted(() => {
   emit('update:filters', data.value)
@@ -89,19 +111,41 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+      <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
+      <Select
+        v-else
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
-      <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+      <Select
+        v-if="renderUlp"
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+      />
+      <Select
+        v-else
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
 
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -111,14 +155,21 @@ onMounted(() => {
         <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
 
         <div class="flex flex-1 justify-between gap-x-1.5">
-          <InputWithSuffix @update:minute-value="(value: any) => data.minDurasiResponseTime = value" @value="data.minDurasiResponseTime" :disabled=triggerInput
-            class="flex flex-1" />
+          <InputWithSuffix
+            @update:minute-value="(value: any) => (data.minDurasiResponseTime = value)"
+            @value="data.minDurasiResponseTime"
+            :disabled="triggerInput"
+            class="flex flex-1"
+          />
           <small class="flex items-center">s/d</small>
-          <InputWithSuffix @update:minute-value="(value: any) => data.maxDurasiResponseTime = value" @value="data.maxDurasiResponseTime"
-            :disabled="triggerInput" class="flex flex-1" />
+          <InputWithSuffix
+            @update:minute-value="(value: any) => (data.maxDurasiResponseTime = value)"
+            @value="data.maxDurasiResponseTime"
+            :disabled="triggerInput"
+            class="flex flex-1"
+          />
         </div>
       </div>
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 3ac6705..be4223c 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -27,12 +27,21 @@ const data = ref({
   periode: '',
   groupBy: false
 })
+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.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -40,6 +49,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -68,6 +82,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3Placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :selected="up3"
@@ -78,6 +101,15 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
       <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"
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
index 1840bbf..e7dd7d5 100755
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -1,72 +1,121 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
-import { onMounted, ref } 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 });
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import {
+  selectedUid,
+  selectedUp3Posko,
+  selectedPosko,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko
+} from './reference'
+import { onMounted, ref } 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,
   up3: up3.value,
   posko: posko.value,
-  periode: '',
+  periode: ''
 })
+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.uid = value;
-};
+  uid.value = value
+  selectedUid(value)
+  up3.value = { id: 0, name: up3Placeholder }
+  data.value.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
-  selectedUp3Posko(value);
-  posko.value = { id: 0, name: poskoPlaceholder };
-  data.value.up3 = value;
-};
+  up3.value = value
+  selectedUp3Posko(value)
+  posko.value = { id: 0, name: poskoPlaceholder }
+  data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
+}
 
 const setPosko = (value: any) => {
-  posko.value = value;
-  selectedPosko(value);
-  data.value.posko = value;
-};
+  posko.value = value
+  selectedPosko(value)
+  data.value.posko = value
+}
 onMounted(() => {
   emit('update:filters', data.value)
   fetchUid()
 })
 </script>
 
-
 <template>
   <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 :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
+      <Select
+        :data="itemsUid"
+        @update:selected="setUid($event)"
+        :placeholder="uidPlaceholder"
+        :selected="uid"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Area:</label>
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
-
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
-      <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
-        :placeholder="poskoPlaceholder" />
-
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
 
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index 2f0f4e8..f74489a 100755
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
   selectedUp3Posko,
@@ -11,8 +11,8 @@ import {
   itemsUp3,
   itemsPosko,
   itemsMedia
-} from './reference';
-import { onMounted, ref, watch } from 'vue';
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -35,11 +35,21 @@ watch(data.value, (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.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -47,6 +57,11 @@ const setUp3 = (value: any) => {
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
@@ -72,27 +87,63 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
+      <Select
+        :data="itemsUid"
+        @update:selected="setUid($event)"
+        :placeholder="uidPlaceholder"
+        :selected="uid"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select :data="itemsUp3" @update:selected="setUp3($event)" :placeholder="up3Placeholder" :selected="up3" />
+      <Select
+        v-if="renderUp3"
+        :data="itemsUp3"
+        @update:selected="setUp3($event)"
+        :placeholder="up3Placeholder"
+        :selected="up3"
+      />
+
+      <Select
+        v-else
+        :data="itemsUp3"
+        @update:selected="setUp3($event)"
+        :placeholder="up3Placeholder"
+        :selected="up3"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select :data="itemsPosko" @update:selected="setPosko($event)" :placeholder="poskoPlaceholder"
-        :selected="posko" />
+      <Select
+        v-if="renderPosko"
+        :data="itemsPosko"
+        @update:selected="setPosko($event)"
+        :placeholder="poskoPlaceholder"
+        :selected="posko"
+      />
+
+      <Select
+        v-else
+        :data="itemsPosko"
+        @update:selected="setPosko($event)"
+        :placeholder="poskoPlaceholder"
+        :selected="posko"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Media:</label>
 
-      <Select :selected="media" @update:selected="setMedia($event)" :placeholder="mediaPlaceholder"
-        :data="itemsMedia" />
+      <Select
+        :selected="media"
+        @update:selected="setMedia($event)"
+        :placeholder="mediaPlaceholder"
+        :data="itemsMedia"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -101,5 +152,4 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
index 9a8f212..9c54423 100755
--- a/src/components/Form/FiltersType/Type17.vue
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -74,6 +74,8 @@ const data = ref({
   sla: sla.value,
   periode: ''
 })
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
 
 watch(data.value, (value) => {
   emit('update:filters', value)
@@ -84,6 +86,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   up3.value = { id: 0, name: up3Placeholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -91,7 +100,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
-  console.log(itemsUlp)
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -142,12 +155,28 @@ onMounted(() => {
 
         <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
           <Select
+            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"
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index a7ba6e3..31104da 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -35,6 +35,8 @@ const data = ref({
   jenisTransaksi: [],
   group: 1
 })
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
 
 watch(data.value, (value) => {
   emit('update:filters', value)
@@ -45,6 +47,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   up3.value = { id: 0, name: up3Placeholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -52,6 +61,11 @@ const setUp3 = (value: any) => {
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
@@ -86,6 +100,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :selected="up3"
@@ -97,6 +120,15 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        placeholder="Semua Posko"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :selected="posko"
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index 4f74bdb..e7d8a14 100755
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -15,6 +15,10 @@ import {
 import { onMounted, ref } from 'vue'
 import { getMonthName } from '@/utils/texts'
 
+const renderUid = ref(false)
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -59,6 +63,15 @@ const setRegional = (value: any) => {
   selectedUid(value)
   uid.value = { id: 0, name: uidPlaceholder }
   data.value.regional = value
+
+  renderUid.value = true
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUid.value = false
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUid = (value: any) => {
@@ -66,6 +79,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   uppp.value = { id: 0, name: up3Placholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -73,6 +93,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -114,6 +139,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
       <Select
+        v-if="renderUid"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :selected="uid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUid($event)"
         :data="itemsUid"
         :selected="uid"
@@ -125,6 +159,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :selected="uppp"
+        :data="itemsUp3"
+        :placeholder="up3Placholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :selected="uppp"
         :data="itemsUp3"
@@ -136,6 +179,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
       <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"
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index 21e9f7f..aef927c 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -9,8 +9,11 @@ import {
   itemsUid,
   itemsUp3,
   itemsUlp
-} from './reference';
-import { onMounted, ref, watch } from 'vue';
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -36,6 +39,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   up3.value = { id: 0, name: up3Placeholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -43,7 +53,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
-  console.log(itemsUlp)
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -69,13 +83,39 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
-      <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
+      <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>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -84,5 +124,4 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index 086a1a3..73187cc 100755
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -28,6 +28,8 @@ const props = defineProps({
     ]
   }
 })
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
 
 const jenisLaporan = ref(computed(() => props.jenisLaporan))
 const data = ref({
@@ -42,6 +44,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   uppp.value = { id: 0, name: up3Placeholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -49,6 +58,11 @@ const setUp3 = (value: any) => {
   selectedUp3Ulp(value)
   ulp.value = { id: 0, name: ulpPlaceholder }
   data.value.up3 = value
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
@@ -74,13 +88,35 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :placeholder="up3Placeholder" />
+      <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
+      <Select
+        v-else
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
-      <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" />
+      <Select
+        v-if="renderUlp"
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+      />
+      <Select
+        v-else
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index 1e2a93c..539b0fe 100755
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
   selectedUp3Posko,
@@ -8,10 +8,10 @@ import {
   itemsUid,
   itemsUp3,
   itemsPosko
-} from './reference';
+} from './reference'
 
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -25,6 +25,8 @@ const data = ref({
   posko: posko.value,
   periode: ''
 })
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
 
 watch(data.value, (value) => {
   emit('update:filters', value)
@@ -35,6 +37,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   uppp.value = { id: 0, name: uppPlaceholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -42,6 +51,11 @@ const setUp3 = (value: any) => {
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
@@ -61,26 +75,55 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
+      <Select
+        :data="itemsUid"
+        @update:selected="setUid($event)"
+        :placeholder="uidPlaceholder"
+        :selected="uid"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
-        :placeholder="poskoPlaceholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Periode Tanggal:</label>
-      <DatePicker @update:date-value="(value) => data.periode = value" />
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 525d365..0be0c9f 100755
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -29,11 +29,21 @@ const data = ref({
   maxJmlLapor: 1
 })
 
+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.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -41,6 +51,11 @@ const setUp3 = (value: any) => {
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
@@ -66,14 +81,40 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
-        :placeholder="poskoPlaceholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -86,13 +127,18 @@ onMounted(() => {
       <label class="filter-input-label">Lapor Ulang:</label>
 
       <div class="flex flex-1 justify-between gap-x-1.5">
-        <InputNumber :value="data.minJmlLapor" @update:time-value="(value) => (data.minJmlLapor = value)"
-          class="flex flex-1" />
+        <InputNumber
+          :value="data.minJmlLapor"
+          @update:time-value="(value) => (data.minJmlLapor = value)"
+          class="flex flex-1"
+        />
         <small class="flex items-center">s/d</small>
-        <InputNumber :value="data.maxJmlLapor" @update:time-value="(value) => (data.maxJmlLapor = value)"
-          class="flex flex-1" />
+        <InputNumber
+          :value="data.maxJmlLapor"
+          @update:time-value="(value) => (data.maxJmlLapor = value)"
+          class="flex flex-1"
+        />
       </div>
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index e32f770..a90bf8c 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -61,7 +61,8 @@ const setDataMin = (value: any) => (totalMin.value = value)
 const getDataMin = () => totalMin.value
 const setDataMax = (value: any) => (totalMax.value = value)
 const getDataMax = () => totalMax.value
-
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
 const data = ref({
   uid: uid.value,
   up3: up3.value,
@@ -76,6 +77,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   up3.value = { id: 0, name: up3Placeholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -83,6 +91,11 @@ const setUp3 = (value: any) => {
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
@@ -144,6 +157,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :selected="up3"
+        :placeholder="up3Placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :selected="up3"
@@ -155,6 +177,15 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :selected="posko"
+        :placeholder="poskoPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :selected="posko"
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index 937385d..c88fc5c 100755
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue';
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
 
-import { onMounted, ref, watch } from 'vue';
-import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference';
+import { onMounted, ref, watch } from 'vue'
+import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -23,11 +23,18 @@ watch(data.value, (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.uid = value
+
+  renderUp3.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -52,7 +59,21 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="uppp" :placeholder="uppPlaceholder" />
+      <Select
+        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>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -61,5 +82,4 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index 190f3ac..cf34983 100755
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -28,6 +28,8 @@ const data = ref({
   periode: '',
   groupBy: false
 })
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
 
 watch(data.value, (value) => {
   emit('update:filters', value)
@@ -38,6 +40,13 @@ const setUid = (value: any) => {
   selectedUid(value)
   uppp.value = { id: 0, name: uppPlaceholder }
   data.value.uid = value
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
@@ -45,6 +54,11 @@ const setUp3 = (value: any) => {
   selectedUp3Posko(value)
   posko.value = { id: 0, name: poskoPlaceholder }
   data.value.up3 = value
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
@@ -71,6 +85,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="uppPlaceholder"
+        :selected="uppp"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :placeholder="uppPlaceholder"
@@ -82,6 +105,15 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+        :selected="posko"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :placeholder="poskoPlaceholder"
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index 19e9d39..19e73aa 100755
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -53,6 +53,9 @@ const fetchMedia = () => {
 const fetchUidByRegional = async (regional: number) => {
   if (regional == 0) {
     itemsUid.value = []
+    itemsUp3.value = []
+    itemsPosko.value = []
+    itemsUlp.value = []
   } else {
     try {
       const res = await getUidRegional(regional)
@@ -154,15 +157,22 @@ const formatWaktu = (durasiDetik: any): string => {
 
 const selectedUid = (value: any) => {
   fetchDataUp3(value.id)
+  itemsUp3.value = []
+  itemsPosko.value = []
+  itemsUlp.value = []
 }
 const selectedUp3Posko = (value: any) => {
   if (value.id != 0) {
     fetchDataPosko(value.id)
+  } else {
+    itemsPosko.value = []
   }
 }
 const selectedUp3Ulp = (value: any) => {
   if (value.id != 0) {
     fetchDataUlp(value.id)
+  } else {
+    itemsUlp.value = []
   }
 }
 const selectedPosko = (value: any) => {
diff --git a/src/components/Select.vue b/src/components/Select.vue
index c21628f..b0e35d9 100755
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { RichSelect } from '@flavorly/vanilla-components'
+import { ref, computed, watch } from 'vue';
+import { RichSelect } from '@flavorly/vanilla-components';
 
 const props = defineProps({
   placeholder: {
@@ -27,12 +27,10 @@ const data = computed(() =>
 )
 const selected = ref(data.value[props.indexSelected].id)
 
-// watch(
-//   () => props.selected,
-//   (value: any) => {
-//     selected.value = value.id
-//   }
-// )
+watch(props.selected.id, (value: any) => {
+  console.log('id has changed', value)
+  selected.value = value
+})
 </script>
 
 <template>