Merge branch 'dev-defuj' of github.com:defuj/eis into dev-bagus

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"}}
+{"name":"eis","version":"0.0.144-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.138-vm"}
+{"version":"0.0.144-vm"}

src/components/Form/FiltersType/Type1.vue

@@ -38,40 +38,59 @@ const props = defineProps({
   }
 })
 
-const up3 = ref(props.up3)
+const renderUp3 = ref(false)
-const uid = ref(props.uid)
+const renderPosko = ref(false)
-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
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 100)
 }
 
 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(() => {
+    renderPosko.value = false
+  }, 100)
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -92,6 +111,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 +131,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"

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,37 +16,59 @@ 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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 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(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 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)
@@ -65,13 +87,37 @@ 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"
+        :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" :selected="ulp" :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">
@@ -84,11 +130,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>

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,32 +61,57 @@ 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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 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(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setMin = (value: any) => {
@@ -143,9 +165,16 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -154,10 +183,17 @@ onMounted(() => {
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
       <Select
+        v-if="renderUlp"
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
         :placeholder="ulpPlaceholder"
-        :selected="ulp"
       />
     </div>
 

src/components/Form/FiltersType/Type12.vue

@@ -1,43 +1,74 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
-import InputWithSuffix from '../InputWithSuffix.vue';
+import InputWithSuffix from '../InputWithSuffix.vue'
-import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import {
-import { onMounted, ref } from 'vue';
+  selectedUid,
-const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
+  selectedUp3Ulp,
-const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
+  selectedUlp,
-const ulpPlaceholder = 'Semua Unit Layanan Pelanggan';
+  fetchUid,
-const uppp = ref({ id: 0, name: up3Placeholder });
+  itemsUid,
-const uid = ref({ id: 0, name: uidPlaceholder });
+  itemsUp3,
-const ulp = ref({ id: 0, name: ulpPlaceholder });
+  itemsUlp
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
+const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
 const 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)
-  selectedUid(value);
+  data.value = {
-  uppp.value = { id: 0, name: up3Placeholder };
+    ...data.value,
-  data.value.uid = value;
+    uid: value,
-};
+    up3: { id: 0, name: up3Placeholder },
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
+
+  renderUp3.value = true
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
+}
 
 const setUp3 = (value: any) => {
-  uppp.value = value;
+  selectedUp3Ulp(value)
-  selectedUp3Ulp(value);
+  data.value = {
-  ulp.value = { id: 0, name: ulpPlaceholder };
+    ...data.value,
-  data.value.up3 = value;
+    up3: value,
-};
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
+}
 
 const setUlp = (value: any) => {
-  ulp.value = value;
+  selectedUlp(value)
-  selectedUlp(value);
+  data.value = {
-  data.value.ulp = value;
+    ...data.value,
-};
+    ulp: value
+  }
+}
 const triggerInput = ref(false)
 const sla = [
   {
@@ -52,7 +83,7 @@ const sla = [
     id: 2,
     name: 'Melebihi SLA (> 45 menit)'
   }
-];
+]
 const changeDuration = (value: any) => {
   if (value.id === 0) {
     console.log('Durasi Menit')
@@ -70,7 +101,6 @@ const changeDuration = (value: any) => {
     triggerInput.value = true
     console.log('Melebihi SLA (> 45 menit)')
   }
-
 }
 onMounted(() => {
   emit('update:filters', data.value)
@@ -89,19 +119,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 +163,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
+          <InputWithSuffix
-            class="flex flex-1" />
+            @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"
+          <InputWithSuffix
-            :disabled="triggerInput" class="flex flex-1" />
+            @update:minute-value="(value: any) => (data.maxDurasiResponseTime = value)"
+            @value="data.maxDurasiResponseTime"
+            :disabled="triggerInput"
+            class="flex flex-1"
+          />
         </div>
       </div>
     </div>
   </div>
-
 </template>

src/components/Form/FiltersType/Type13.vue

@@ -11,41 +11,63 @@ 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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 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(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 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)
 }
@@ -68,9 +90,16 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -78,9 +107,16 @@ 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"
+        :placeholder="ulpPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
     </div>
@@ -90,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

@@ -1,72 +1,119 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
-import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
+import {
-import { onMounted, ref } from 'vue';
+  selectedUid,
-const uidPlaceholder = 'Semua Distribusi/Wilayah';
+  selectedUp3Posko,
-const up3Placeholder = 'Semua Area';
+  selectedPosko,
-const poskoPlaceholder = 'Semua Unit Layanan Pelanggan';
+  fetchUid,
-const up3 = ref({ id: 0, name: up3Placeholder });
+  itemsUid,
-const uid = ref({ id: 0, name: uidPlaceholder });
+  itemsUp3,
-const posko = ref({ id: 0, name: poskoPlaceholder });
+  itemsPosko
+} from './reference'
+import { onMounted, ref, watch } from 'vue'
+const uidPlaceholder = 'Semua Distribusi/Wilayah'
+const up3Placeholder = 'Semua Area'
+const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
 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: '',
+  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)
-  selectedUid(value);
+  data.value = {
-  up3.value = { id: 0, name: up3Placeholder };
+    ...data.value,
-  data.value.uid = value;
+    uid: value,
-};
+    up3: { id: 0, name: up3Placeholder },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
+}
 
 const setUp3 = (value: any) => {
-  up3.value = value;
+  selectedUp3Posko(value)
-  selectedUp3Posko(value);
+  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(() => {
+    renderPosko.value = false
+  }, 200)
+}
 
 const setPosko = (value: any) => {
-  posko.value = value;
+  selectedPosko(value)
-  selectedPosko(value);
+  data.value = {
-  data.value.posko = 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" />
     </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"
+        :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">Posko:</label>
-      <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
+      <Select
-        :placeholder="poskoPlaceholder" />
+        v-if="renderPosko"
-
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+      />
+      <Select
+        v-else
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :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>

src/components/Form/FiltersType/Type16.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
   selectedUp3Posko,
@@ -11,53 +11,75 @@ import {
   itemsUp3,
   itemsPosko,
   itemsMedia
-} from './reference';
+} from './reference'
-import { onMounted, ref, watch } from 'vue';
+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 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)
 })
 
