From c9e200c1745087b2e4d19efef8b976370aebf20f Mon Sep 17 00:00:00 2001
From: kur0nek-o <maulana21mh@gmail.com>
Date: Thu, 2 Nov 2023 17:00:17 +0700
Subject: [PATCH] completed create all filters type

---
 package-lock.json                             |   4 +-
 src/assets/css/style.css                      | 155 +++++++++++++-----
 src/components/DatePicker.vue                 |   1 -
 src/components/Form/FiltersType/Type1.vue     |   8 +-
 src/components/Form/FiltersType/Type10.vue    |  44 +++++
 src/components/Form/FiltersType/Type11.vue    |  48 ++++++
 src/components/Form/FiltersType/Type12.vue    |  49 ++++++
 src/components/Form/FiltersType/Type13.vue    |  41 +++++
 src/components/Form/FiltersType/Type14.vue    |  34 ++++
 src/components/Form/FiltersType/Type15.vue    |  25 +++
 src/components/Form/FiltersType/Type16.vue    |  38 +++++
 src/components/Form/FiltersType/Type17.vue    |  46 ++++++
 src/components/Form/FiltersType/Type2.vue     |  10 +-
 src/components/Form/FiltersType/Type3.vue     |   8 +-
 src/components/Form/FiltersType/Type4.vue     |  10 +-
 src/components/Form/FiltersType/Type5.vue     |   8 +-
 src/components/Form/FiltersType/Type6.vue     |  10 +-
 src/components/Form/FiltersType/Type7.vue     |  19 ++-
 src/components/Form/FiltersType/Type8.vue     |  26 +++
 src/components/Form/FiltersType/Type9.vue     |  39 +++++
 src/components/Form/InlineRadioGroup.vue      |  43 +++++
 src/components/Form/InputWithFilter.vue       |  54 ++++++
 src/components/Form/InputWithSuffix.vue       |  34 ++++
 .../Navigation/Aside/AsideMenuSingle.vue      |   2 +-
 src/components/Pages/Gangguan/Table_1.vue     |   9 +-
 src/components/Pages/MenuProvider.vue         |  51 +++---
 src/router/index.ts                           |   3 +-
 src/stores/filters.ts                         |  24 +++
 src/stores/menu.ts                            |   9 +-
 src/views/TestView.vue                        |  37 ++++-
 30 files changed, 770 insertions(+), 119 deletions(-)
 create mode 100644 src/components/Form/FiltersType/Type10.vue
 create mode 100644 src/components/Form/FiltersType/Type11.vue
 create mode 100644 src/components/Form/FiltersType/Type12.vue
 create mode 100644 src/components/Form/FiltersType/Type13.vue
 create mode 100644 src/components/Form/FiltersType/Type14.vue
 create mode 100644 src/components/Form/FiltersType/Type15.vue
 create mode 100644 src/components/Form/FiltersType/Type16.vue
 create mode 100644 src/components/Form/FiltersType/Type17.vue
 create mode 100644 src/components/Form/FiltersType/Type8.vue
 create mode 100644 src/components/Form/FiltersType/Type9.vue
 create mode 100644 src/components/Form/InlineRadioGroup.vue
 create mode 100644 src/components/Form/InputWithFilter.vue
 create mode 100644 src/components/Form/InputWithSuffix.vue
 create mode 100644 src/stores/filters.ts

