From 0fb6b50272f9db35074599aee78326e3e73204e6 Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 25 Apr 2024 10:24:42 +0700
Subject: [PATCH] feat: create login filterPresets

---
 src/components/Form/FiltersType/Type1.vue     |  98 +++++++++----
 src/components/Form/FiltersType/Type10.vue    |  94 +++++++++----
 src/components/Form/FiltersType/Type11.vue    |  93 +++++++++----
 src/components/Form/FiltersType/Type12.vue    |  97 +++++++++----
 src/components/Form/FiltersType/Type13.vue    |  94 +++++++++----
 src/components/Form/FiltersType/Type14.vue    |  96 +++++++++----
 src/components/Form/FiltersType/Type16.vue    |  93 +++++++++----
 .../Form/FiltersType/Type17Gangguan.vue       |  94 +++++++++----
 .../Form/FiltersType/Type17Keluhan.vue        |  95 +++++++++----
 src/components/Form/FiltersType/Type18.vue    |  86 ++++++++----
 src/components/Form/FiltersType/Type2.vue     | 129 ++++++++++++------
 src/components/Form/FiltersType/Type3.vue     |  93 +++++++++----
 src/components/Form/FiltersType/Type4.vue     |  96 +++++++++----
 src/components/Form/FiltersType/Type5.vue     |  92 +++++++++----
 src/components/Form/FiltersType/Type6.vue     |  91 ++++++++----
 src/components/Form/FiltersType/Type7.vue     |  90 ++++++++----
 src/components/Form/FiltersType/Type8.vue     |  64 +++++++--
 src/components/Form/FiltersType/Type9.vue     |  90 ++++++++----
 src/components/Form/InputReadonly.vue         |  19 +++
 .../Pages/Gangguan/Daftar/DGangguan_DKPL.vue  |   6 +-
 src/stores/auth.ts                            |  27 +++-
 21 files changed, 1250 insertions(+), 487 deletions(-)
 create mode 100644 src/components/Form/InputReadonly.vue

diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index a8efbe4..c0401d9 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import {
   selectedUid,
   selectedUp3Posko,
@@ -11,6 +12,7 @@ import {
   fetchUid
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -93,8 +95,29 @@ const setPosko = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
-  fetchUid()
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
 })
 </script>
@@ -104,47 +127,62 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :selected="up3"
-        :placeholder="up3placeholder"
-      />
+      <div v-if="!presetUP3">
+        <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-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :selected="up3"
+          :placeholder="up3placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2" v-if="showPosko">
       <label class="filter-input-label">Posko:</label>
 
-      <Select
-        v-if="renderPosko"
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :selected="posko"
-        :placeholder="poskoPlaceholder"
-      />
+      <div v-if="!presetPosko">
+        <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"
-      />
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :selected="posko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index 7576644..2b1d7fd 100755
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
@@ -12,6 +13,7 @@ import {
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputNumber from '@/components/Form/InputNumber.vue'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -70,9 +72,34 @@ const setUlp = (value: any) => {
     ulp: value
   }
 }
