diff --git a/src/components/Form/FiltersType/Type17Gangguan.vue b/src/components/Form/FiltersType/Type17Gangguan.vue
new file mode 100755
index 0000000..b2638bb
--- /dev/null
+++ b/src/components/Form/FiltersType/Type17Gangguan.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import Select from '@/components/Select.vue'
+import DatePicker from '@/components/DatePicker.vue'
+import InputWithFilter from '../InputWithFilter.vue'
+import {
+  selectedUid,
+  fetchUid,
+  itemsUid,
+  itemsUp3,
+  itemsPosko,
+  selectedPosko,
+  selectedUp3Posko
+} from './reference'
+import { onMounted, ref, watch, type PropType } from 'vue'
+const uidPlaceholder = 'Pilih Unit'
+const up3Placeholder = 'Pilih Area'
+const poskoPlaceholder = 'Pilih Posko'
+const statusPlaceholder = 'Pilih Status'
+const slaPlaceholder = 'Pilih Durasi SLA'
+
+const keyword = ref('')
+
+const emit = defineEmits(['update:filters'])
+const props = defineProps({
+  reportType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 1, title: 'No Lapor' },
+      { id: 2, title: 'Nama Pelapor' },
+      { id: 3, title: 'Deskripsi' }
+    ]
+  },
+  statusType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 1, name: 'Lapor' },
+      { id: 2, name: 'Penugasan Regu' },
+      { id: 3, name: 'Dalam Perjalanan' },
+      { id: 4, name: 'Dalam Pengerjaan' },
+      { id: 5, name: 'Konfirmasi' }
+    ]
+  },
+  slaType: {
+    type: Array as PropType<any[]>,
+    default: [
+      {
+        id: 1,
+        name: '45 Menit',
+        time: 45
+      },
+      {
+        id: 2,
+        name: '3 Jam',
+        time: 180
+      },
+      {
+        id: 3,
+        name: '1 Hari',
+        time: 1440
+      }
+    ]
+  }
+})
+
+const data = ref({
+  uid: { id: 0, name: uidPlaceholder },
+  up3: { id: 0, name: up3Placeholder },
+  posko: { id: 0, name: poskoPlaceholder },
+  status: props.statusType[0],
+  keyword: keyword.value,
+  searchBy: props.reportType[0]?.title,
+  sla: props.slaType[0],
+  periode: ''
+})
+const renderUp3 = ref(false)
+const renderPosko = ref(false)
+
+watch(data, (value) => {
+  emit('update:filters', value)
+})
+
+const setUid = (value: any) => {
+  selectedUid(value)
+  data.value = {
+    ...data.value,
+    uid: value,
+    up3: {
+      id: 0,
+      name: up3Placeholder
+    },
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderUp3.value = true
+  renderPosko.value = true
+  setTimeout(() => {
+    renderUp3.value = false
+    renderPosko.value = false
+  }, 200)
+}
+
+const setUp3 = (value: any) => {
+  selectedUp3Posko(value)
+  data.value = {
+    ...data.value,
+    up3: value,
+    posko: { id: 0, name: poskoPlaceholder }
+  }
+
+  renderPosko.value = true
+  setTimeout(() => {
+    renderPosko.value = false
+  }, 200)
+}
+
+const setPosko = (value: any) => {
+  selectedPosko(value)
+  data.value = {
+    ...data.value,
+    posko: value
+  }
+}
+
+const setStatus = (value: any) => {
+  data.value = {
+    ...data.value,
+    status: value
+  }
+}
+
+const changeKeyword = (value: string) => {
+  data.value = {
+    ...data.value,
+    keyword: value
+  }
+}
+
+const changeReportTypeSelected = (id: any) => {
+  data.value = {
+    ...data.value,
+    searchBy: props.reportType.find((item) => item.id === id)?.name
+  }
+}
+
+const setSla = (value: any) => {
+  data.value = {
+    ...data.value,
+    sla: value
+  }
+}
+
+onMounted(() => {
+  fetchUid()
+  emit('update:filters', data.value)
+})
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Periode Tanggal:</label>
+
+      <DatePicker @update:date-value="(value) => (data.periode = value)" />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Unit PLN:</label>
+
+      <div class="flex flex-col gap-y-1">
+        <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
+
+        <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+          <Select
+            v-if="renderUp3"
+            @update:selected="setUp3($event)"
+            :data="itemsUp3"
+            :placeholder="up3Placeholder"
+          />
+          <Select
+            v-else
+            @update:selected="setUp3($event)"
+            :data="itemsUp3"
+            :placeholder="up3Placeholder"
+          />
+          <Select
+            v-if="renderPosko"
+            @update:selected="setPosko($event)"
+            :data="itemsPosko"
+            :placeholder="poskoPlaceholder"
+          />
+          <Select
+            v-else
+            @update:selected="setPosko($event)"
+            :data="itemsPosko"
+            :placeholder="poskoPlaceholder"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Status:</label>
+
+      <Select
+        @update:selected="setStatus($event)"
+        :data="statusType"
+        :placeholder="statusPlaceholder"
+      />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">SLA:</label>
+
+      <Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
+    </div>
+
+    <div class="flex flex-col flex-1 space-y-2">
+      <label class="filter-input-label">Pencarian:</label>
+
+      <InputWithFilter
+        placeholder="Cari"
+        :filters="reportType"
+        @update:keyword="changeKeyword"
+        @update:filters="changeReportTypeSelected"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17Keluhan.vue
similarity index 78%
rename from src/components/Form/FiltersType/Type17.vue
rename to src/components/Form/FiltersType/Type17Keluhan.vue
index 56f5ac8..e28a770 100755
--- a/src/components/Form/FiltersType/Type17.vue
+++ b/src/components/Form/FiltersType/Type17Keluhan.vue
@@ -11,7 +11,7 @@ import {
   itemsUp3,
   itemsUlp
 } from './reference'
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, type PropType } from 'vue'
 const uidPlaceholder = 'Pilih Unit'
 const up3Placeholder = 'Pilih Area'
 const ulpPlaceholder = 'Pilih Rayon'
