Update font size and label styles

This commit is contained in:
Dede Fuji Abdul 2024-03-04 16:37:54 +07:00
parent 9cb4551bb9
commit cc888d2cec
21 changed files with 104 additions and 96 deletions

View File

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

View File

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

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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

View File

@ -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
>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

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

View File

@ -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>

View File

@ -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
>