+
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
-  emit('update:filters', data.value)
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -81,43 +108,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <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-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUlp($event)"
-        :data="itemsUlp"
-        :placeholder="ulpPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index 45c70b7..980e457 100755
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -6,6 +6,7 @@ interface SlaOption {
   max: string
 }
 
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
@@ -19,6 +20,7 @@ import {
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '@/components/Form/InputWithSuffix.vue'
+import { readDataJson } from '@/utils/storage'
 
 const props = defineProps({
   slaOptions: {
@@ -147,9 +149,33 @@ const changeDuration = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
-  emit('update:filters', data.value)
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -158,43 +184,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <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-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUlp($event)"
-        :data="itemsUlp"
-        :placeholder="ulpPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
index 10dc480..37db3d8 100755
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '../InputWithSuffix.vue'
@@ -12,6 +13,8 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -102,9 +105,34 @@ const changeDuration = (value: any) => {
     console.log('Melebihi SLA (> 45 menit)')
   }
 }
+
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
-  emit('update:filters', data.value)
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -113,41 +141,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-        :placeholder="ulpPlaceholder"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index f277a42..b675bbc 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
@@ -12,6 +13,7 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -72,9 +74,33 @@ const setUlp = (value: any) => {
   console.log('data.value', data.value)
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
-  emit('update:filters', data.value)
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -83,42 +109,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <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-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-        :placeholder="ulpPlaceholder"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
index b2d5eb8..6a45f0d 100755
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import {
@@ -11,6 +12,8 @@ import {
   itemsPosko
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
+
 const uidPlaceholder = 'Semua Distribusi/Wilayah'
 const up3Placeholder = 'Semua Area'
 const poskoPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -65,9 +68,30 @@ const setPosko = (value: any) => {
     posko: value
   }
 }
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
-  fetchUid()
 })
 </script>
 
@@ -75,39 +99,59 @@ onMounted(() => {
   <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Distribusi/Wilayah:</label>
-      <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" />
+
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Area:</label>
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
-      <Select
-        v-else
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
+
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-      />
+
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index 32eb13a..dadbd6a 100755
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import {
@@ -13,6 +14,7 @@ import {
   itemsMedia
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -82,10 +84,32 @@ const setMedia = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
-  emit('update:filters', data.value)
-  fetchUid()
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   fetchMedia()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -94,43 +118,58 @@ 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" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        :data="itemsUp3"
-        @update:selected="setUp3($event)"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
 
-      <Select
-        v-else
-        :data="itemsUp3"
-        @update:selected="setUp3($event)"
-        :placeholder="up3Placeholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select
-        v-if="renderPosko"
-        :data="itemsPosko"
-        @update:selected="setPosko($event)"
-        :placeholder="poskoPlaceholder"
-      />
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
 
-      <Select
-        v-else
-        :data="itemsPosko"
-        @update:selected="setPosko($event)"
-        :placeholder="poskoPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type17Gangguan.vue b/src/components/Form/FiltersType/Type17Gangguan.vue
index b2638bb..0929331 100755
--- a/src/components/Form/FiltersType/Type17Gangguan.vue
+++ b/src/components/Form/FiltersType/Type17Gangguan.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithFilter from '../InputWithFilter.vue'
@@ -12,6 +13,8 @@ import {
   selectedUp3Posko
 } from './reference'
 import { onMounted, ref, watch, type PropType } from 'vue'
+import { readDataJson } from '@/utils/storage'
+
 const uidPlaceholder = 'Pilih Unit'
 const up3Placeholder = 'Pilih Area'
 const poskoPlaceholder = 'Pilih Posko'
@@ -149,8 +152,29 @@ const setSla = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
-  fetchUid()
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
 })
 </script>
@@ -167,33 +191,51 @@ onMounted(() => {
       <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" />
+        <Select
+          v-if="!presetUID"
+          @update:selected="setUid($event)"
+          :data="itemsUid"
+          :placeholder="uidPlaceholder"
+        />
+
+        <InputReadonly v-if="presetUID" :value="presetUID.name" />
 
         <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 v-if="!presetUP3">
+            <Select
+              v-if="renderUp3"
+              @update:selected="setUp3($event)"
+              :data="itemsUp3"
+              :placeholder="up3Placeholder"
+            />
+
+            <Select
+              v-else
+              @update:selected="setUp3($event)"
+              :data="itemsUp3"
+              :placeholder="up3Placeholder"
+            />
+          </div>
+
+          <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
+
+          <div v-if="!presetPosko">
+            <Select
+              v-if="renderPosko"
+              @update:selected="setPosko($event)"
+              :data="itemsPosko"
+              :placeholder="poskoPlaceholder"
+            />
+
+            <Select
+              v-else
+              @update:selected="setPosko($event)"
+              :data="itemsPosko"
+              :placeholder="poskoPlaceholder"
+            />
+          </div>
+
+          <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
         </div>
       </div>
     </div>
diff --git a/src/components/Form/FiltersType/Type17Keluhan.vue b/src/components/Form/FiltersType/Type17Keluhan.vue
index 0ce8063..9612260 100755
--- a/src/components/Form/FiltersType/Type17Keluhan.vue
+++ b/src/components/Form/FiltersType/Type17Keluhan.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithFilter from '../InputWithFilter.vue'
@@ -12,6 +13,8 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch, type PropType } from 'vue'
+import { readDataJson } from '@/utils/storage'
+
 const uidPlaceholder = 'Pilih Unit'
 const up3Placeholder = 'Pilih Area'
 const ulpPlaceholder = 'Pilih Rayon'
@@ -154,8 +157,32 @@ const setSla = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
   emit('update:filters', data.value)
 })
 </script>
@@ -172,33 +199,51 @@ onMounted(() => {
       <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" />
+        <Select
+          v-if="!presetUID"
+          @update:selected="setUid($event)"
+          :data="itemsUid"
+          :placeholder="uidPlaceholder"
+        />
+
+        <InputReadonly v-if="presetUID" :value="presetUID.name" />
 
         <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="renderUlp"
-            @update:selected="setUlp($event)"
-            :data="itemsUlp"
-            :placeholder="ulpPlaceholder"
-          />
-          <Select
-            v-else
-            @update:selected="setUlp($event)"
-            :data="itemsUlp"
-            :placeholder="ulpPlaceholder"
-          />
+          <div v-if="!presetUP3">
+            <Select
+              v-if="renderUp3"
+              @update:selected="setUp3($event)"
+              :data="itemsUp3"
+              :placeholder="up3Placeholder"
+            />
+
+            <Select
+              v-else
+              @update:selected="setUp3($event)"
+              :data="itemsUp3"
+              :placeholder="up3Placeholder"
+            />
+          </div>
+
+          <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
+
+          <div v-if="!presetULP">
+            <Select
+              v-if="renderUlp"
+              @update:selected="setUlp($event)"
+              :data="itemsUlp"
+              :placeholder="ulpPlaceholder"
+            />
+
+            <Select
+              v-else
+              @update:selected="setUlp($event)"
+              :data="itemsUlp"
+              :placeholder="ulpPlaceholder"
+            />
+          </div>
+
+          <InputReadonly v-if="presetULP" :value="presetULP.name" />
         </div>
       </div>
     </div>
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index bcfcf26..ed3bc16 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import SelectMulti from '@/components/SelectMulti.vue'
 
@@ -13,6 +14,7 @@ import {
   itemsPosko
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -85,9 +87,30 @@ const setTags = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
-  fetchUid()
 })
 </script>
 
@@ -97,46 +120,57 @@ onMounted(() => {
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
       <Select
+        v-if="!presetUID"
         @update:selected="setUid($event)"
         :data="itemsUid"
-        placeholder="Semua Unit Induk Distribusi/Wilayah"
+        :placeholder="uidPlaceholder"
       />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan"
-      />
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select
-        v-if="renderPosko"
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        placeholder="Semua Posko"
-      />
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        placeholder="Semua Posko"
-      />
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Jenis Transaksi:</label>
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index f66188c..df7125a 100755
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -13,6 +14,7 @@ import {
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
 import { getMonthName } from '@/utils/texts'
+import { readDataJson } from '@/utils/storage'
 
 const renderUid = ref(false)
 const renderUp3 = ref(false)
@@ -65,16 +67,14 @@ watch(data, (value) => {
 })
 
 const setRegional = (value: any) => {
-  console.log(value)
+  if (!presetUID.value) {
+    fetchUid()
+    selectedUid(value)
+  }
 
-  fetchUid()
-  selectedUid(value)
   data.value = {
     ...data.value,
-    regional: value,
-    uid: { id: 0, name: uidPlaceholder },
-    up3: { id: 0, name: up3Placholder },
-    ulp: { id: 0, name: ulpPlaceholder }
+    regional: value
   }
 
   renderUid.value = true
@@ -137,9 +137,35 @@ const setYear = (value: any) => {
   data.value.tahun = value
 }
 
+const presetRegional: any = ref(null)
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['regional', 'uid', 'up3', 'ulp']
+const presetValues: any = [presetRegional, presetUID, presetUP3, presetULP]
+const setFunctions: any = [setRegional, setUid, setUp3, setUlp]
+
 onMounted(() => {
-  emit('update:filters', data.value)
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'regional' || key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchRegional()
+  fetchUid()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -149,64 +175,79 @@ onMounted(() => {
       <label class="filter-input-label">Regional:</label>
 
       <Select
+        v-if="!presetRegional"
         @update:selected="setRegional($event)"
         :data="itemsRegional"
         :placeholder="regionalPlaceholder"
       />
+
+      <InputReadonly v-if="presetRegional" :value="presetRegional.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select
-        v-if="renderUid"
-        @update:selected="setUid($event)"
-        :data="itemsUid"
-        :placeholder="uidPlaceholder"
-      />
+      <div v-if="!presetUID">
+        <Select
+          v-if="renderUid"
+          @update:selected="setUid($event)"
+          :data="itemsUid"
+          :placeholder="uidPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUid($event)"
-        :data="itemsUid"
-        :placeholder="uidPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUid($event)"
+          :data="itemsUid"
+          :placeholder="uidPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUlp($event)"
-        :data="itemsUlp"
-        :placeholder="ulpPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index 6921aba..e157781 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -11,6 +12,7 @@ import {
   itemsUlp
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const renderUp3 = ref(false)
 const renderUlp = ref(false)
@@ -70,8 +72,32 @@ const setUlp = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
   emit('update:filters', data.value)
 })
 </script>
@@ -81,41 +107,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-        :placeholder="ulpPlaceholder"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index fed4670..ef68e9a 100755
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
@@ -11,6 +12,8 @@ import {
   fetchUid
 } from './reference'
 import { computed, onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
+
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const ulpPlaceholder = 'Semua Unit Layanan Pelanggan'
@@ -80,9 +83,33 @@ const setUlp = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetULP: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'ulp']
+const presetValues: any = [presetUID, presetUP3, presetULP]
+const setFunctions: any = [setUid, setUp3, setUlp]
+
 onMounted(() => {
-  emit('update:filters', data.value)
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'uid') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  }
+
   fetchUid()
+
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -91,41 +118,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <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"
-        :placeholder="ulpPlaceholder"
-      />
+      <div v-if="!presetULP">
+        <Select
+          v-if="renderUlp"
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUlp($event)"
+          :data="itemsUlp"
+          :placeholder="ulpPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetULP" :value="presetULP.name" />
     </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 9ec8559..486ae0c 100755
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import { onMounted, ref, watch } from 'vue'
 import {
   selectedUid,
@@ -9,6 +10,7 @@ import {
   itemsUp3,
   itemsPosko
 } from './reference'
+import { readDataJson } from '@/utils/storage'
 
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
@@ -67,9 +69,30 @@ const setPosko = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
-  fetchUid()
 })
 </script>
 
@@ -78,41 +101,58 @@ 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" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="uppPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="uppPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-      />
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 703cf82..6459f96 100755
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import InputNumber from '@/components/Form/InputNumber.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
@@ -12,6 +13,7 @@ import {
   itemsPosko
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const emit = defineEmits(['update:filters'])
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
@@ -71,8 +73,29 @@ const setPosko = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
-  fetchUid()
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
 })
 </script>
@@ -82,42 +105,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <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"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select
-        v-if="renderPosko"
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :placeholder="poskoPlaceholder"
-      />
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :placeholder="poskoPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index fb03bd9..9983338 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -6,6 +6,7 @@ interface SlaOption {
   max: string
 }
 
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InputWithSuffix from '../InputWithSuffix.vue'
@@ -19,6 +20,7 @@ import {
   itemsPosko
 } from './reference'
 import { onMounted, ref, watch } from 'vue'
+import { readDataJson } from '@/utils/storage'
 
 const props = defineProps({
   slaOptions: {
@@ -143,8 +145,29 @@ const changeDuration = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
-  fetchUid()
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
 })
 </script>
@@ -154,43 +177,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="up3Placeholder"
-      />
+      <div v-if="!presetUP3">
+        <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-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="up3Placeholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select
-        v-if="renderPosko"
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :placeholder="poskoPlaceholder"
-      />
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :placeholder="poskoPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index 8e512a0..023e3fc 100755
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 
 import { onMounted, ref, watch } from 'vue'
 import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -43,9 +45,32 @@ const setUp3 = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3']
+const presetValues: any = [presetUID, presetUP3]
+const setFunctions: any = [setUid, setUp3]
+
 onMounted(() => {
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+
+        if (key !== 'posko') {
+          setFunctions[index](filterPresets.value[key])
+        }
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
-  fetchUid()
 })
 </script>
 
@@ -54,25 +79,36 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="uppPlaceholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="uppPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="uppPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="uppPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index 845b58b..12a32a4 100755
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import InputReadonly from '@/components/Form/InputReadonly.vue'
 import Select from '@/components/Select.vue'
 import DatePicker from '@/components/DatePicker.vue'
 import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
@@ -13,6 +14,7 @@ import {
   itemsUp3,
   itemsPosko
 } from './reference'
+import { readDataJson } from '@/utils/storage'
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -71,8 +73,29 @@ const setPosko = (value: any) => {
   }
 }
 
+const presetUID: any = ref(null)
+const presetUP3: any = ref(null)
+const presetPosko: any = ref(null)
+const filterPresets: any = ref()
+
+const keys: any = ['uid', 'up3', 'posko']
+const presetValues: any = [presetUID, presetUP3, presetPosko]
+const setFunctions: any = [setUid, setUp3, setPosko]
+
 onMounted(() => {
-  fetchUid()
+  filterPresets.value = readDataJson('filterPresets') || null
+
+  if (filterPresets.value) {
+    keys.forEach((key: any, index: any) => {
+      if (filterPresets.value[key]) {
+        presetValues[index].value = filterPresets.value[key]
+        setFunctions[index](filterPresets.value[key])
+      }
+    })
+  } else {
+    fetchUid()
+  }
+
   emit('update:filters', data.value)
 })
 </script>
@@ -82,43 +105,58 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
-      <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+      <Select
+        v-if="!presetUID"
+        @update:selected="setUid($event)"
+        :data="itemsUid"
+        :placeholder="uidPlaceholder"
+      />
+
+      <InputReadonly v-if="presetUID" :value="presetUID.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
-      <Select
-        v-if="renderUp3"
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="uppPlaceholder"
-      />
+      <div v-if="!presetUP3">
+        <Select
+          v-if="renderUp3"
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="uppPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setUp3($event)"
-        :data="itemsUp3"
-        :placeholder="uppPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setUp3($event)"
+          :data="itemsUp3"
+          :placeholder="uppPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetUP3" :value="presetUP3.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">Posko:</label>
 
-      <Select
-        v-if="renderPosko"
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :placeholder="poskoPlaceholder"
-      />
+      <div v-if="!presetPosko">
+        <Select
+          v-if="renderPosko"
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
 
-      <Select
-        v-else
-        @update:selected="setPosko($event)"
-        :data="itemsPosko"
-        :placeholder="poskoPlaceholder"
-      />
+        <Select
+          v-else
+          @update:selected="setPosko($event)"
+          :data="itemsPosko"
+          :placeholder="poskoPlaceholder"
+        />
+      </div>
+
+      <InputReadonly v-if="presetPosko" :value="presetPosko.name" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">
diff --git a/src/components/Form/InputReadonly.vue b/src/components/Form/InputReadonly.vue
new file mode 100644
index 0000000..8ee4774
--- /dev/null
+++ b/src/components/Form/InputReadonly.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="relative w-full overflow-hidden bg-gray-200 rounded-lg">
+    <input
+      type="text"
+      :value="value"
+      :readonly="true"
+      class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  value: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
index 0236002..81d0fce 100755
--- a/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
+++ b/src/components/Pages/Gangguan/Daftar/DGangguan_DKPL.vue
@@ -363,7 +363,6 @@ import InputText from '@/components/InputText.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { exportToPDF, exportToXLSX, exportToDOCX } from '@/report/Gangguan/Daftar/DGangguan_DKPL'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
-import { readDataJson } from '@/utils/storage'
 
 const data = ref<any[]>([])
 const dataSelected = ref<any>()
@@ -391,6 +390,9 @@ const filterData = async (params: any) => {
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
   }
+
+  console.log(query)
+
   loading.value = true
   await requestGraphQl(queries.gangguan.daftar.dataDialihkanKePoskoLain, query)
     .then((result) => {
@@ -435,8 +437,6 @@ const reportMeta = ref({
 })
 
 onMounted(() => {
-  // console.log(readDataJson('filterPresets'))
-
   if (import.meta.env.DEV) {
     data.value = [
       {
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 99fe5b1..1f4b5c6 100755
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -12,12 +12,7 @@ export const useAuthStore = defineStore('auth', () => {
   const password = ref('')
   const isLoading = ref(false)
   const isLoggedIn = computed(() => token.value !== '')
-  const filterPresets = {
-    uid: {
-      id: 2,
-      name: 'DISTRIBUSI JAKARTA RAYA'
-    }
-  }
+  const filterPresets: any = ref({})
 
   // define your actions
   const login = () => {
@@ -28,13 +23,31 @@ export const useAuthStore = defineStore('auth', () => {
         type: 'warning'
       })
     } else {
+      // filterPresets.value = {
+      //   uid: {
+      //     id: 2,
+      //     name: 'DISTRIBUSI JAKARTA RAYA'
+      //   },
+      //   up3: {
+      //     id: 4,
+      //     name: 'UP3 MENTENG'
+      //   },
+      //   posko: {
+      //     id: 541101,
+      //     name: 'POSKO MENTENG'
+      //   }
+      // }
+
       isLoading.value = true
       setTimeout(() => {
         isLoading.value = false
         if (username.value == 'demo' && password.value == 'demo') {
           // store token in localStorage
           writeData('token', 'secret-token')
-          writeDataJson('filterPresets', filterPresets)
+
+          if (Object.keys(filterPresets.value).length > 0) {
+            writeDataJson('filterPresets', filterPresets.value)
+          }
 
           dispatchNotification({
             title: 'Berhasil',