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

[update] notifikasi/tanda produk yg stok nya menipis

Browse Source
This commit is contained in:
dhilanradya 2025-09-18 13:24:24 +07:00
parent 0db65d190f
commit d89f433d91
1 changed files with 45 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
resources/js/components/ProductCard.vue
View File

@ -1,31 +1,59 @@
<template>
<div
class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
@click="$emit('click', product.id)"
>
<!-- Foto Produk -->
<img
v-if="product.foto && product.foto.length > 0"
:src="product.foto[0].url"
:alt="product.nama"
class="w-full h-full object-cover"
/>
<span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
<!-- Nama Produk di bawah -->
<div class="relative">
<!-- Card Produk -->
<div
class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
class="relative z-0 border border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
@click="$emit('click', product.id)"
>
{{ product.nama }}
<!-- Foto Produk -->
<img
v-if="product.foto && product.foto.length > 0"
:src="product.foto[0].url"
:alt="product.nama"
class="w-full h-full object-cover"
/>
<span v-else class="text-gray-400 text-sm">[tidak ada foto]</span>
<!-- Nama Produk di bawah -->
<div
class="absolute bottom-0 w-full bg-black/60 text-white text-center text-sm py-1"
>
{{ product.nama }}
</div>
</div>
<!-- Notifikasi Stok Menipis (di luar card) -->
<div
v-if="isStockLow"
class="absolute -top-2 -right-2 group z-20"
>
<!-- Bulatan Merah -->
<div class="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center cursor-help border-2 border-white shadow-md">
<span class="text-white text-xs font-bold">!</span>
</div>
<!-- Tooltip -->
<div class="absolute top-6 -right-4 bg-red-600 text-white text-xs px-3 py-2 rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-30">
Stok menipis: {{ product.items_count }} pcs
<!-- Arrow untuk tooltip -->
<div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-b-2 border-transparent border-b-red-600"></div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
import { computed } from 'vue';
const props = defineProps({
product: {
type: Object,
required: true,
},
});
// Computed untuk mengecek apakah stok menipis (kurang dari 5)
const isStockLow = computed(() => {
return props.product.items_count < 5;
});
</script>