Update styles and labels in MenuProvider and FiltersType components

src/assets/css/style.css

@@ -5866,6 +5866,11 @@ body {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {

src/components/Form/FiltersType/Type1.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
 import {
   selectedUid,
   selectedUp3Posko,
@@ -9,8 +9,8 @@ import {
   itemsUp3,
   itemsPosko,
   fetchUid
-} from './reference'
+} from './reference';
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue';
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -59,7 +59,7 @@ onMounted(() => {
 
 <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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Durasi:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+  import Select from '@/components/Select.vue';
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
-  import InputWithSuffix from '../InputWithSuffix.vue';
+import InputWithSuffix from '../InputWithSuffix.vue';
-  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { selectedUid, selectedUp3Ulp, selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
 import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
@@ -80,7 +80,7 @@ onMounted(() => {
 
 <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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -114,16 +114,13 @@ onMounted(() => {
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+     <DatePicker @update:date-value="(value) => data.periode = value" />
-        data.periode = value
-      }
-      " />
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Durasi:</label>
 
     <div class="flex flex-col gap-y-1">
       <Select 
@@ -135,19 +132,13 @@ onMounted(() => {
       <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
         <InputWithSuffix 
           @update:minute-value="
-          (value :any)=> {
+          (value :any)=> data.minDurasiResponseTime =value"
-            data.minDurasiResponseTime =value
-          }
-          "
         @value="data.minDurasiResponseTime"
         :disabled=triggerInput />
         <small class="flex items-center">s/d</small>
         <InputWithSuffix 
           @update:minute-value="
-          (value :any)=> {
+          (value :any)=> data.maxDurasiResponseTime = value"
-            data.maxDurasiResponseTime = value
-          }
-          "
         @value="data.maxDurasiResponseTime"
         :disabled="triggerInput" />
       </div>

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 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >Group By Kode Unit Distribusi:</label
     >
 

src/components/Form/FiltersType/Type14.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
 import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
 import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Distribusi/Wilayah';
@@ -44,28 +44,25 @@ onMounted(() => {
 
 <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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Area:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => data.periode = value" />
-      data.periode = value
-    }
-      " />
   </div>
 </template>

src/components/Form/FiltersType/Type15.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import InputWithFilter from '../InputWithFilter.vue'
+  import InputWithFilter from '../InputWithFilter.vue';
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
-  import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
+import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue';
 import { ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
@@ -21,23 +21,20 @@ const data = ref({
 
 <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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+     <DatePicker @update:date-value="(value) => data.periode = value" />
-        data.periode = value
-      }
-      " />
   </div>
 </template>

src/components/Form/FiltersType/Type16.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
 import {
   selectedUid,
   selectedUp3Posko,
@@ -11,8 +11,8 @@ import {
   itemsUp3,
   itemsPosko,
   itemsMedia
-} from './reference'
+} from './reference';
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue';
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -69,7 +69,7 @@ onMounted(() => {
 
 <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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Media:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>

src/components/Form/FiltersType/Type17.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+  import Select from '@/components/Select.vue';
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
-  import InputWithFilter from '../InputWithFilter.vue'
+import InputWithFilter from '../InputWithFilter.vue';
-  import { ref } from 'vue'
+import { ref } from 'vue';
   const data = ref({
     periode: '',
   })
@@ -10,16 +10,13 @@
 
 <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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+     <DatePicker @update:date-value="(value) => data.periode = value" />
-        data.periode = value
-      }
-      " />
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Unit PLN:</label>
 
     <div class="flex flex-col gap-y-1">
       <Select placeholder="Pilih Unit" />
@@ -32,13 +29,13 @@
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >SLA:</label
     >
 
@@ -46,7 +43,7 @@
   </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">Pencarian:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Pencarian:</label>
 
     <InputWithFilter placeholder="cari report" :filters="[{id: 1, title: 'Pilih Jenis'}]" />
   </div>

src/components/Form/FiltersType/Type18.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import SelectMulti from '@/components/SelectMulti.vue'
+import SelectMulti from '@/components/SelectMulti.vue';
 
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
-import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
+import { selectedUid, selectedUp3Posko, selectedPosko, fetchUid, itemsUid, itemsUp3, itemsPosko } from './reference';
 import { onMounted, ref } from 'vue';
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
@@ -35,24 +35,24 @@ onMounted(() => {
 
 <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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Jenis Transaksi:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Jenis Transaksi:</label>
 
     <SelectMulti 
       :tags="jenisTransakasi" 
@@ -62,10 +62,7 @@ onMounted(() => {
       />
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => data.periode = value" />
-        data.periode = value
-      }
-      " />
   </div>
 </template>

src/components/Form/FiltersType/Type2.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
 import {
   selectedUid,
   selectedUp3Ulp,
   fetchRegional,
-  fetchUid,
+  fetchUid, itemsUid,
-  fetchUidByRegional,
-  itemsUid,
   itemsUp3,
   itemsUlp,
   itemsRegional,
   months,
   years
-} from './reference'
+} from './reference';
-import { onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue';
-import { getMonthName } from '@/utils/texts'
+import { getMonthName } from '@/utils/texts';
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -102,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 font-semibold text-gray-800 sm:mb-0">Regional:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Unit Induk Distribusi/Wilayah:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Unit Pelaksanaan Pelayanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Unit Layanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Periode</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
 import {
   selectedUid,
   selectedUp3Ulp,
@@ -9,8 +9,8 @@ import {
   itemsUid,
   itemsUp3,
   itemsUlp
-} from './reference'
+} from './reference';
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue';
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -60,7 +60,7 @@ onMounted(() => {
 
 <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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Unit Layanan Pelanggan:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
     <DatePicker @update:date-value="(value) => (data.periode = value)" />
   </div>

src/components/Form/FiltersType/Type4.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import Select from '@/components/Select.vue'
+  import Select from '@/components/Select.vue';
-  import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
-  import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
+import { selectedUid, selectedUp3Ulp, selectedUlp, itemsUid, itemsUp3, itemsUlp } from './reference';
 import { onMounted, ref } from 'vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah';
 const up3Placeholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan';
@@ -44,7 +44,7 @@ onMounted(() => {
 
 <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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >Unit Layanan Pelanggan:</label
     >
 
@@ -78,14 +78,12 @@ onMounted(() => {
   </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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >Jenis Laporan:</label
     >
 
     <Select
-      @update:selected="(value) => {
+      @update:selected="(value) => data.jenisLaporan = value"
-        data.jenisLaporan = value
-      }"
       :data="[
         { id: 1, name: 'Laporan Berulang Unit' },
         { id: 2, name: 'Laporan Berulang Pelanggan' },
@@ -96,11 +94,8 @@ onMounted(() => {
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
 
-     <DatePicker @update:date-value="(value) => {
+     <DatePicker @update:date-value="(value) => data.periode = value" />
-        data.periode = value
-      }
-      " />
   </div>
 </template>

src/components/Form/FiltersType/Type5.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue';
 import {
   selectedUid,
   selectedUp3Posko,
@@ -8,10 +8,10 @@ import {
   itemsUid,
   itemsUp3,
   itemsPosko
-} from './reference'
+} from './reference';
 
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
 const poskoPlaceholder = 'Semua Posko'
@@ -58,7 +58,7 @@ onMounted(() => {
 
 <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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >Unit Pelaksanaan Pelayanan Pelanggan:</label
     >
 
@@ -74,16 +74,13 @@ onMounted(() => {
   </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>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
-    <DatePicker @update:date-value="(value) => {
+    <DatePicker @update:date-value="(value) => data.periode = 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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Lapor Ulang:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">Lapor Ulang:</label>
 
     <div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
       <InputNumber

src/components/Form/FiltersType/Type7.vue

@@ -6,9 +6,9 @@ interface SlaOption {
   max: string
 }
 
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
-import InputWithSuffix from '../InputWithSuffix.vue'
+import InputWithSuffix from '../InputWithSuffix.vue';
 import {
   selectedUid,
   selectedUp3Posko,
@@ -17,8 +17,8 @@ import {
   itemsUid,
   itemsUp3,
   itemsPosko
-} from './reference'
+} from './reference';
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue';
 
 const props = defineProps({
   slaOptions: {
@@ -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 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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 font-semibold text-gray-800 sm:mb-0"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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 font-semibold text-gray-800 sm:mb-0">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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 font-semibold text-gray-800 sm:mb-0">Durasi:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import Select from '@/components/Select.vue'
+import Select from '@/components/Select.vue';
-import DatePicker from '@/components/DatePicker.vue'
+import DatePicker from '@/components/DatePicker.vue';
 
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue';
-import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
+import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference';
 
 const uidPlaceholder = 'Semua Unit Induk Distribusi/Wilayah'
 const uppPlaceholder = 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
@@ -43,7 +43,7 @@ onMounted(() => {
 
 <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"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Posko:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block">Periode Tanggal:</label>
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0">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="text-gray-800 font-semibold mb-2 sm:mb-0 block"
+    <label class="block mb-2 text-sm font-semibold text-gray-800 sm:mb-0"
       >Group By Kode Unit Distribusi:</label
     >
 

src/components/Pages/MenuProvider.vue

@@ -3,7 +3,7 @@
     class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
   >
     <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
-      <h1 class="text-xl font-semibold md:text-3xl text-dark">{{ pageTitle }}</h1>
+      <h1 class="text-lg font-semibold md:text-2xl text-dark">{{ pageTitle }}</h1>
     </div>
     <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
       <slot></slot>
@@ -12,8 +12,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed } from 'vue';
-import { useRoute } from 'vue-router'
+import { useRoute } from 'vue-router';
 
 // Dapatkan objek route dari vue-router
 const route = useRoute()