54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<template>
|
|
<mainLayout>
|
|
<div class="p-6">
|
|
<p class="font-serif italic text-[25px] text-D mb-4">Laporan</p>
|
|
|
|
<div class="mb-4">
|
|
<ul class="flex flex-wrap text-center" role="tablist">
|
|
<li v-for="tab in tabs" class="mr-2" role="presentation">
|
|
<button :class="[
|
|
'inline-block p-2 border-b-2 rounded-t-lg',
|
|
activeTab === tab.id
|
|
? 'border-D text-D'
|
|
: 'border-transparent text-D hover:text-D/50 hover:border-D',
|
|
]" @click="activeTab = tab.id" type="button" role="tab" aria-controls="ringkasan-content"
|
|
:aria-selected="activeTab === tab.id">
|
|
{{ tab.name }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<div v-if="activeTab === 'ringkasan'" id="ringkasan-content" role="tabpanel">
|
|
<RingkasanLaporanB />
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'detail-nampan'" id="detail-content" role="tabpanel">
|
|
<DetailPerNampan />
|
|
</div>
|
|
|
|
<div v-if="activeTab === 'detail-produk'" id="detail-content" role="tabpanel">
|
|
<DetailPerProduk />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mainLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import RingkasanLaporanA from '../components/RingkasanLaporanA.vue';
|
|
import RingkasanLaporanB from '../components/RingkasanLaporanB.vue';
|
|
import mainLayout from '../layouts/mainLayout.vue';
|
|
import DetailPerNampan from '../components/DetailPerNampan.vue';
|
|
import DetailPerProduk from '../components/DetailPerProduk.vue';
|
|
|
|
const activeTab = ref('ringkasan');
|
|
|
|
const tabs = [
|
|
{ name: 'Ringkasan Laporan', id: 'ringkasan' },
|
|
{ name: 'Detail per Nampan', id: 'detail-nampan' },
|
|
{ name: 'Detail per Produk', id: 'detail-produk' },
|
|
];
|
|
</script> |