From cc888d2cec7c6256e493e3ba656cf742774fd940 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Mon, 4 Mar 2024 16:37:54 +0700
Subject: [PATCH] Update font size and label styles

---
 src/assets/css/base.css                    |  3 +++
 src/assets/css/style.css                   | 30 ++++++++++++----------
 src/assets/css/tailwind.css                |  3 +++
 src/components/Form/FiltersType/Type1.vue  |  8 +++---
 src/components/Form/FiltersType/Type10.vue | 10 ++++----
 src/components/Form/FiltersType/Type11.vue | 10 ++++----
 src/components/Form/FiltersType/Type12.vue | 10 ++++----
 src/components/Form/FiltersType/Type13.vue | 10 ++++----
 src/components/Form/FiltersType/Type14.vue |  8 +++---
 src/components/Form/FiltersType/Type15.vue |  6 ++---
 src/components/Form/FiltersType/Type16.vue | 10 ++++----
 src/components/Form/FiltersType/Type17.vue | 10 ++++----
 src/components/Form/FiltersType/Type18.vue | 10 ++++----
 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  | 10 ++++----
 src/components/Form/FiltersType/Type8.vue  |  6 ++---
 src/components/Form/FiltersType/Type9.vue  | 10 ++++----
 21 files changed, 104 insertions(+), 96 deletions(-)

diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index c7efb38..0e83bc4 100755
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -62,4 +62,7 @@
 
 .dx-datagrid-headers .dx-datagrid-table .dx-row > td{
   font-size: 10px !important;
+}
+.dx-datagrid .dx-row > td{
+  font-size: 10px !important;
 }
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index aad48d4..74e5e85 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -927,6 +927,22 @@ body {
   color: rgb(1 36 45 / var(--tw-text-opacity));
 }
 