diff --git a/package-lock.json b/package-lock.json
index a6bd914..0dddb7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "eis",
-  "version": "0.0.2",
+  "version": "0.0.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "eis",
-      "version": "0.0.2",
+      "version": "0.0.1",
       "dependencies": {
         "@headlessui/tailwindcss": "^0.2.0",
         "@headlessui/vue": "^1.7.16",
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 8239630..cada6f4 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -705,40 +705,6 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 /* NavBar */
 
 .menu-item {
@@ -1085,6 +1051,10 @@ select {
   margin-right: 0.5rem;
 }
 
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
+
 .mt-0 {
   margin-top: 0px;
 }
@@ -1200,6 +1170,10 @@ select {
   height: 2.25rem;
 }
 
+.h-\[16px\] {
+  height: 16px;
+}
+
 .h-\[2\.7rem\] {
   height: 2.7rem;
 }
@@ -1208,6 +1182,10 @@ select {
   height: 66px;
 }
 
+.h-\[7px\] {
+  height: 7px;
+}
+
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1305,6 +1283,10 @@ select {
   width: 2.25rem;
 }
 
+.w-\[16px\] {
+  width: 16px;
+}
+
 .w-\[2\.7rem\] {
   width: 2.7rem;
 }
@@ -1313,6 +1295,10 @@ select {
   width: 266px;
 }
 
+.w-\[7px\] {
+  width: 7px;
+}
+
 .w-auto {
   width: auto;
 }
@@ -1519,11 +1505,21 @@ select {
        column-gap: 0.25rem;
 }
 
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1537,9 +1533,8 @@ select {
   row-gap: 0.125rem;
 }
 
-.gap-x-1\.5 {
-  -moz-column-gap: 0.375rem;
-       column-gap: 0.375rem;
+.gap-y-1 {
+  row-gap: 0.25rem;
 }
 
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
@@ -1566,6 +1561,12 @@ select {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1692,6 +1693,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
@@ -1897,10 +1903,6 @@ select {
   padding: 1rem;
 }
 
-.p-5 {
-  padding: 1.25rem;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1946,6 +1948,11 @@ select {
   padding-right: 1.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -2007,6 +2014,10 @@ select {
   padding-left: 2.75rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2031,6 +2042,10 @@ select {
   padding-right: 1.25rem;
 }
 
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .pt-0 {
   padding-top: 0px;
 }
@@ -2059,10 +2074,6 @@ select {
   text-align: start;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -2303,6 +2314,11 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
+.text-primary-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 73 90 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -2751,10 +2767,20 @@ select {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
+.group:checked .group-checked\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 .group:hover .group-hover\:block {
   display: block;
 }
 
+.group:hover .group-hover\:bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -2787,6 +2813,21 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.peer:checked ~ .peer-checked\:border-primary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(3 91 113 / var(--tw-border-opacity));
+}
+
+.peer:checked ~ .peer-checked\:bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
+}
+
+.peer:checked ~ .peer-checked\:text-primary-500 {
+  --tw-text-opacity: 1;
+  color: rgb(3 91 113 / var(--tw-text-opacity));
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:bg-opacity-50 {
     --tw-bg-opacity: 0.5;
@@ -3022,12 +3063,36 @@ select {
     gap: 0.75rem;
   }
 
+  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
+  .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   .sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 1;
   }
diff --git a/src/components/DatePicker.vue b/src/components/DatePicker.vue
index 14bd28b..4792bd4 100644
--- a/src/components/DatePicker.vue
+++ b/src/components/DatePicker.vue
@@ -18,7 +18,6 @@
       :shortcuts="false"
       :auto-apply="false"
       v-slot="{ value, placeholder }"
-      overlay
     >
       <div class="flex">
         <div class="flex-1">
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 9a6f876..c4a5ed1 100644
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,13 +19,13 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
new file mode 100644
index 0000000..962353a
--- /dev/null
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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 Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <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 />
+  </div>
+
+  <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">Lapor Ulang:</label>
+
+    <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+      <Select placeholder="1" />
+      <small class="flex items-center">s/d</small>
+      <Select placeholder="2" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
new file mode 100644
index 0000000..0dc2729
--- /dev/null
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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 Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <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 />
+  </div>
+
+  <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">Durasi:</label>
+
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Durasi Menit" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <Select placeholder="1" />
+        <small class="flex items-center">s/d</small>
+        <Select placeholder="2" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
new file mode 100644
index 0000000..91533ab
--- /dev/null
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InputWithSuffix from '../InputWithSuffix.vue';
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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 Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+  
+  <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 />
+  </div>
+
+  <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">Durasi:</label>
+
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Durasi Menit" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <InputWithSuffix />
+        <small class="flex items-center">s/d</small>
+        <InputWithSuffix />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
new file mode 100644
index 0000000..2fe614a
--- /dev/null
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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 Layanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Layanan Pelanggan" />
+  </div>
+
+  <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 />
+  </div>
+
+  <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">Group By Kode Unit Distribusi:</label>
+
+    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
new file mode 100644
index 0000000..f705d7d
--- /dev/null
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <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">Distribusi/Wilayah:</label>
+
+    <Select placeholder="Semua Distribusi/Wilayah"/>
+  </div>
+
+  <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"
+      >Area:</label
+    >
+
+    <Select placeholder="Semua Area" />
+  </div>
+
+  <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"
+      >Posko:</label
+    >
+
+    <Select placeholder="Semua Posko" />
+  </div>
+
+  <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 />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type15.vue b/src/components/Form/FiltersType/Type15.vue
new file mode 100644
index 0000000..1760098
--- /dev/null
+++ b/src/components/Form/FiltersType/Type15.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+  import InputWithFilter from '../InputWithFilter.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+</script>
+
+<template>
+  <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">Jenis Pengaduan:</label>
+
+    <InlineRadioGroup :radio-items="[{id: 1, title: 'Gangguan', checked: true}, {id: 2, title: 'Keluhan'}]" />
+  </div>
+
+  <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">Cari Report Number:</label>
+
+    <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Nama Pelapor'}]" />
+  </div>
+
+  <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 />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
new file mode 100644
index 0000000..61a8e47
--- /dev/null
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+
+  <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">Media:</label>
+
+    <Select placeholder="Semua Media" />
+  </div>
+  
+  <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 />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
new file mode 100644
index 0000000..7bf412d
--- /dev/null
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InputWithFilter from '../InputWithFilter.vue'
+</script>
+
+<template>
+  <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 />
+  </div>
+
+  <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 PLN:</label>
+
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Pilih Unit" />
+
+      <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
+        <Select placeholder="Pilih Area" />
+        <Select placeholder="Pilih Rayon" />
+      </div>
+    </div>
+  </div>
+
+  <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">Status:</label>
+
+    <Select placeholder="Pilih Status"/>
+  </div>
+
+  <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"
+      >SLA:</label
+    >
+
+    <Select placeholder="Pilih Durasi SLA" />
+  </div>
+
+  <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">Cari Report Number:</label>
+
+    <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index cbb3577..43000fd 100644
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -4,19 +4,19 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Regional:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Regional:</label>
 
     <Select placeholder="Semua Regional"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -24,7 +24,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -32,7 +32,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
       <Select placeholder="Juli" />
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index d2fe98f..7896596 100644
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,7 +19,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -27,7 +27,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index 09ab030..8bbb211 100644
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,7 +19,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -27,7 +27,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Jenis Laporan:</label
     >
 
@@ -35,7 +35,7 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index 1ebc58e..1e4286f 100644
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,13 +19,13 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index 7fb4f77..2965ffe 100644
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -5,13 +5,13 @@
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,19 +19,19 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Lapor Ulang:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
       <Select placeholder="1" />
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index a5ea2cd..eaa7dc1 100644
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
   import Select from '@/components/Select.vue'
   import DatePicker from '@/components/DatePicker.vue'
+  import InputWithSuffix from '../InputWithSuffix.vue';
 </script>
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Induk Distribusi/Wilayah:</label>
 
     <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block"
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -19,27 +20,27 @@
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
 
     <Select placeholder="Semua Posko" />
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
 
     <DatePicker />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Durasi:</label>
+    <label class="text-gray-800 font-semibold mb-2 sm:mb-0 block">Durasi:</label>
 
-    <div class="flex flex-column">
-      <Select placeholder="Semua Posko" />
+    <div class="flex flex-col gap-y-1">
+      <Select placeholder="Durasi Menit" />
 
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
-        <Select placeholder="1" />
+        <InputWithSuffix />
         <small class="flex items-center">s/d</small>
-        <Select placeholder="2" />
+        <InputWithSuffix />
       </div>
     </div>
   </div>
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
new file mode 100644
index 0000000..467c9cd
--- /dev/null
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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 />
+  </div>
+</template>
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
new file mode 100644
index 0000000..ebbe9f1
--- /dev/null
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.vue'
+  import DatePicker from '@/components/DatePicker.vue'
+  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+</script>
+
+<template>
+  <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 placeholder="Semua Unit Induk Distribusi/Wilayah"/>
+  </div>
+
+  <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 Pelaksanaan Pelayanan Pelanggan:</label
+    >
+
+    <Select placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
+  </div>
+
+  <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">Posko:</label>
+
+    <Select placeholder="Semua Posko" />
+  </div>
+
+  <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 />
+  </div>
+
+  <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">Group By Kode Unit Distribusi:</label>
+
+    <InlineRadioGroup :radio-items="[{id: 1, title: 'Tidak', checked: true}, {id: 2, title: 'Ya, Grupkan'}]" />
+  </div>
+</template>
diff --git a/src/components/Form/InlineRadioGroup.vue b/src/components/Form/InlineRadioGroup.vue
new file mode 100644
index 0000000..cad4cf1
--- /dev/null
+++ b/src/components/Form/InlineRadioGroup.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <fieldset>
+      <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
+        <div
+          v-for="item in radioItems"
+          :key="item.id"
+          class="flex items-center"
+        >
+          <input
+            :id="`${item.id}`"
+            type="radio"
+            name="radio"
+            :checked="item.hasOwnProperty('checked') && item.checked === true"
+            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">
+import { defineProps, type PropType } from 'vue'
+
+interface Item {
+  id: number;
+  title: string;
+  checked?: boolean;
+}
+
+defineProps({
+  radioItems: {
+    type: Array as PropType<Item[]>,
+    required: true
+  }
+})
+</script>
diff --git a/src/components/Form/InputWithFilter.vue b/src/components/Form/InputWithFilter.vue
new file mode 100644
index 0000000..d2de0cb
--- /dev/null
+++ b/src/components/Form/InputWithFilter.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { PhMagnifyingGlass } from '@phosphor-icons/vue';
+import { type PropType } from 'vue'
+
+interface FilterItems {
+  id: number;
+  title: string;
+}
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  filters: {
+    type: Array as PropType<FilterItems[]>,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="relative w-full overflow-hidden rounded-lg">
+    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+      <PhMagnifyingGlass size="18" class="text-gray-900" weight="regular" />
+    </div>
+    <input
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      type="text"
+      class="w-full px-4 py-2 pl-10 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+    />
+    <div class="absolute inset-y-0 right-0 flex items-center">
+      <label for="filters" class="sr-only">filters</label>
+      <span class="block border border-gray-600 h-5"></span>
+      <select
+        id="filters"
+        name="filters"
+        class="h-full bg-gray-200 text-sm rounded-lg border-transparent py-0 pl-2 pr-7 text-gray-900 focus:outline-0 focus:border-0 focus:ring-0"
+      >
+        <option :key="filter.id" :value="filter.id" v-for="filter in filters">{{ filter.title }}</option>
+      </select>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
new file mode 100644
index 0000000..0a6d3c8
--- /dev/null
+++ b/src/components/Form/InputWithSuffix.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+  const props = defineProps({
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    }
+  })
+</script>
+
+<template>
+  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+    <input
+      autocomplete="off"
+      type="text"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      inputmode="numeric"
+      pattern="[0-9.]*"
+      oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
+      onblur="this.value = this.value ? this.value + ' Menit' : ''"
+      onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
+      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
+    />
+  </div>
+</template>
diff --git a/src/components/Navigation/Aside/AsideMenuSingle.vue b/src/components/Navigation/Aside/AsideMenuSingle.vue
index 23a9199..28fea29 100644
--- a/src/components/Navigation/Aside/AsideMenuSingle.vue
+++ b/src/components/Navigation/Aside/AsideMenuSingle.vue
@@ -29,7 +29,7 @@ const props = defineProps({
             <component :is="item.icon"
                 :class="[selected ? 'text-white fill-white' : 'text-aside group-hover:text-white group-hover:fill-white', 'mr-2 flex-shrink-0 h-6 w-6']"
                 aria-hidden="true" />
-            {{ item.name.split(' | ')[0] }}
+            {{ item.name }}
         </RouterLink>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Table_1.vue b/src/components/Pages/Gangguan/Table_1.vue
index 35c6bf6..6bd3302 100644
--- a/src/components/Pages/Gangguan/Table_1.vue
+++ b/src/components/Pages/Gangguan/Table_1.vue
@@ -72,6 +72,7 @@ import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { writeDataJson } from '@/utils/storage'
 import { useDialogStore } from '@/stores/dialog'
+import { useFiltersStore } from '@/stores/filters'
 
 const dialog = useDialogStore()
 const data = ref<Data1[]>([])
@@ -146,9 +147,13 @@ const showData = (data: string) => {
 }
 
 onMounted(() => {
-    createDummy()
-    // console.log(readDataJson('data-daftar-1'));
+    const filters = useFiltersStore()
 
+    createDummy()
+    filters.setConfig({
+        type: 'type-15',
+        reportButton: false
+    })
 })
 
 </script>
\ No newline at end of file
diff --git a/src/components/Pages/MenuProvider.vue b/src/components/Pages/MenuProvider.vue
index 3aa5895..023b7b3 100644
--- a/src/components/Pages/MenuProvider.vue
+++ b/src/components/Pages/MenuProvider.vue
@@ -2,17 +2,26 @@
     <main
         class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar">
         <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageMetaData[0] }}</h1>
+            <h1 class="text-xl font-medium md:text-3xl text-dark">{{ pageTitle }}</h1>
         </div>
         <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
-            <Filters :report-button="(typeof pageMetaData[2]) !== 'undefined'" class="mb-4" v-if="pageMetaData.length > 1">
-                <Type1 v-if="pageMetaData[1] == 'type-1'" />
-                <Type2 v-if="pageMetaData[1] == 'type-2'" />
-                <Type3 v-if="pageMetaData[1] == 'type-3'" />
-                <Type4 v-if="pageMetaData[1] == 'type-4'" />
-                <Type5 v-if="pageMetaData[1] == 'type-5'" />
-                <Type6 v-if="pageMetaData[1] == 'type-6'" />
-                <Type7 v-if="pageMetaData[1] == 'type-7'" />
+            <Filters :report-button="filters.config.reportButton" class="mb-4" v-if="filters.config.type">
+                <Type1 v-if="filters.config.type == 'type-1'" />
+                <Type2 v-else-if="filters.config.type == 'type-2'" />
+                <Type3 v-else-if="filters.config.type == 'type-3'" />
+                <Type4 v-else-if="filters.config.type == 'type-4'" />
+                <Type5 v-else-if="filters.config.type == 'type-5'" />
+                <Type6 v-else-if="filters.config.type == 'type-6'" />
+                <Type7 v-else-if="filters.config.type == 'type-7'" />
+                <Type8 v-else-if="filters.config.type == 'type-8'" />
+                <Type9 v-else-if="filters.config.type == 'type-9'" />
+                <Type10 v-else-if="filters.config.type == 'type-10'" />
+                <Type11 v-else-if="filters.config.type == 'type-11'" />
+                <Type12 v-else-if="filters.config.type == 'type-12'" />
+                <Type13 v-else-if="filters.config.type == 'type-13'" />
+                <Type14 v-else-if="filters.config.type == 'type-14'" />
+                <Type15 v-else-if="filters.config.type == 'type-15'" />
+                <Type17 v-else-if="filters.config.type == 'type-17'" />
             </Filters>
 
             <slot></slot>
@@ -31,20 +40,22 @@ import Type4 from '../Form/FiltersType/Type4.vue';
 import Type5 from '../Form/FiltersType/Type5.vue';
 import Type6 from '../Form/FiltersType/Type6.vue';
 import Type7 from '../Form/FiltersType/Type7.vue';
+import Type8 from '../Form/FiltersType/Type8.vue';
+import Type9 from '../Form/FiltersType/Type9.vue';
+import Type10 from '../Form/FiltersType/Type10.vue';
+import Type11 from '../Form/FiltersType/Type11.vue';
+import Type12 from '../Form/FiltersType/Type12.vue';
+import Type13 from '../Form/FiltersType/Type13.vue';
+import Type14 from '../Form/FiltersType/Type14.vue';
+import Type15 from '../Form/FiltersType/Type15.vue';
+import Type16 from '../Form/FiltersType/Type16.vue';
+import Type17 from '../Form/FiltersType/Type17.vue';
+import { useFiltersStore } from '@/stores/filters';
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()
 
 // Dapatkan nama rute menggunakan computed property
-const pageMetaData = computed(() => {
-    let result: string[] = [];
-
-    if (typeof route.name === 'string' && route.name.includes(' | ')) {
-        result = route.name.split(' | ');
-    } else if (typeof route.name === 'string') {
-        result = [route.name]
-    }
-
-    return result
-});
+const pageTitle = computed(() => route.name)
+const filters = useFiltersStore()
 </script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index ce9e476..e7d1983 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -69,9 +69,8 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1 | sa',
+                name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
                 component: GangguanTable1,
-                props: true
               },
               {
                 path: '2',
diff --git a/src/stores/filters.ts b/src/stores/filters.ts
new file mode 100644
index 0000000..61f57e9
--- /dev/null
+++ b/src/stores/filters.ts
@@ -0,0 +1,24 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { dispatchNotification } from '@/components/Notification'
+import { readData, removeData, writeData } from '@/utils/storage'
+import router from '@/router'
+
+export const useFiltersStore = defineStore('filters', () => {
+  const config = ref({
+    reportButton: false,
+    type: 'type-1'
+  })
+
+  const setConfig = (test: {reportButton: boolean, type: string}) => {
+    config.value = {
+      reportButton: test.reportButton,
+      type: test.type
+    }
+  }
+
+  return {
+    config,
+    setConfig
+  }
+})
\ No newline at end of file
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 706e4b8..325474c 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -6,8 +6,10 @@ import { routes } from '@/router'
 import type { MenuItemModel } from '@/types/menu'
 import { splitRoutePath } from '@/utils/texts'
 import { useCommandPalattesStore } from '@/stores/command'
+import { useFiltersStore } from './filters'
 
 export const useMenuStore = defineStore('menu', () => {
+    const filters = useFiltersStore()
     const route = useRoute()
     const navigation = ref<MenuItemModel[]>([])
     const sidebarOpen = ref(false)
@@ -56,11 +58,16 @@ export const useMenuStore = defineStore('menu', () => {
             }
         } else {
             collapseAllMenu()
+
+            filters.setConfig({
+                type: '',
+                reportButton: false
+            })
         }
     })
 
     const expandCurrentActiveMenu = (): void => {
-        const menuData = convertRouteToMenu(routes.at(0)?.children || [])
+        const menuData = convertRouteToMenu(routes[0]?.children || [])
         navigation.value = menuData
         menuSelected.value = router.currentRoute.value.fullPath
 
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index d5db478..216fe22 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,12 +1,31 @@
-<script setup lang="ts">
-  import Filters from '@/components/Form/Filters.vue'
-  import Type1 from '@/components/Form/FiltersType/Type1.vue'
-</script>
-
 <template>
-  <div class="container h-full p-5 mx-auto">
-    <Filters :reportButton="true" >
-      <Type1/>
-    </Filters>
+  <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>