@@ -19,46 +19,57 @@ const statusPlaceholder = 'Pilih Status'
 const slaPlaceholder = 'Pilih Durasi SLA'
 
 const keyword = ref('')
-const reportType = [
-  { id: 1, title: 'No Lapor' },
-  { id: 2, title: 'Nama Pelapor' },
-  { id: 3, title: 'Permasalahan' }
-]
-const searchBy = ref<any>(reportType[0].title)
 
-const statusType = [
-  { id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
-  { id: 2, name: 'Dalam Proses Manager Unit' },
-  { id: 3, name: 'Dalam Proses Bidang Unit' },
-  { id: 4, name: 'Selesai Dijawab Bidang Unit' },
-  { id: 5, name: 'Konfirmasi' }
-]
-const status = ref(statusType[0])
-
-const slaType = [
-  {
-    id: 1,
-    name: '45 Menit',
-    time: 45
-  },
-  {
-    id: 2,
-    name: '3 Jam',
-    time: 180
-  },
-  {
-    id: 3,
-    name: '1 Hari',
-    time: 1440
-  },
-  {
-    id: 4,
-    name: '3 Hari',
-    time: 4320
-  }
-]
-const sla = ref(slaType[0])
 const emit = defineEmits(['update:filters'])
+const props = defineProps({
+  reportType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 1, name: 'No Lapor' },
+      { id: 2, name: 'Nama Pelapor' },
+      { id: 3, name: 'Permasalahan' }
+    ]
+  },
+  statusType: {
+    type: Array as PropType<any[]>,
+    default: [
+      { id: 1, name: 'Menunggu Tanggapan Supervisor CC' },
+      { id: 2, name: 'Dalam Proses Manager Unit' },
+      { id: 3, name: 'Dalam Proses Bidang Unit' },
+      { id: 4, name: 'Selesai Dijawab Bidang Unit' },
+      { id: 5, name: 'Konfirmasi' }
+    ]
+  },
+  slaType: {
+    type: Array as PropType<any[]>,
+    default: [
+      {
+        id: 1,
+        name: '45 Menit',
+        time: 45
+      },
+      {
+        id: 2,
+        name: '3 Jam',
+        time: 180
+      },
+      {
+        id: 3,
+        name: '1 Hari',
+        time: 1440
+      },
+      {
+        id: 4,
+        name: '3 Hari',
+        time: 4320
+      }
+    ]
+  }
+})
+
+const searchBy = ref<any>(props.reportType[0].title)
+const status = ref(props.statusType[0])
+const sla = ref(props.slaType[0])
 
 const data = ref({
   uid: { id: 0, name: uidPlaceholder },
@@ -130,7 +141,7 @@ const changeKeyword = (value: string) => {
 }
 
 const changeReportTypeSelected = (id: any) => {
-  searchBy.value = reportType.find((item) => item.id == id)?.title
+  searchBy.value = props.reportType.find((item) => item.id == id)?.title
   data.value.searchBy = searchBy.value
 }
 
diff --git a/src/components/Form/FiltersType/index.ts b/src/components/Form/FiltersType/index.ts
index adbde8f..bde2bc8 100755
--- a/src/components/Form/FiltersType/index.ts
+++ b/src/components/Form/FiltersType/index.ts
@@ -1,18 +1,19 @@
-export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue' 
-export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue' 
-export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue' 
-export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue' 
-export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue' 
-export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue' 
-export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue' 
-export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue' 
-export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue' 
-export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue' 
-export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue' 
-export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue' 
-export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue' 
-export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue' 
-export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue' 
-export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue' 
-export { default as Type17 } from '@/components/Form/FiltersType/Type17.vue' 
-export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue' 
+export { default as Type1 } from '@/components/Form/FiltersType/Type1.vue'
+export { default as Type2 } from '@/components/Form/FiltersType/Type2.vue'
+export { default as Type3 } from '@/components/Form/FiltersType/Type3.vue'
+export { default as Type4 } from '@/components/Form/FiltersType/Type4.vue'
+export { default as Type5 } from '@/components/Form/FiltersType/Type5.vue'
+export { default as Type6 } from '@/components/Form/FiltersType/Type6.vue'
+export { default as Type7 } from '@/components/Form/FiltersType/Type7.vue'
+export { default as Type8 } from '@/components/Form/FiltersType/Type8.vue'
+export { default as Type9 } from '@/components/Form/FiltersType/Type9.vue'
+export { default as Type10 } from '@/components/Form/FiltersType/Type10.vue'
+export { default as Type11 } from '@/components/Form/FiltersType/Type11.vue'
+export { default as Type12 } from '@/components/Form/FiltersType/Type12.vue'
+export { default as Type13 } from '@/components/Form/FiltersType/Type13.vue'
+export { default as Type14 } from '@/components/Form/FiltersType/Type14.vue'
+export { default as Type15 } from '@/components/Form/FiltersType/Type15.vue'
+export { default as Type16 } from '@/components/Form/FiltersType/Type16.vue'
+export { default as Type17Gangguan } from '@/components/Form/FiltersType/Type17Gangguan.vue'
+export { default as Type17Keluhan } from '@/components/Form/FiltersType/Type17Keluhan.vue'
+export { default as Type18 } from '@/components/Form/FiltersType/Type18.vue'
diff --git a/src/components/Pages/Transaksi/Transaksi.vue b/src/components/Pages/Transaksi/Transaksi.vue
index 7183d2c..09116a7 100755
--- a/src/components/Pages/Transaksi/Transaksi.vue
+++ b/src/components/Pages/Transaksi/Transaksi.vue
@@ -27,7 +27,8 @@
   </div>
 
   <Filters @reset-form="data = []" @run-search="() => filterData(filters)" class="mb-4">
-    <Type17 @update:filters="(value) => (filters = value)" />
+    <Type17Gangguan v-if="tab == 'gangguan'" @update:filters="(value) => (filters = value)" />
+    <!-- <Type17Keluhan v-else @update:filters="(value) => (filters = value)" /> -->
   </Filters>
 
   <div id="data">
@@ -229,13 +230,12 @@ import {
   DxColumn,
   DxColumnFixing,
   DxExport,
-  DxLoadPanel,
   DxPaging,
   DxScrolling,
   DxSearchPanel,
   DxSelection
 } from 'devextreme-vue/data-grid'
-import { Type17 } from '@/components/Form/FiltersType'
+import { Type17Gangguan } from '@/components/Form/FiltersType'
 import Filters from '@/components/Form/Filters.vue'
 import BufferDialog from '@/components/Dialogs/BufferDialog.vue'
 import { queries, requestGraphQl } from '@/utils/api/api.graphql'
@@ -401,7 +401,7 @@ const resetData = () => {
 const filterData = async (params: any) => {
   resetData()
   const dateValue = params.periode.split(' s/d ')
-  const { ulp, uid, up3, status, keyword, searchBy, sla } = params
+  const { posko, uid, up3, status, keyword, searchBy, sla } = params
   const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
@@ -409,10 +409,9 @@ const filterData = async (params: any) => {
     dateTo: dateValue[1]
       ? dateValue[1].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
-    idPosko: 0,
+    idPosko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0,
-    idUlp: ulp ? ulp.id : 0,
     tipe_sla: sla ? sla.id : 0,
     operator_sla: '',
     status_akhir: status ? status.name : '',
diff --git a/src/components/Select.vue b/src/components/Select.vue
index b0e35d9..c72462e 100755
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { RichSelect } from '@flavorly/vanilla-components';
+import { ref, computed, watch } from 'vue'
+import { RichSelect } from '@flavorly/vanilla-components'
 
 const props = defineProps({
   placeholder: {
@@ -23,7 +23,11 @@ const props = defineProps({
 
 const emit = defineEmits(['update:selected'])
 const data = computed(() =>
-  props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
+  props.placeholder == '0'
+    ? props.data
+    : props.data.length > 0
+      ? [{ id: 0, name: props.placeholder }, ...props.data]
+      : [{ id: 0, name: props.placeholder }]
 )
 const selected = ref(data.value[props.indexSelected].id)
 
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
index b2cbf9a..6a0a4df 100755
--- a/src/stores/filters.ts
+++ b/src/stores/filters.ts
@@ -18,7 +18,7 @@ import {
   Type14,
   Type15,
   Type16,
-  Type17,
+  Type17Gangguan,
   Type18
 } from '@/components/Form/FiltersType'
 
@@ -39,7 +39,7 @@ const test1: { [key: string]: any } = {
   'type-14': Type14,
   'type-15': Type15,
   'type-16': Type16,
-  'type-17': Type17,
+  'type-17': Type17Gangguan,
   'type-18': Type18
 }
 
@@ -54,7 +54,7 @@ export const useFiltersStore = defineStore('filters', () => {
     component: getFilters('')
   })
 
-  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean, type: string }) => {
+  const setConfig = ({ reportButton = false, type }: { reportButton?: boolean; type: string }) => {
     config.value = {
       reportButton,
       type,
@@ -66,4 +66,4 @@ export const useFiltersStore = defineStore('filters', () => {
     config,
     setConfig
   }
-})
\ No newline at end of file
+})