66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Card Produk -->
|
|
<div
|
|
class="border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer"
|
|
@click="showDetail = true"
|
|
>
|
|
<span class="text-gray-700 font-medium text-center px-2">
|
|
{{ product.nama }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Overlay Detail -->
|
|
<div
|
|
v-if="showDetail"
|
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
|
>
|
|
<div
|
|
class="bg-white rounded-lg shadow-lg w-[90%] max-w-md p-6 relative"
|
|
>
|
|
<!-- Tombol Close -->
|
|
<button
|
|
class="absolute top-3 right-3 text-gray-500 hover:text-gray-800"
|
|
@click="showDetail = false"
|
|
>
|
|
✕
|
|
</button>
|
|
|
|
<!-- Judul -->
|
|
<h2 class="text-xl font-semibold text-D mb-4 text-center">
|
|
Detail Produk
|
|
</h2>
|
|
|
|
<!-- Data Produk -->
|
|
<div class="space-y-2 text-gray-700">
|
|
<p><span class="font-semibold">Nama:</span> {{ product.nama }}</p>
|
|
<p><span class="font-semibold">Kategori:</span> {{ product.kategori }}</p>
|
|
<p><span class="font-semibold">Berat:</span> {{ product.berat }} gram</p>
|
|
<p><span class="font-semibold">Kadar:</span> {{ product.kadar }}%</p>
|
|
<p><span class="font-semibold">Harga/gram:</span> Rp {{ formatHarga(product.harga_per_gram) }}</p>
|
|
<p><span class="font-semibold">Harga Jual:</span> Rp {{ formatHarga(product.harga_jual) }}</p>
|
|
<p><span class="font-semibold">Stok:</span> {{ product.items_count }} pcs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
product: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const showDetail = ref(false);
|
|
|
|
// Format rupiah
|
|
function formatHarga(value) {
|
|
return new Intl.NumberFormat("id-ID").format(value);
|
|
}
|
|
</script>
|