diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index c163ba1..ee4d47d 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1048,8 +1048,8 @@ body {
   top: 100%;
 }
 
-.top-px {
-  top: 1px;
+.top-16 {
+  top: 4rem;
 }
 
 .z-10 {
@@ -1076,35 +1076,8 @@ body {
   grid-column: span 7 / span 7;
 }
 
-.-m-px {
-  margin: -1px;
-}
-
-.m-0 {
-  margin: 0px;
-}
-
-.m-3 {
-  margin: 0.75rem;
-}
-
-.m-3\.5 {
-  margin: 0.875rem;
-}
-
-.mx-0 {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-.mx-0\.5 {
-  margin-left: 0.125rem;
-  margin-right: 0.125rem;
-}
-
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+.m-auto {
+  margin: auto;
 }
 
 .mx-2 {
@@ -1480,12 +1453,8 @@ body {
   width: 100%;
 }
 
-.w-px {
-  width: 1px;
-}
-
-.min-w-0 {
-  min-width: 0px;
+.w-72 {
+  width: 18rem;
 }
 
 .max-w-2xl {
@@ -2099,6 +2068,21 @@ body {
   background-color: rgb(204 204 0 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+.bg-secondary-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(102 194 208 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-100 {
   --tw-bg-opacity: 1;
 }
@@ -2308,14 +2292,9 @@ body {
   padding-bottom: 1.5rem;
 }
 
-.py-\[5px\] {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.py-px {
-  padding-top: 1px;
-  padding-bottom: 1px;
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
 }
 
 .pb-4 {
@@ -2797,6 +2776,10 @@ body {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+.ring-black\/5 {
+  --tw-ring-color: rgb(0 0 0 / 0.05);
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -3099,6 +3082,10 @@ body {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.focus-visible\:ring-white\/75:focus-visible {
+  --tw-ring-color: rgb(255 255 255 / 0.75);
+}
+
 .focus-visible\:ring-opacity-75:focus-visible {
   --tw-ring-opacity: 0.75;
 }
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index a68317b..e3b775b 100755
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// import { useDateStore } from '@/stores/date';
 import { PhCalendarBlank } from '@phosphor-icons/vue'
 import { ref, watch } from 'vue'
 
@@ -28,13 +27,7 @@ const customShortcuts = () => {
         return [new Date(date.setFullYear(date.getFullYear() - 1)), new Date()];
       },
     },
-    {
-      label: "Last 3 Years",
-      atClick: () => {
-        const date = new Date();
-        return [new Date(date.setFullYear(date.getFullYear() - 3)), new Date()];
-      },
-    },
+   
   ];
 };
 watch(dateValue, (newValue) => {
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 6efc4f7..9438058 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
 import {
   selectedUid,
   selectedUp3Posko,
   selectedPosko,
-  fetchUid,
   itemsUid,
   itemsUp3,
-  itemsPosko
+  itemsPosko,
+  fetchUid
 } from './reference'
-
-const props = defineProps({
-  runReset: {
-    type: Boolean,
-    required: true
-  }
-});
-import Select from '@/components/Select.vue'
-import DatePicker from '@/components/DatePicker.vue'
+import { onMounted, ref, watch } from 'vue'
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3laceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -55,23 +48,10 @@ const setPosko = (value: any) => {
   selectedPosko(value)
   data.value.posko = value
 }
-watch(() => props.runReset, (value) => {
-  if (value) {
-    uid.value = { id: 0, name: uidPlaceholder }
-    up3.value = { id: 0, name: up3laceholder }
-    posko.value = { id: 0, name: poskoPlaceholder }
-    data.value.periode = ''
-    data.value = {
-      uid: uid.value,
-      up3: up3.value,
-      posko: posko.value,
-      periode: ''
-    }
-  }
-})
+
 onMounted(() => {
-  emit('update:filters', data.value)
   fetchUid()
+  emit('update:filters', data.value)
 })
 </script>
 
@@ -79,7 +59,7 @@ onMounted(() => {
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
-    <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
+    <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
@@ -96,9 +76,12 @@ onMounted(() => {
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
     <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
-    <DatePicker @update:date-value="(value) => {
-      data.periode = value
-    }
-      " />
+    <DatePicker
+      @update:date-value="
+        (value) => {
+          data.periode = value
+        }
+      "
+    />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/reference.ts b/src/components/Form/FiltersType/reference.ts
index a297a19..0392da9 100755
--- a/src/components/Form/FiltersType/reference.ts
+++ b/src/components/Form/FiltersType/reference.ts
@@ -1,13 +1,12 @@
-import { getUid, getUp3, getPosko, getUlp,getUidRegional, getRegional } from '@/utils/network'
-import { ref } from 'vue'
 import { usePostsStore } from '@/stores/posts'
-import { useUp3Store } from '@/stores/up3'
 import { useRegionStore } from '@/stores/region'
 import { useUlpStore } from '@/stores/ulp'
-
+import { useUp3Store } from '@/stores/up3'
+import { getUid, getUp3, getPosko, getUlp,getRegional } from '@/utils/network'
+import { ref } from 'vue'
 interface Item {
-  id: any;
-  name: any;
+  id: any
+  name: any
 }
 const months = [
   { id: 1, name: 'Januari' },
@@ -21,24 +20,40 @@ const months = [
   { id: 9, name: 'September' },
   { id: 10, name: 'Oktober' },
   { id: 11, name: 'November' },
-  { id: 12, name: 'Desember' },
+  { id: 12, name: 'Desember' }
 ]
-
 // create 4 year back array
-const year = new Date().getFullYear();
-let years = ref<Item[]>([]);
+const year = new Date().getFullYear()
+const years = ref<Item[]>([])
 for (let i = 0; i < 5; i++) {
   years.value.push({ id: year - i, name: year - i })
 }
-
-const timeout = ref()
-const itemsUid = ref<Item[]>([]);
-const itemsUp3 = ref<Item[]>([]);
-const itemsPosko = ref<Item[]>([]);
-const itemsUlp = ref<Item[]>([]);
-const itemsRegional = ref<Item[]>([]);
-const itemsMedia = ref<Item[]>([]);
-const fetchRegional =async () => {
+const itemsUid = ref<Item[]>([])
+const itemsUp3 = ref<Item[]>([])
+const itemsPosko = ref<Item[]>([])
+const itemsUlp = ref<Item[]>([])
+const itemsRegional = ref<Item[]>([])
+const itemsMedia = ref<Item[]>([])
+// Fetch data from the API using Axios
+const fetchMedia = () => {
+  itemsMedia.value = [
+    { id: 'Ulasan Aplikasi PLN Mobile', name: 'Ulasan Aplikasi PLN Mobile' },
+    { id: 'Twitter', name: 'Twitter' },
+    { id: 'PLN Mobile', name: 'PLN Mobile' },
+    { id: 'Media Massa', name: 'Media Massa' },
+    { id: 'Live Chat Website', name: 'Live Chat Website' },
+    { id: 'Live Chat PLN Mobile', name: 'Live Chat PLN Mobile' },
+    { id: 'Instagram', name: 'Instagram' },
+    { id: 'Facebook', name: 'Facebook' },
+    { id: 'Email', name: 'Email' },
+    { id: 'EMS', name: 'EMS' },
+    { id: 'Datang ke Kantor', name: 'Datang ke Kantor' },
+    { id: 'Call ke Kantor Unit', name: 'Call ke Kantor Unit' },
+    { id: 'Call PLN 123', name: 'Call PLN 123' }
+  ]
+}
+// Fetch data from the API using Axios
+const fetchUid = async () => {
   try {
   const res = await getRegional()
     itemsRegional.value = res.data.map((item: any) => (
@@ -51,67 +66,7 @@ const fetchRegional =async () => {
     console.error('Error fetching data:', error);
   }
 }
-const fetchStatus = (data : any) => {
 
-  const status  = [
-    {"id": "8", "name": "Selesai"},
-    {"id": "7", "name": "Nyala"},
-    {"id": "6", "name": "Pengalihan"},
-    {"id": "5", "name": "Dialihkan"},
-    {"id": "4", "name": "Dalam Pengerjaan"},
-    {"id": "3", "name": "Dalam Perjalanan"},
-    {"id": "2", "name": "Penugasan Regu"},
-    {"id": "1", "name": "lapor"}
-  ]
-  const filteredStatus = status.find(item => item.id == data);
-  const name = filteredStatus ? filteredStatus.name : null;
-  return name;
-}
-const fetchMedia = () => {
-  itemsMedia.value = [
-    { id: "Ulasan Aplikasi PLN Mobile", name: "Ulasan Aplikasi PLN Mobile" },
-    { id: "Twitter", name: "Twitter" },
-    { id: "PLN Mobile", name: "PLN Mobile" },
-    { id: "Media Massa", name: "Media Massa" },
-    { id: "Live Chat Website", name: "Live Chat Website" },
-    { id: "Live Chat PLN Mobile", name: "Live Chat PLN Mobile" },
-    { id: "Instagram", name: "Instagram" },
-    { id: "Facebook", name: "Facebook" },
-    { id: "Email", name: "Email" },
-    { id: "EMS", name: "EMS" },
-    { id: "Datang ke Kantor", name: "Datang ke Kantor" },
-    { id: "Call ke Kantor Unit", name: "Call ke Kantor Unit" },
-    { id: "Call PLN 123", name: "Call PLN 123" },
-  ]
-
-}
-// Fetch data from the API using Axios
-const fetchUid = async () => {
-  try {
-    const res = await getUid()
-    itemsUid.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-};
-const fetchUidWithRegional = async (regional: number) => {
-  try {
-    const res = await getUidRegional(regional)
-    itemsUid.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
-}
 const fetchDataUp3 = async (uid: number) => {
   try {
     const res = await getUp3(uid)
@@ -126,32 +81,50 @@ const fetchDataUp3 = async (uid: number) => {
 const fetchDataUlp = async (up3: number) => {
   try {
     const res = await getUlp(up3)
-    itemsUlp.value = res.data.map((item: any) => (
-      {
-        id: item.id,
-        name: item.nama,
-      }
-    ));
+    itemsUlp.value = res.data.map((item: any) => ({
+      id: item.id,
+      name: item.nama
+    }))
   } catch (error) {
     console.error('Error fetching data:', error)
   }
 }
 const fetchDataPosko = async (up3: number) => {
-  clearTimeout(timeout.value)
-  timeout.value = setTimeout(async () => {
-    try {
-      const res = await getPosko(up3)
-      itemsPosko.value = res.data.map((item: any) => (
-        {
-          id: item.id,
-          name: item.nama,
-        }
-      ));
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-  }, 300);
-};
+  try {
+    const res = await getPosko(up3)
+    itemsPosko.value = res.data.map((item: any) => ({
+      id: item.id,
+      name: item.nama
+    }))
+  } catch (error) {
+    console.error('Error fetching data:', error)
+  }
+}
+const fetchRegional = () => {
+  itemsRegional.value = [
+    { id: '1', name: 'Wilayah Sumatera' },
+    { id: '2', name: 'Wilayah Jawa Bali' },
+    { id: '3', name: 'Wilayah Kalimantan' },
+    { id: '4', name: 'Wilayah Sulawesi' },
+    { id: '5', name: 'Wilayah Nusa Tenggara' },
+    { id: '6', name: 'Wilayah Maluku Papua' }
+  ]
+}
+const fetchStatus = (data: any) => {
+  const status = [
+    { id: '8', name: 'Selesai' },
+    { id: '7', name: 'Nyala' },
+    { id: '6', name: 'Pengalihan' },
+    { id: '5', name: 'Dialihkan' },
+    { id: '4', name: 'Dalam Pengerjaan' },
+    { id: '3', name: 'Dalam Perjalanan' },
+    { id: '2', name: 'Penugasan Regu' },
+    { id: '1', name: 'lapor' }
+  ]
+  const filteredStatus = status.find((item) => item.id == data)
+  const name = filteredStatus ? filteredStatus.name : null
+  return name
+}
 const selectedUid = (value: any) => {
   useRegionStore().setData(value.id)
   fetchDataUp3(value.id)
@@ -173,4 +146,22 @@ const selectedUlp = (value: any) => {
   useUlpStore().setData(value.id)
 }
 
-export { selectedUid, selectedUp3Posko, selectedUp3Ulp, selectedPosko, selectedUlp, fetchMedia,fetchStatus,fetchUidWithRegional,fetchRegional, fetchUid, itemsUid, itemsUp3, itemsPosko, itemsRegional, itemsMedia, itemsUlp, months, years };
+export {
+  selectedUid,
+  selectedUp3Posko,
+  selectedUp3Ulp,
+  selectedPosko,
+  selectedUlp,
+  fetchRegional,
+  fetchUid,
+  fetchMedia,
+  fetchStatus,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  itemsRegional,
+  itemsMedia,
+  itemsUlp,
+  months,
+  years
+}
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 14889e7..5d2cf54 100755
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -1,9 +1,20 @@
 <template>
-  <Filters @reset-form="runReset = !runReset" @run-search="() => filterData(filters)" class="mb-4">
-    <Type1 :run-reset="runReset" @update:filters="(value) => {
-      filters = value
-    }
-      " />
+  <Filters
+    @run-search="
+      () => {
+        console.log(filters)
+        filterData(filters)
+      }
+    "
+    class="mb-4"
+  >
+    <Type1
+      @update:filters="
+        (value) => {
+          filters = value
+        }
+      "
+    />
   </Filters>
 
   <div id="dataTable">
@@ -339,7 +350,6 @@ const { onResult, onError, loading, refetch } = useQuery(
     idUp3: 0
   }
 )
-
 const onSelectionChanged = ({ selectedRowsData }: any) => {
   const data = selectedRowsData[0]
   dataDetail.value = data
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 05786d5..e9ce7fd 100755
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -14,12 +14,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useFiltersStore } from '@/stores/filters'
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
 
 // Dapatkan nama rute menggunakan computed property
 const pageTitle = computed(() => route.name)
-const filters = useFiltersStore()
 </script>
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 00845ce..2ec4d57 100755
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -76,19 +76,15 @@ const show = ref(false)
       >
         <ComboboxInput
           class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          :placeholder="selected.name"
           :displayValue="(item: any) => (show || open ? '' : item.name)"
           @change="query = $event.target.value"
-          @click="show = true"
-          @blur="show = false"
-          defaultValue=""
         />
-
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>
       <TransitionRoot
-        :show="show || open"
         leave="transition ease-in duration-100"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 216fe22..cc340bc 100755
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,31 +1 @@
-<template>
-  <div>
-    <fieldset>
-      <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
-        <div
-          v-for="item in radioItems"
-          :key="item.id"
-          class="flex items-center"
-        >
-          <input
-            :id="item.id"
-            type="radio"
-            name="radio"
-            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
-          />
-          <label
-            :for="item.id"
-            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
-            >{{ item.title }}</label
-          >
-        </div>
-      </div>
-    </fieldset>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  radioItems: Object
-})
-</script>
+<template></template>