+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
+  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 = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 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(() => {
@@ -72,27 +94,54 @@ 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" />
     </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"
+      />
+
+      <Select
+        v-else
+        :data="itemsUp3"
+        @update:selected="setUp3($event)"
+        :placeholder="up3Placeholder"
+      />
     </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"
+      <Select
-        :selected="posko" />
+        v-if="renderPosko"
+        :data="itemsPosko"
+        @update:selected="setPosko($event)"
+        :placeholder="poskoPlaceholder"
+      />
+
+      <Select
+        v-else
+        :data="itemsPosko"
+        @update:selected="setPosko($event)"
+        :placeholder="poskoPlaceholder"
+      />
     </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"
+      <Select
-        :data="itemsMedia" />
+        :selected="media"
+        @update:selected="setMedia($event)"
+        :placeholder="mediaPlaceholder"
+        :data="itemsMedia"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -101,5 +150,4 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>

src/components/Form/FiltersType/Type17Gangguan.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithFilter from '../InputWithFilter.vue'
+import {
+  selectedUid,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  selectedPosko,
+  selectedUp3Posko
+} from './reference'
+import { onMounted, ref, watch, type PropType } from 'vue'
+const uidPlaceholder = 'Pilih Unit'
+const up3Placeholder = 'Pilih Area'
+const poskoPlaceholder = 'Pilih Posko'
+const statusPlaceholder = 'Pilih Status'
+const slaPlaceholder = 'Pilih Durasi SLA'
+
+const keyword = ref('')
+
+const emit = defineEmits(['update:filters'])
+const props = defineProps({
+  reportType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 1, title: 'No Lapor' },
+      { id: 2, title: 'Nama Pelapor' },
+      { id: 3, title: 'Deskripsi' }
+    ]
+  },
+  statusType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 0, name: '' },
+      { id: 1, name: 'Lapor' },
+      { id: 2, name: 'Penugasan Regu' },
+      { id: 3, name: 'Dalam Perjalanan' },
+      { id: 4, name: 'Dalam Pengerjaan' },
+      { id: 5, name: 'Konfirmasi' }
+    ]
+  },
+  slaType: {
+    type: Array as PropType<any[]>,
+    default: [
+      {
+        id: 1,
+        name: '45 Menit',
+        time: 45
+      },
+      {
+        id: 2,
+        name: '3 Jam',
+        time: 180
+      },
+      {
+        id: 3,
+        name: '1 Hari',
+        time: 1440
+      }
+    ]
+  }
+})
+
+const data = ref({
+  uid: { id: 0, name: uidPlaceholder },
+  up3: { id: 0, name: up3Placeholder },
+  posko: { id: 0, name: poskoPlaceholder },
+  status: props.statusType[0],
+  keyword: keyword.value,
+  searchBy: props.reportType[0]?.title,
+  sla: props.slaType[0],
+  periode: ''
+})
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
+
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  selectedUid(value)
+  data.value = {
+    ...data.value,
+    uid: value,
+    up3: {
+      id: 0,
+      name: up3Placeholder
+    },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
+}
+
+const setUp3 = (value: any) => {
+  selectedUp3Posko(value)
+  data.value = {
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
+}
+
+const setPosko = (value: any) => {
+  selectedPosko(value)
+  data.value = {
+    ...data.value,
+    posko: value
+  }
+}
+
+const setStatus = (value: any) => {
+  data.value = {
+    ...data.value,
+    status: value
+  }
+}
+
+const changeKeyword = (value: string) => {
+  data.value = {
+    ...data.value,
+    keyword: value
+  }
+}
+
+const changeReportTypeSelected = (id: any) => {
+  data.value = {
+    ...data.value,
+    searchBy: props.reportType.find((item) => item.id === id)?.name
+  }
+}
+
+const setSla = (value: any) => {
+  data.value = {
+    ...data.value,
+    sla: value
+  }
+}
+
+onMounted(() => {
+  fetchUid()
+  emit('update:filters', data.value)
+})
+</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">Periode Tanggal:</label>
+
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Unit PLN:</label>
+
+      <div class="flex flex-col gap-y-1">
+        <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+
+        <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+          <Select
+            v-if="renderUp3"
+            @update:selected="setUp3($event)"
+            :data="itemsUp3"
+            :placeholder="up3Placeholder"
+          />
+          <Select
+            v-else
+            @update:selected="setUp3($event)"
+            :data="itemsUp3"
+            :placeholder="up3Placeholder"
+          />
+          <Select
+            v-if="renderPosko"
+            @update:selected="setPosko($event)"
+            :data="itemsPosko"
+            :placeholder="poskoPlaceholder"
+          />
+          <Select
+            v-else
+            @update:selected="setPosko($event)"
+            :data="itemsPosko"
+            :placeholder="poskoPlaceholder"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Status:</label>
+
+      <Select
+        @update:selected="setStatus($event)"
+        :data="statusType"
+        :placeholder="statusPlaceholder"
+      />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">SLA:</label>
+
+      <Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Pencarian:</label>
+
+      <InputWithFilter
+        placeholder="Cari"
+        :filters="reportType"
+        @update:keyword="changeKeyword"
+        @update:filters="changeReportTypeSelected"
+      />
+    </div>
+  </div>
+</template>

src/components/Form/FiltersType/Type17Keluhan.vue

@@ -11,113 +11,148 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, type PropType } from 'vue'
 const uidPlaceholder = 'Pilih Unit'
 const up3Placeholder = 'Pilih Area'
 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' },
