[update] notifikasi/tanda produk yg stok nya menipis

resources/js/components/ProductCard.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="relative">
+    <!-- Card Produk -->
     <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)"
@@ -19,13 +21,39 @@
         {{ 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>