create filters components

src/assets/css/style.css

@@ -705,7 +705,6 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
-<<<<<<< HEAD
 .container {
   width: 100%;
 }
@@ -738,7 +737,8 @@ select {
   .container {
     max-width: 1536px;
   }
-=======
+}
+
 /* NavBar */
 
 .menu-item {
@@ -870,7 +870,6 @@ select {
 
 .group:hover .aside-single-item-icon-inactive {
   stroke: #fff;
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 }
 
 .sr-only {
@@ -962,6 +961,10 @@ select {
   top: 50%;
 }
 
+.top-16 {
+  top: 4rem;
+}
+
 .top-3 {
   top: 0.75rem;
 }
@@ -1248,6 +1251,10 @@ select {
   max-height: 0px;
 }
 
+.max-h-60 {
+  max-height: 15rem;
+}
+
 .max-h-80 {
   max-height: 20rem;
 }
@@ -1312,6 +1319,10 @@ select {
   width: 1.5rem;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .w-8 {
   width: 2rem;
 }
@@ -1533,6 +1544,14 @@ select {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -1568,6 +1587,12 @@ select {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  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)));
@@ -1589,6 +1614,10 @@ select {
   --tw-divide-opacity: 0.1;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1615,6 +1644,10 @@ select {
   border-radius: 0.25rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1688,6 +1721,10 @@ select {
   border-style: solid;
 }
 
+.border-none {
+  border-style: none;
+}
+
 .border-black\/\[\.1\] {
   border-color: rgb(0 0 0 / .1);
 }
@@ -1702,19 +1739,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-<<<<<<< HEAD
-.border-gray-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-border-opacity));
-}
-
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
-=======
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 .border-transparent {
   border-color: transparent;
 }
@@ -1729,6 +1758,11 @@ select {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1754,14 +1788,6 @@ select {
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-<<<<<<< HEAD
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-
-=======
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
@@ -1807,6 +1833,11 @@ select {
   background-color: rgb(204 235 239 / var(--tw-bg-opacity));
 }
 
+.bg-teal-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -1861,13 +1892,10 @@ select {
   --tw-bg-opacity: 0.8;
 }
 
-<<<<<<< HEAD
 .bg-none {
   background-image: none;
 }
 
-=======
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 .fill-gray-400 {
   fill: #9ca3af;
 }
@@ -1888,8 +1916,6 @@ select {
   fill: #007b8d;
 }
 
-<<<<<<< HEAD
-=======
 .fill-white {
   fill: #fff;
 }
@@ -1898,7 +1924,6 @@ select {
   stroke: #fff;
 }
 
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 .p-1 {
   padding: 0.25rem;
 }
@@ -1915,6 +1940,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .\!px-2 {
   padding-left: 0.5rem !important;
   padding-right: 0.5rem !important;
@@ -2020,11 +2049,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-}
-
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
@@ -2038,6 +2062,10 @@ select {
   padding-left: 0.25rem;
 }
 
+.pl-10 {
+  padding-left: 2.5rem;
+}
+
 .pl-11 {
   padding-left: 2.75rem;
 }
@@ -2046,6 +2074,10 @@ select {
   padding-left: 0.75rem;
 }
 
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
 .pr-12 {
   padding-right: 3rem;
 }
@@ -2244,6 +2276,11 @@ select {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2319,6 +2356,11 @@ select {
   color: rgb(15 23 42 / var(--tw-text-opacity));
 }
 
+.text-teal-600 {
+  --tw-text-opacity: 1;
+  color: rgb(13 148 136 / var(--tw-text-opacity));
+}
+
 .text-vtd-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -2399,6 +2441,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2580,18 +2628,11 @@ select {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-<<<<<<< HEAD
-.hover\:overflow-y-auto:hover {
-  overflow-y: auto;
-}
-
 .hover\:border-primary-500:hover {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
 }
 
-=======
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -2771,6 +2812,29 @@ select {
   outline-color: #4f46e5;
 }
 
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-white:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
+.focus-visible\:ring-opacity-75:focus-visible {
+  --tw-ring-opacity: 0.75;
+}
+
+.focus-visible\:ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
+.focus-visible\:ring-offset-teal-300:focus-visible {
+  --tw-ring-offset-color: #5eead4;
+}
+
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -2795,7 +2859,6 @@ select {
   background-color: rgb(53 124 141 / var(--tw-bg-opacity));
 }
 
-<<<<<<< HEAD
 .disabled\:text-primary-300:disabled {
   --tw-text-opacity: 1;
   color: rgb(104 157 170 / var(--tw-text-opacity));
@@ -2806,13 +2869,6 @@ select {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
-.group:hover .group-hover\:bg-primary-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(205 222 227 / var(--tw-bg-opacity));
-}
-
-=======
->>>>>>> 1885f28d62cccd232f8b53fac507e44d59bb191d
 .group:hover .group-hover\:fill-gray-500 {
   fill: #6b7280;
 }
@@ -3313,6 +3369,10 @@ select {
     width: fit-content;
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .lg\:flex-nowrap {
     flex-wrap: nowrap;
   }

src/components/Button.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 
 const props = defineProps({
   type: {
-    type: String as () => "button" | "submit" | "reset",
+    type: String as () => 'button' | 'submit' | 'reset',
-    default: "button",
+    default: 'button'
   },
   onClick: {
     type: Function as unknown as () => (payload: MouseEvent) => void,
-    default: () => { },
+    default: () => {}
   },
   label: {
     type: String,
-    default: "",
+    default: ''
   },
   disabled: {
     type: Boolean,
-    default: false,
+    default: false
   },
   isLoading: {
     type: Boolean,
-    default: false,
+    default: false
   },
   className: {
     type: String,
-    default: "",
+    default: ''
   },
   styleType: {
-    type: String as () => "filled" | "secondary" | "outline" | "text",
+    type: String as () => 'filled' | 'secondary' | 'outline' | 'text',
-    default: "filled"
+    default: 'filled'
   }
-});
+})
 
 const buttonStyle = computed(() => {
   switch (props.styleType) {
@@ -50,21 +50,39 @@ const buttonStyle = computed(() => {
 </script>
 
 <template>
-  <button :type="type" @click="onClick" :disabled="isLoading ? true : disabled"
+  <button
-    :class="['px-3 py-2 mt-2 text-sm font-semibold w-full', buttonStyle, className]">
+    :type="type"
+    @click="onClick"
+    :disabled="isLoading ? true : disabled"
+    :class="['px-3 py-2 text-sm font-semibold', buttonStyle, className]"
+  >
     <div class="flex items-center" v-if="!isLoading">
       <span class="me-1">{{ label }}</span>
       <slot></slot>
     </div>
     <span v-else>
       <center>
-        <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
+        <svg
-          viewBox="0 0 24 24">
+          class="animate-spin h-5 w-5 text-white"
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          xmlns="http://www.w3.org/2000/svg"
-          <path class="opacity-75" fill="currentColor"
+          fill="none"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+          viewBox="0 0 24 24"
-          </path>
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
         </svg>
       </center>
     </span>
-  </button></template>
+  </button>
+</template>

src/components/Form/Filters.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+  // components
+  import Button from '@/components/Button.vue';
+
+  // icons
+  import {
+    PhArrowsCounterClockwise, 
+    PhFileText,
+    PhMagnifyingGlass 
+  } from '@phosphor-icons/vue';
+
+  defineProps({
+    reportButton: {
+      type: Boolean,
+      default: false
+    }
+  })
+</script>
+
+<template>
+  <div class="filters rounded-2xl shadow">
+
+    <form class="filter-body bg-gray-50 mx-auto space-y-3 p-4">
+      <slot></slot>
+    </form>
+    
+    <div class="filter-footer px-4 py-3 bg-primary-50 flex justify-end">
+      <div class="filter-buttons flex gap-3 flex-wrap">
+        <Button label="Ulangi" style-type="outline" class-name="bg-white">
+          <PhArrowsCounterClockwise size="18" class="ml-1" weight="regular" />
+        </Button>
+
+        <Button v-if="reportButton" label="Lihat Laporan" style-type="outline" class-name="bg-white">
+          <PhFileText size="18" class="ml-1" weight="regular" />
+        </Button>
+
+        <Button label="Cari Data">
+          <PhMagnifyingGlass size="18" class="ml-1" weight="regular" />
+        </Button>
+      </div>
+    </div>
+    
+  </div>
+</template>

src/components/Form/FiltersType/Type1.vue

@@ -0,0 +1,67 @@
+<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>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Regional</option>
+      </select>
+    </div>
+  </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>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Unit Induk Distribusi/Wilayah</option>
+      </select>
+    </div>
+  </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 Pelaksanaan Pelayanan Pelanggan:</label>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
+      </select>
+    </div>
+  </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 Layanan Pelanggan:</label>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Unit Layanan Pelanggan</option>
+      </select>
+    </div>
+  </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>
+
+    <div class="flex gap-2">
+
+      <div class="flex-1 relative w-full overflow-hidden rounded-lg bg-gray-200">
+        <select
+          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">
+          <option value="">Juli</option>
+        </select>
+      </div>
+
+      <div class="flex-1 relative w-full overflow-hidden rounded-lg bg-gray-200">
+        <select
+          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">
+          <option value="">2023</option>
+        </select>
+      </div>
+
+    </div>
+  </div>
+</template>

src/components/Form/FiltersType/Type2.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
+  import VueTailwindDatepicker from 'vue-tailwind-datepicker'
+
+  const dateValue = ref([])
+  const formatter = ref({
+    date: 'DD MMM YYYY',
+    month: 'MMM'
+  })
+</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>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Unit Induk Distribusi/Wilayah</option>
+      </select>
+    </div>
+  </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 Pelaksanaan Pelayanan Pelanggan:</label>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Unit Pelaksanaan Pelayanan Pelanggan</option>
+      </select>
+    </div>
+  </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 Layanan Pelanggan:</label>
+
+    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+      <select
+        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">
+        <option value="">Semua Unit Layanan Pelanggan</option>
+      </select>
+    </div>
+  </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>
+
+    <div class="flex-1 relative w-full rounded-lg bg-gray-200">
+      <vue-tailwind-datepicker 
+        input-classes="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"
+        v-model="dateValue"
+        :formatter="formatter"
+        separator="   s/d   "
+        :shortcuts="false"
+        :auto-apply="false"
+      />
+    </div>
+
+  </div>
+</template>

src/components/InputText.vue

@@ -46,7 +46,7 @@ const switchInputType = () => {
     <div :class="['relative w-full overflow-hidden rounded-lg bg-gray-50 ', className]">
         <input autocomplete="off" :type="inputType" :placeholder="placeholder" :value="value" @input="updateValue($event)"
             :disabled="disabled" :readonly="readonly"
-            :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-50 focus:outline-0 focus:border-0 focus:ring-0']" />
+            :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']" />
         <span @click="switchInputType" v-if="type == 'password'"
             class="absolute top-0 bottom-0 right-0 mx-3 my-auto cursor-pointer h-fit">
             <svg width="20" height="20" viewBox="0 0 20 20"

src/main.ts

@@ -7,6 +7,7 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+
 app.use(createPinia())
 app.use(router)
 app.mount('#app')

src/router/index.ts

@@ -457,6 +457,11 @@ const routes: RouteRecordRaw[] = [
     name: 'Login',
     component: LoginView
   },
+  {
+    path: '/playground',
+    name: 'Playground',
+    component: TestView
+  },
   {
     path: '/404',
     name: 'Not Found',

src/views/TestView.vue

@@ -1,19 +1,96 @@
 <script setup lang="ts">
-  import Button from '@/components/Button.vue'
+  import Filters from '@/components/Form/Filters.vue'
+  import Type2 from '@/components/Form/FiltersType/Type2.vue'
 </script>
 
 <template>
-  <div class="container mx-auto py-5">
+  <div class="container h-full p-5 mx-auto">
-    <p>Default / filled</p>
+    <Filters :reportButton="true" >
-    <Button label="Button" className="mb-3 flex-1" />
+      <Type2/>
-  
+    </Filters>
-    <p>secondary</p>
-    <Button label="Button" styleType="secondary" className="mb-3" />
-
-    <p>outline</p>
-    <Button label="Button" styleType="outline" className="mb-3"/>
-
-    <p>text</p>
-    <Button label="Button" styleType="text" />
   </div>
 </template>
+
+<!-- <template>
+  <div class="fixed top-16 w-72">
+    <Combobox v-model="selected" v-slot="{ open }">
+      <div class="relative mt-1">
+        <div
+          class="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+          <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
+            :displayValue="(person: any) => (show || open) ? '' : person.name" @change="query = $event.target.value" @click="show = true" @blur="show = false" defaultValue="sasa" />
+
+          <ComboboxButton id="Test" 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"
+          @after-leave="query = ''">
+
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <div v-if="filteredPeople.length === 0 && query !== ''"
+              class="relative cursor-default select-none py-2 px-4 text-gray-700">
+              Nothing found.
+            </div>
+
+            <ComboboxOption v-for="person in filteredPeople" as="template" :key="person.id" :value="person"
+              v-slot="{ selected, active }">
+              <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
+                'bg-teal-600 text-white': active,
+                'text-gray-900': !active,
+              }">
+                <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                  {{ person.name }}
+                </span>
+                <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{ 'text-white': active, 'text-teal-600': !active }">
+                  <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot,
+} from '@headlessui/vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+
+const people = [
+  { id: 1, name: 'Semua Regional' },
+  { id: 2, name: 'Arlene Mccoy' },
+  { id: 3, name: 'Devon Webb' },
+  { id: 4, name: 'Tom Cook' },
+  { id: 5, name: 'Tanya Fox' },
+  { id: 6, name: 'Hellen Schmidt' },
+]
+
+let selected = ref(people[0])
+let query = ref('')
+
+let filteredPeople = computed(() =>
+  query.value === ''
+    ? people
+    : people.filter((person) =>
+      person.name
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+    )
+)
+
+const show = ref(false)
+</script> -->
+