-  { id: 2, title: 'Nama Pelapor' },
-  { id: 3, title: 'Permasalahan' }
-]
-const searchBy = ref<any>(reportType[0].title)
 
-const statusType = [
-  { id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
-  { id: 2, name: 'Dalam Proses Manager Unit' },
-  { id: 3, name: 'Dalam Proses Bidang Unit' },
-  { id: 4, name: 'Selesai Dijawab Bidang Unit' },
-  { id: 5, name: 'Konfirmasi' }
-]
-const status = ref(statusType[0])
-
-const slaType = [
-  {
-    id: 1,
-    name: '45 Menit',
-    time: 45
-  },
-  {
-    id: 2,
-    name: '3 Jam',
-    time: 180
-  },
-  {
-    id: 3,
-    name: '1 Hari',
-    time: 1440
-  },
-  {
-    id: 4,
-    name: '3 Hari',
-    time: 4320
-  }
-]
-const sla = ref(slaType[0])
 const emit = defineEmits(['update:filters'])
-
+const props = defineProps({
-const data = ref({
+  reportType: {
-  uid: uid.value,
+    type: Array as PropType<any[]>,
-  up3: up3.value,
+    default: [
-  ulp: ulp.value,
+      { id: 1, title: 'No Lapor' },
-  status: status.value,
+      { id: 2, title: 'Nama Pelapor' },
-  keyword: keyword.value,
+      { id: 3, title: 'Permasalahan' }
-  searchBy: searchBy.value,
+    ]
-  sla: sla.value,
+  },
-  periode: ''
+  statusType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 0, name: '' },
+      { id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
+      { id: 2, name: 'Dalam Proses Manager Unit' },
+      { id: 3, name: 'Dalam Proses Bidang Unit' },
+      { id: 4, name: 'Selesai Dijawab Bidang Unit' },
+      { id: 5, name: 'Konfirmasi' }
+    ]
+  },
+  slaType: {
+    type: Array as PropType<any[]>,
+    default: [
+      {
+        id: 1,
+        name: '45 Menit',
+        time: 45
+      },
+      {
+        id: 2,
+        name: '3 Jam',
+        time: 180
+      },
+      {
+        id: 3,
+        name: '1 Hari',
+        time: 1440
+      },
+      {
+        id: 4,
+        name: '3 Hari',
+        time: 4320
+      }
+    ]
+  }
 })
 
-watch(data.value, (value) => {
+const data = ref({
+  uid: { id: 0, name: uidPlaceholder },
+  up3: { id: 0, name: up3Placeholder },
+  ulp: { id: 0, name: ulpPlaceholder },
+  status: props.statusType[0],
+  keyword: keyword.value,
+  searchBy: props.reportType[0].title,
+  sla: props.slaType[0],
+  periode: ''
+})
+const renderUp3 = ref(false)
+const renderUlp = ref(false)
+
+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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
-  console.log(itemsUlp)
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setStatus = (value: any) => {
-  status.value = value
+  data.value = {
-  data.value.status = value
+    ...data.value,
+    status: value
+  }
 }
 
 const changeKeyword = (value: string) => {
-  keyword.value = value
+  data.value = {
-  data.value.keyword = value
+    ...data.value,
+    keyword: value
+  }
 }
 
 const changeReportTypeSelected = (id: any) => {
-  searchBy.value = reportType.find((item) => item.id == id)?.title
+  data.value = {
-  data.value.searchBy = searchBy.value
+    ...data.value,
+    searchBy: props.reportType.find((item) => item.id == id)?.title
+  }
 }
 
 const setSla = (value: any) => {
-  sla.value = value
+  data.value = {
-  data.value.sla = value
+    ...data.value,
+    sla: value
+  }
 }
 
 onMounted(() => {
@@ -142,15 +177,27 @@ 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"
+            :placeholder="up3Placeholder"
+          />
+          <Select
+            v-if="renderUlp"
+            @update:selected="setUlp($event)"
+            :data="itemsUlp"
+            :placeholder="ulpPlaceholder"
+          />
+          <Select
+            v-else
             @update:selected="setUlp($event)"
             :data="itemsUlp"
-            :selected="ulp"
             :placeholder="ulpPlaceholder"
           />
         </div>
@@ -163,7 +210,6 @@ onMounted(() => {
       <Select
         @update:selected="setStatus($event)"
         :data="statusType"
-        :selected="status"
         :placeholder="statusPlaceholder"
       />
     </div>
@@ -171,12 +217,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">SLA:</label>
 
-      <Select
+      <Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
-        @update:selected="setSla($event)"
-        :data="slaType"
-        :selected="sla"
-        :placeholder="slaPlaceholder"
-      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">

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,40 +25,64 @@ 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
 })
+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
+  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 = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 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(() => {
@@ -86,9 +107,16 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
       />
     </div>
@@ -97,9 +125,16 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        placeholder="Semua Posko"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         placeholder="Semua Posko"
       />
     </div>

src/components/Form/FiltersType/Type2.vue

@@ -12,9 +12,13 @@ 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)
+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'
@@ -23,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)
@@ -43,42 +43,79 @@ 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
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUid.value = false
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 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
+  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 = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUp3Ulp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 const setMonth = (value: any) => {
@@ -114,9 +151,16 @@ onMounted(() => {
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
       <Select
+        v-if="renderUid"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUid($event)"
         :data="itemsUid"
-        :selected="uid"
         :placeholder="uidPlaceholder"
       />
     </div>
@@ -125,8 +169,15 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
-        :selected="uppp"
         :data="itemsUp3"
         :placeholder="up3Placholder"
       />
@@ -136,9 +187,16 @@ onMounted(() => {
       <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
       <Select
+        v-if="renderUlp"
+        @update:selected="setUlp($event)"
+        :data="itemsUlp"
+        :placeholder="ulpPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUlp($event)"
         :data="itemsUlp"
-        :selected="ulp"
         :placeholder="ulpPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type3.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -9,47 +9,65 @@ import {
   itemsUid,
   itemsUp3,
   itemsUlp
-} from './reference';
+} from './reference'
-import { onMounted, ref, watch } from 'vue';
+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'
 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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
-  up3.value = value
   selectedUp3Ulp(value)
-  ulp.value = { id: 0, name: ulpPlaceholder }
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
-  console.log(itemsUlp)
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 onMounted(() => {
@@ -69,13 +87,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" :selected="up3" :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" :selected="ulp" :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">
@@ -84,5 +124,4 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>

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: {
@@ -28,33 +25,59 @@ const props = defineProps({
     ]
   }
 })
+const renderUp3 = ref(false)
+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
+  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 = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    ulp: { id: 0, name: ulpPlaceholder }
+  }
+
+  renderUlp.value = true
+  setTimeout(() => {
+    renderUlp.value = false
+  }, 200)
 }
 
 const setUlp = (value: any) => {
-  ulp.value = value
   selectedUlp(value)
-  data.value.ulp = value
+  data.value = {
+    ...data.value,
+    ulp: value
+  }
 }
 
 onMounted(() => {
@@ -74,13 +97,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">

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,46 +8,63 @@ import {
   itemsUid,
   itemsUp3,
   itemsPosko
-} from './reference';
+} from './reference'
 
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.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'
-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) => {
-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)
-  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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 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(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -61,26 +78,46 @@ 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" />
     </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"
+        :placeholder="uppPlaceholder"
+      />
+      <Select
+        v-else
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :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"
+      <Select
-        :placeholder="poskoPlaceholder" />
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+      />
+      <Select
+        v-else
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :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>

src/components/Form/FiltersType/Type6.vue

@@ -11,42 +11,64 @@ 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
+  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 = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -66,14 +88,36 @@ 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"
+        :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">Posko:</label>
 
-      <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko"
+      <Select
-        :placeholder="poskoPlaceholder" />
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+      />
+
+      <Select
+        v-else
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -86,13 +130,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)"
+        <InputNumber
-          class="flex flex-1" />
+          :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)"
+        <InputNumber
-          class="flex flex-1" />
+          :value="data.maxJmlLapor"
+          @update:time-value="(value) => (data.maxJmlLapor = value)"
+          class="flex flex-1"
+        />
       </div>
     </div>
   </div>
-
 </template>

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')
@@ -61,34 +58,57 @@ 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,
+  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
+  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 = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 const setMin = (value: any) => {
@@ -122,9 +142,6 @@ const changeDuration = (value: any) => {
     isHidden.value = true
   }
 }
-watch(data, (newValue) => {
-  emit('update:filters', newValue)
-})
 
 onMounted(() => {
   fetchUid()
@@ -144,9 +161,16 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="up3Placeholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
-        :selected="up3"
         :placeholder="up3Placeholder"
       />
     </div>
@@ -155,9 +179,16 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
-        :selected="posko"
         :placeholder="poskoPlaceholder"
       />
     </div>

src/components/Form/FiltersType/Type8.vue

@@ -1,38 +1,46 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue';
+import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue';
+import DatePicker from '@/components/DatePicker.vue'
 
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue'
-import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference';
+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(() => {
+    renderUp3.value = false
+  }, 200)
 }
 
 const setUp3 = (value: any) => {
-  uppp.value = value
+  data.value = {
-  data.value.up3 = value
+    ...data.value,
+    up3: value
+  }
 }
 
 onMounted(() => {
@@ -52,7 +60,19 @@ 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"
+        :placeholder="uppPlaceholder"
+      />
+
+      <Select
+        v-else
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="uppPlaceholder"
+      />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
@@ -61,5 +81,4 @@ onMounted(() => {
       <DatePicker @update:date-value="(value) => (data.periode = value)" />
     </div>
   </div>
-
 </template>

src/components/Form/FiltersType/Type9.vue

@@ -17,40 +17,58 @@ 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
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
 }
 
 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(() => {
+    renderPosko.value = false
+  }, 200)
 }
 
 const setPosko = (value: any) => {
-  posko.value = value
   selectedPosko(value)
-  data.value.posko = value
+  data.value = {
+    ...data.value,
+    posko: value
+  }
 }
 
 onMounted(() => {
@@ -71,10 +89,17 @@ onMounted(() => {
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
       <Select
+        v-if="renderUp3"
+        @update:selected="setUp3($event)"
+        :data="itemsUp3"
+        :placeholder="uppPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setUp3($event)"
         :data="itemsUp3"
         :placeholder="uppPlaceholder"
-        :selected="uppp"
       />
     </div>
 
@@ -82,10 +107,17 @@ onMounted(() => {
       <label class="filter-input-label">Posko:</label>
 
       <Select
+        v-if="renderPosko"
+        @update:selected="setPosko($event)"
+        :data="itemsPosko"
+        :placeholder="poskoPlaceholder"
+      />
+
+      <Select
+        v-else
         @update:selected="setPosko($event)"
         :data="itemsPosko"
         :placeholder="poskoPlaceholder"
-        :selected="posko"
       />
     </div>
 
@@ -95,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/Form/FiltersType/index.ts

@@ -14,5 +14,6 @@ export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
 export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
 export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
 export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
-export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue' 
+export { default as Type17Gangguan } from '@/components/Form/FiltersType/Type17Gangguan.vue'
+export { default as Type17Keluhan } from '@/components/Form/FiltersType/Type17Keluhan.vue'
 export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'

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) => {

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,

src/components/Pages/Transaksi/Transaksi.vue

@@ -27,7 +27,8 @@
   </div>
 
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type17 @update:filters="(value) => (filters = value)" />
+    <Type17Gangguan v-if="tab == 'gangguan'" @update:filters="(value) => (filters = value)" />
+    <Type17Keluhan v-else @update:filters="(value) => (filters = value)" />
   </Filters>
 
   <div id="data">
@@ -178,6 +179,7 @@
         cell-template="formatText"
       />
       <DxColumn
+        v-if="tab == 'keluhan'"
         :width="170"
         alignment="center"
         data-field="status_akhir"
@@ -186,6 +188,7 @@
         cell-template="formatText"
       />
       <DxColumn
+        v-if="tab == 'keluhan'"
         :width="170"
         alignment="center"
         data-field="durasi"
@@ -229,13 +232,12 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { Type17 } from '@/components/Form/FiltersType'
+import { Type17Gangguan, Type17Keluhan } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
@@ -401,7 +403,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3, status, keyword, searchBy, sla } = params
+  const { posko, ulp, uid, up3, status, keyword, searchBy, sla } = params
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -409,7 +411,7 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idPosko: 0,
+    idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
     idUlp: ulp ? ulp.id : 0,

src/components/Select.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { RichSelect } from '@flavorly/vanilla-components'
 
 const props = defineProps({
@@ -23,16 +23,18 @@ const props = defineProps({
 
 const emit = defineEmits(['update:selected'])
 const data = computed(() =>
-  props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
+  props.placeholder == '0'
+    ? props.data
+    : props.data.length > 0
+      ? [{ id: 0, name: props.placeholder }, ...props.data]
+      : [{ id: 0, name: props.placeholder }]
 )
 const selected = ref(data.value[props.indexSelected].id)
 
-// watch(
+watch(props.selected.id, (value: any) => {
-//   () => props.selected,
+  console.log('id has changed', value)
-//   (value: any) => {
+  selected.value = value
-//     selected.value = value.id
+})
-//   }
-// )
 </script>
 
 <template>

src/stores/filters.ts

@@ -18,7 +18,7 @@ import {
   Type14,
   Type15,
   Type16,
-  Type17,
+  Type17Gangguan,
   Type18
 } from '@/components/Form/FiltersType'
 
@@ -39,7 +39,7 @@ const test1: { [key: string]: any } = {
   'type-14': Type14,
   'type-15': Type15,
   'type-16': Type16,
-  'type-17': Type17,
+  'type-17': Type17Gangguan,
   'type-18': Type18
 }
 
@@ -54,7 +54,7 @@ export const useFiltersStore = defineStore('filters', () => {
     component: getFilters('')
   })
 
-  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
+  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean; type: string }) => {
     config.value = {
       reportButton,
       type,