create more filters type

src/assets/css/style.css

@@ -1450,6 +1450,14 @@ select {
   scroll-padding-bottom: 0.5rem;
 }
 
+.auto-cols-auto {
+  grid-auto-columns: auto;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1506,6 +1514,16 @@ select {
   gap: 0.75rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -1519,6 +1537,11 @@ select {
   row-gap: 0.125rem;
 }
 
+.gap-x-1\.5 {
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -2036,6 +2059,10 @@ select {
   text-align: start;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;

src/components/DatePicker.vue

@@ -10,12 +10,28 @@
 </script>
 
 <template>
-  <vue-tailwind-datepicker 
+  <div class="flex">
-    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"
+    <vue-tailwind-datepicker 
-    v-model="dateValue"
+      v-model="dateValue"
-    :formatter="formatter"
+      :formatter="formatter"
-    separator="   s/d   "
+      separator="   s/d   "
-    :shortcuts="false"
+      :shortcuts="false"
-    :auto-apply="false"
+      :auto-apply="false"
-  />
+      v-slot="{ value, placeholder }"
+      overlay
+    >
+      <div class="flex">
+        <div class="flex-1">
+          <button
+            type="button"
+            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 class="text-gray-900">
+              {{ value || placeholder }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </vue-tailwind-datepicker>
+  </div>
 </template>

src/components/Form/FiltersType/Type2.vue

@@ -1,38 +1,42 @@
+<script setup lang="ts">
+  import Select from '@/components/Select.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">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>
 
-    <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
+    <Select placeholder="Semua Unit Induk Distribusi/Wilayah"/>
-      <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>
+    <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 placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
-      <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>
+    <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 placeholder="Semua Unit Layanan Pelanggan" />
-      <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>
+    <label class="text-gray-800 font-bold mb-2 sm:mb-0 block">Periode</label>
+
+    <div class="grid grid-cols-2 gap-x-2">
+      <Select placeholder="Juli" />
+      <Select placeholder="2023" />
+    </div>
   </div>
 </template>

src/components/Form/FiltersType/Type3.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-bold 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"
+      >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-bold 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-bold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+
+    <DatePicker />
+  </div>
+</template>

src/components/Form/FiltersType/Type4.vue

@@ -0,0 +1,42 @@
+<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-bold 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"
+      >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-bold 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-bold mb-2 sm:mb-0 block"
+      >Jenis Laporan:</label
+    >
+
+    <Select placeholder="Laporan Berulang Unit" />
+  </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>
+
+    <DatePicker />
+  </div>
+</template>

src/components/Form/FiltersType/Type5.vue

@@ -0,0 +1,32 @@
+<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-bold 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"
+      >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-bold 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>
+
+    <DatePicker />
+  </div>
+</template>

src/components/Form/FiltersType/Type6.vue

@@ -0,0 +1,42 @@
+<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-bold 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"
+      >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-bold 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>
+
+    <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>
+
+    <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>

src/components/Form/FiltersType/Type7.vue

@@ -0,0 +1,46 @@
+<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-bold 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"
+      >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-bold 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>
+
+    <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>
+
+    <div class="flex flex-column">
+      <Select placeholder="Semua Posko" />
+
+      <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>

src/components/Pages/MenuProvider.vue

@@ -7,6 +7,12 @@
         <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>
 
             <slot></slot>
@@ -19,7 +25,12 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import Filters from '../Form/Filters.vue'
 import Type1 from '../Form/FiltersType/Type1.vue';
-
+import Type2 from '../Form/FiltersType/Type2.vue';
+import Type3 from '../Form/FiltersType/Type3.vue';
+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';
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()

src/router/index.ts

@@ -69,7 +69,7 @@ export const routes: RouteRecordRaw[] = [
             children: [
               {
                 path: '1',
-                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1',
+                name: 'Daftar Keluhan Dialihkan Ke Posko Lain | type-1 | sa',
                 component: GangguanTable1,
                 props: true
               },