defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update styles and labels in MenuProvider and FiltersType components

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-03-04 09:14:53 +07:00
parent 1d2283c8a2
commit 1a65dc1a89
20 changed files with 150 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/style.css
View File

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

16
src/components/Form/FiltersType/Type1.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import {
selectedUid,
selectedUp3Posko,
@ -9,8 +9,8 @@ import {
itemsUp3,
itemsPosko,
fetchUid
} from './reference'
import { onMounted, ref, watch } from 'vue'
} from './reference';
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>

10
src/components/Form/FiltersType/Type10.vue
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="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)" />

10
src/components/Form/FiltersType/Type11.vue
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 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" />

33
src/components/Form/FiltersType/Type12.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue';
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import InputWithSuffix from '../InputWithSuffix.vue';
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) => {
data.periode = value
}
" />
<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">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)=> {
data.minDurasiResponseTime =value
}
"
(value :any)=> data.minDurasiResponseTime =value"
@value="data.minDurasiResponseTime"
:disabled=triggerInput />
<small class="flex items-center">s/d</small>
<InputWithSuffix
@update:minute-value="
(value :any)=> {
data.maxDurasiResponseTime = value
}
"
(value :any)=> data.maxDurasiResponseTime = value"
@value="data.maxDurasiResponseTime"
:disabled="triggerInput" />
</div>

10
src/components/Form/FiltersType/Type13.vue
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 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
>

17
src/components/Form/FiltersType/Type14.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.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) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => data.periode = value" />
</div>
</template>

17
src/components/Form/FiltersType/Type15.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import InputWithFilter from '../InputWithFilter.vue'
import DatePicker from '@/components/DatePicker.vue'
import InlineRadioGroup from '@/components/Form/InlineRadioGroup.vue'
import InputWithFilter from '../InputWithFilter.vue';
import DatePicker from '@/components/DatePicker.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) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => data.periode = value" />
</div>
</template>

18
src/components/Form/FiltersType/Type16.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import {
selectedUid,
selectedUp3Posko,
@ -11,8 +11,8 @@ import {
itemsUp3,
itemsPosko,
itemsMedia
} from './reference'
import { onMounted, ref, watch } from 'vue'
} from './reference';
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>

23
src/components/Form/FiltersType/Type17.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithFilter from '../InputWithFilter.vue'
import { ref } from 'vue'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import InputWithFilter from '../InputWithFilter.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) => {
data.periode = value
}
" />
<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">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>

23
src/components/Form/FiltersType/Type18.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import SelectMulti from '@/components/SelectMulti.vue'
import Select from '@/components/Select.vue';
import SelectMulti from '@/components/SelectMulti.vue';
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Posko, selectedPosko ,fetchUid, itemsUid,itemsUp3, itemsPosko} from './reference';
import DatePicker from '@/components/DatePicker.vue';
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>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<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>

22
src/components/Form/FiltersType/Type2.vue
View File

@ -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,
fetchUidByRegional,
itemsUid,
fetchUid, itemsUid,
itemsUp3,
itemsUlp,
itemsRegional,
months,
years
} from './reference'
import { onMounted, ref } from 'vue'
import { getMonthName } from '@/utils/texts'
} from './reference';
import { onMounted, ref } from 'vue';
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" />

16
src/components/Form/FiltersType/Type3.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import {
selectedUid,
selectedUp3Ulp,
@ -9,8 +9,8 @@ import {
itemsUid,
itemsUp3,
itemsUlp
} from './reference'
import { onMounted, ref, watch } from 'vue'
} from './reference';
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>

25
src/components/Form/FiltersType/Type4.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import { selectedUid, selectedUp3Ulp,selectedUlp, fetchUid, itemsUid, itemsUp3, itemsUlp } from './reference';
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
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) => {
data.jenisLaporan = value
}"
@update:selected="(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) => {
data.periode = value
}
" />
<DatePicker @update:date-value="(value) => data.periode = value" />
</div>
</template>

21
src/components/Form/FiltersType/Type5.vue
View File

@ -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 DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.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>
<DatePicker @update:date-value="(value) => {
data.periode = value
}
" />
<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>

10
src/components/Form/FiltersType/Type6.vue
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="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

20
src/components/Form/FiltersType/Type7.vue
View File

@ -6,9 +6,9 @@ interface SlaOption {
max: string
}
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import InputWithSuffix from '../InputWithSuffix.vue'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import InputWithSuffix from '../InputWithSuffix.vue';
import {
selectedUid,
selectedUp3Posko,
@ -17,8 +17,8 @@ import {
itemsUid,
itemsUp3,
itemsPosko
} from './reference'
import { onMounted, ref, watch } from 'vue'
} from './reference';
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" />

14
src/components/Form/FiltersType/Type8.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
import Select from '@/components/Select.vue'
import DatePicker from '@/components/DatePicker.vue'
import Select from '@/components/Select.vue';
import DatePicker from '@/components/DatePicker.vue';
import { onMounted, ref, watch } from 'vue'
import { selectedUid, fetchUid, itemsUid, itemsUp3 } from './reference'
import { onMounted, ref, watch } from 'vue';
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>

10
src/components/Form/FiltersType/Type9.vue
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="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
>

6
src/components/Pages/MenuProvider.vue
View File

@ -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 { useRoute } from 'vue-router'
import { computed } from 'vue';
import { useRoute } from 'vue-router';
// Dapatkan objek route dari vue-router
const route = useRoute()