52 lines
1.4 KiB
Vue
Executable File
52 lines
1.4 KiB
Vue
Executable File
<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';
|
|
const data = ref({
|
|
periode: '',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Periode Tanggal:</label>
|
|
|
|
<DatePicker @update:date-value="(value) => data.periode = value" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Unit PLN:</label>
|
|
|
|
<div class="flex flex-col gap-y-1">
|
|
<Select placeholder="Pilih Unit" />
|
|
|
|
<div class="grid grid-flow-col auto-cols-auto gap-x-1.5">
|
|
<Select placeholder="Pilih Area" />
|
|
<Select placeholder="Pilih Rayon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Status:</label>
|
|
|
|
<Select placeholder="Pilih Status" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">SLA:</label>
|
|
|
|
<Select placeholder="Pilih Durasi SLA" />
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 space-y-2">
|
|
<label class="filter-input-label">Pencarian:</label>
|
|
|
|
<InputWithFilter placeholder="cari report" :filters="[{ id: 1, title: 'Pilih Jenis' }]" />
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|