completed create all filters type

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>

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>

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>

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>

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>

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>

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>

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>

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>

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" />

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>

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>

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>

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" />

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>

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>

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>