[update] notifikasi/tanda produk yg stok nya menipis

resources/js/components/ProductCard.vue

@@ -1,31 +1,59 @@
 <template>
-  <div
+  <div class="relative">
-    class="relative z-0 border  border-C rounded-md aspect-square flex items-center justify-center hover:shadow-md transition cursor-pointer overflow-hidden"
+    <!-- Card Produk -->
-    @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="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>