create filters components

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>