+.filter-input-label {
+  margin-bottom: 0.5rem;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+@media (min-width: 640px) {
+  .filter-input-label {
+    margin-bottom: 0px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1253,10 +1269,6 @@ body {
   margin-top: -1px;
 }
 
-.mb-0 {
-  margin-bottom: 0px;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -5861,16 +5873,6 @@ body {
     font-size: 1.5rem;
     line-height: 2rem;
   }
-
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
-  .md\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
 }
 
 @media (min-width: 1024px) {
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index ef012dc..100e458 100755
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -47,4 +47,7 @@
     .custom-table-column {
         @apply !align-middle text-sm font-medium text-primary-800;
     }
+    .filter-input-label {
+        @apply block mb-2 text-sm font-semibold text-gray-800 sm:mb-0;
+    }
 }
diff --git a/src/components/Form/FiltersType/Type1.vue b/src/components/Form/FiltersType/Type1.vue
index 26f7c36..cc1615b 100755
--- a/src/components/Form/FiltersType/Type1.vue
+++ b/src/components/Form/FiltersType/Type1.vue
@@ -59,7 +59,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -67,7 +67,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -80,7 +80,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select
       @update:selected="setPosko($event)"
@@ -91,7 +91,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type10.vue b/src/components/Form/FiltersType/Type10.vue
index 987fc70..96f5a6c 100755
--- a/src/components/Form/FiltersType/Type10.vue
+++ b/src/components/Form/FiltersType/Type10.vue
@@ -56,7 +56,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -64,7 +64,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -77,7 +77,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
     <Select
       @update:selected="setUlp($event)"
@@ -88,13 +88,13 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Lapor Ulang:</label>
+    <label class="filter-input-label">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
       <InputNumber @update:time-value="(value) => (data.minJmlLapor = value)" />
diff --git a/src/components/Form/FiltersType/Type11.vue b/src/components/Form/FiltersType/Type11.vue
index b76e715..da9e144 100755
--- a/src/components/Form/FiltersType/Type11.vue
+++ b/src/components/Form/FiltersType/Type11.vue
@@ -103,31 +103,31 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
     <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
     <Select @update:selected="setUlp($event)" :data="itemsUlp" :placeholder="ulpPlaceholder" :selected="ulp" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Durasi:</label>
+    <label class="filter-input-label">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
       <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
diff --git a/src/components/Form/FiltersType/Type12.vue b/src/components/Form/FiltersType/Type12.vue
index bef3308..a4cf988 100755
--- a/src/components/Form/FiltersType/Type12.vue
+++ b/src/components/Form/FiltersType/Type12.vue
@@ -80,7 +80,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
     <Select
       @update:selected="setUid($event)"
@@ -90,7 +90,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -102,7 +102,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -114,13 +114,13 @@ onMounted(() => {
   </div>
   
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
      <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Durasi:</label>
+    <label class="filter-input-label">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
       <Select 
diff --git a/src/components/Form/FiltersType/Type13.vue b/src/components/Form/FiltersType/Type13.vue
index 70d09b4..be661f1 100755
--- a/src/components/Form/FiltersType/Type13.vue
+++ b/src/components/Form/FiltersType/Type13.vue
@@ -58,7 +58,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -66,7 +66,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -79,7 +79,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Layanan Pelanggan:</label>
     <Select
       @update:selected="setUlp($event)"
       :data="itemsUlp"
@@ -89,12 +89,12 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Group By Kode Unit Distribusi:</label
     >
 
diff --git a/src/components/Form/FiltersType/Type14.vue b/src/components/Form/FiltersType/Type14.vue
index 769c05b..953fe6e 100755
--- a/src/components/Form/FiltersType/Type14.vue
+++ b/src/components/Form/FiltersType/Type14.vue
@@ -44,24 +44,24 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Distribusi/Wilayah:</label>
+    <label class="filter-input-label">Distribusi/Wilayah:</label>
     <Select :data="itemsUid" @update:selected="setUid($event)" :placeholder="uidPlaceholder" :selected="uid" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Area:</label>
+    <label class="filter-input-label">Area:</label>
     <Select @update:selected="setUp3($event)" :data="itemsUp3" :selected="up3" :placeholder="up3Placeholder" />
 
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
     <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
 
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
diff --git a/src/components/Form/FiltersType/Type15.vue b/src/components/Form/FiltersType/Type15.vue
index 98f1a91..f640428 100755
--- a/src/components/Form/FiltersType/Type15.vue
+++ b/src/components/Form/FiltersType/Type15.vue
@@ -21,19 +21,19 @@ const data = ref({
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Jenis Pengaduan:</label>
+    <label class="filter-input-label">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="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Cari Report Number:</label>
+    <label class="filter-input-label">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="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
      <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
diff --git a/src/components/Form/FiltersType/Type16.vue b/src/components/Form/FiltersType/Type16.vue
index 3f124ce..7fbdbc1 100755
--- a/src/components/Form/FiltersType/Type16.vue
+++ b/src/components/Form/FiltersType/Type16.vue
@@ -69,7 +69,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -82,7 +82,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -95,7 +95,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select
       :data="itemsPosko"
@@ -106,7 +106,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Media:</label>
+    <label class="filter-input-label">Media:</label>
 
     <Select
       :selected="media"
@@ -117,7 +117,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
diff --git a/src/components/Form/FiltersType/Type17.vue b/src/components/Form/FiltersType/Type17.vue
index 58e11e8..8bb8ba5 100755
--- a/src/components/Form/FiltersType/Type17.vue
+++ b/src/components/Form/FiltersType/Type17.vue
@@ -10,13 +10,13 @@ import { ref } from 'vue';
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
      <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit PLN:</label>
+    <label class="filter-input-label">Unit PLN:</label>
 
     <div class="flex flex-col gap-y-1">
       <Select placeholder="Pilih Unit" />
@@ -29,13 +29,13 @@ import { ref } from 'vue';
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Status:</label>
+    <label class="filter-input-label">Status:</label>
 
     <Select placeholder="Pilih Status"/>
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >SLA:</label
     >
 
@@ -43,7 +43,7 @@ import { ref } from 'vue';
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Pencarian:</label>
+    <label class="filter-input-label">Pencarian:</label>
 
     <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
   </div>
diff --git a/src/components/Form/FiltersType/Type18.vue b/src/components/Form/FiltersType/Type18.vue
index f6b9dae..05f5fe1 100755
--- a/src/components/Form/FiltersType/Type18.vue
+++ b/src/components/Form/FiltersType/Type18.vue
@@ -35,24 +35,24 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
     <Select @update:selected="selectedUid($event)" :data="itemsUid" placeholder="Semua Unit Induk Distribusi/Wilayah" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
     <Select @update:selected="selectedUp3Posko($event)" :data="itemsUp3" :selected="up3" placeholder="Semua Unit Pelaksanaan Pelayanan Pelanggan" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select @update:selected="selectedPosko($event)" :data="itemsPosko" :selected="posko" placeholder="Semua Posko" />
   </div>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Jenis Transaksi:</label>
+    <label class="filter-input-label">Jenis Transaksi:</label>
 
     <SelectMulti 
       :tags="jenisTransakasi" 
@@ -62,7 +62,7 @@ onMounted(() => {
       />
   </div>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
     <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type2.vue b/src/components/Form/FiltersType/Type2.vue
index c127278..1e49a54 100755
--- a/src/components/Form/FiltersType/Type2.vue
+++ b/src/components/Form/FiltersType/Type2.vue
@@ -100,31 +100,31 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Regional:</label>
+    <label class="filter-input-label">Regional:</label>
 
     <Select @update:selected="setRegional($event)" :data="itemsRegional" :placeholder="regionalPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
     <Select @update:selected="setUid($event)" :data="itemsUid" :selected="uid" :placeholder="uidPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Pelaksanaan Pelayanan Pelanggan:</label>
 
     <Select @update:selected="setUp3($event)" :selected="uppp" :data="itemsUp3" :placeholder="up3Placholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
     <Select @update:selected="setUlp($event)" :data="itemsUlp" :selected="ulp" :placeholder="ulpPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode</label>
+    <label class="filter-input-label">Periode</label>
 
     <div class="grid grid-cols-2 gap-x-2">
       <Select @update:selected="setMonth($event)" :data="months" :placeholder="bulanPlaceholder" />
diff --git a/src/components/Form/FiltersType/Type3.vue b/src/components/Form/FiltersType/Type3.vue
index cf929b3..dee962c 100755
--- a/src/components/Form/FiltersType/Type3.vue
+++ b/src/components/Form/FiltersType/Type3.vue
@@ -60,7 +60,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -68,7 +68,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -81,7 +81,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="filter-input-label">Unit Layanan Pelanggan:</label>
 
     <Select
       @update:selected="setUlp($event)"
@@ -92,7 +92,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
diff --git a/src/components/Form/FiltersType/Type4.vue b/src/components/Form/FiltersType/Type4.vue
index 2920d04..12d42c4 100755
--- a/src/components/Form/FiltersType/Type4.vue
+++ b/src/components/Form/FiltersType/Type4.vue
@@ -44,7 +44,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="filter-input-label">Unit Induk Distribusi/Wilayah:</label>
 
     <Select 
       @update:selected="setUid($event)" 
@@ -54,7 +54,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -66,7 +66,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -78,7 +78,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Jenis Laporan:</label
     >
 
@@ -94,7 +94,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
      <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
diff --git a/src/components/Form/FiltersType/Type5.vue b/src/components/Form/FiltersType/Type5.vue
index 8393394..bd1847a 100755
--- a/src/components/Form/FiltersType/Type5.vue
+++ b/src/components/Form/FiltersType/Type5.vue
@@ -58,7 +58,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -66,7 +66,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -74,13 +74,13 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select @update:selected="setPosko($event)" :data="itemsPosko" :selected="posko" :placeholder="poskoPlaceholder" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
     <DatePicker @update:date-value="(value) => data.periode = value" />
   </div>
 </template>
diff --git a/src/components/Form/FiltersType/Type6.vue b/src/components/Form/FiltersType/Type6.vue
index fbc8c10..b46d361 100755
--- a/src/components/Form/FiltersType/Type6.vue
+++ b/src/components/Form/FiltersType/Type6.vue
@@ -57,7 +57,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -65,7 +65,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -78,7 +78,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select
       @update:selected="setPosko($event)"
@@ -89,13 +89,13 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Lapor Ulang:</label>
+    <label class="filter-input-label">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
       <InputNumber
diff --git a/src/components/Form/FiltersType/Type7.vue b/src/components/Form/FiltersType/Type7.vue
index 12d6826..553f833 100755
--- a/src/components/Form/FiltersType/Type7.vue
+++ b/src/components/Form/FiltersType/Type7.vue
@@ -134,7 +134,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -142,7 +142,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -155,7 +155,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select
       @update:selected="setPosko($event)"
@@ -166,13 +166,13 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Durasi:</label>
+    <label class="filter-input-label">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
       <Select @update:selected="changeDuration($event)" :data="sla" placeholder="Durasi Menit" />
diff --git a/src/components/Form/FiltersType/Type8.vue b/src/components/Form/FiltersType/Type8.vue
index f8a8ae4..e3aa084 100755
--- a/src/components/Form/FiltersType/Type8.vue
+++ b/src/components/Form/FiltersType/Type8.vue
@@ -43,7 +43,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -51,7 +51,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -64,7 +64,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
diff --git a/src/components/Form/FiltersType/Type9.vue b/src/components/Form/FiltersType/Type9.vue
index 5dd897b..ebaffee 100755
--- a/src/components/Form/FiltersType/Type9.vue
+++ b/src/components/Form/FiltersType/Type9.vue
@@ -61,7 +61,7 @@ onMounted(() => {
 
 <template>
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Induk Distribusi/Wilayah:</label
     >
 
@@ -69,7 +69,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -82,7 +82,7 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="filter-input-label">Posko:</label>
 
     <Select
       @update:selected="setPosko($event)"
@@ -93,13 +93,13 @@ onMounted(() => {
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="filter-input-label">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>
 
   <div class="sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:items-center">
-    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
+    <label class="filter-input-label"
       >Group By Kode Unit Distribusi:</label
     >