Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Magang-2025:87d38dffb8a675201da9a27508ba51e194b25a9e
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:4e06c250829b40ab58c24f166af42fbc9cb08b4b
Branches Tags
Magang-2025:production
Magang-2025:main

No commits in common. "87d38dffb8a675201da9a27508ba51e194b25a9e" and "4e06c250829b40ab58c24f166af42fbc9cb08b4b" have entirely different histories.
87d38dffb8 ... 4e06c25082

1 changed files with 24 additions and 34 deletions
Show Stats Expand all files Collapse all files

54
resources/js/pages/Produk.vue
View File

@ -54,11 +54,11 @@
@click.self="closeOverlay"
>
<div
class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
@mouseleave="closeOverlay"
>
<!-- Foto Produk -->
<div class="relative w-72 h-72 border border-[#e6d3b3] flex items-center justify-center mb-3 overflow-hidden rounded">
<!-- Foto Produk dengan Slider -->
<div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded">
<img
v-if="detail.foto && detail.foto.length > 0"
:src="detail.foto[currentFotoIndex].url"
@ -83,7 +83,7 @@
<button
v-if="detail.foto && detail.foto.length > 1"
@click.stop="prevFoto"
class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
>
‹
</button>
@ -91,47 +91,40 @@
<button
v-if="detail.foto && detail.foto.length > 1"
@click.stop="nextFoto"
class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded"
>
›
</button>
</div>
<!-- Nama Produk -->
<p class="text-lg font-semibold text-center mb-4">{{ detail.nama }}</p>
<!-- Detail Harga & Info -->
<div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
<p class="col-span-1">Harga Jual :</p>
<p class="col-span-1 text-right">Rp. {{ formatNumber(detail.harga_jual) }}</p>
<p class="col-span-1">Kadar :</p>
<p class="col-span-1 text-right">{{ detail.kadar }} K</p>
<p class="col-span-1">Berat :</p>
<p class="col-span-1 text-right">{{ detail.berat }} gram</p>
<p class="col-span-1">Harga/gram :</p>
<p class="col-span-1 text-right">Rp. {{ formatNumber(detail.harga_per_gram) }}</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full">
<!-- harga beli dihapus -->
<p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p>
<p class="text-right">{{ detail.kadar }} K</p>
<p class="col-span-2 text-center">
Berat : {{ detail.berat }} gram
</p>
<p class="col-span-2">
Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }}
</p>
</div>
<!-- Tombol Aksi -->
<div class="flex w-full gap-3">
<button class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
<div class="flex justify-between w-full">
<button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
Ubah
</button>
<button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
Tambah
</button>
<button class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
<button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
Hapus
</button>
</div>
</div>
</div>
</mainLayout>
</template>
@ -194,13 +187,10 @@ const filteredProducts = computed(() => {
});
// buka overlay
function openOverlay(id) {
const produk = products.value.find((p) => p.id === id);
if (produk) {
detail.value = produk;
currentFotoIndex.value = 0; // reset ke foto pertama
async function openOverlay(id) {
detail.value = products.value.find(p => p.id === id) ;
currentFotoIndex.value = 0;
showOverlay.value = true;
}
}
// tutup overlay