Update font size and label styles

src/assets/css/base.css

@@ -63,3 +63,6 @@
 .dx-datagrid-headers .dx-datagrid-table .dx-row > td{
   font-size: 10px !important;
 }
+.dx-datagrid .dx-row > td{
+  font-size: 10px !important;
+}

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) {

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;
+    }
 }

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>

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

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

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 

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
     >
 

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>

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>

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>

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>

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>

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

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>

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>

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>

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

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

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>

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
     >