From 8a9f8f7fdd9a487aeead9a3c7e6fcf54a18d3ed8 Mon Sep 17 00:00:00 2001
From: Pantry Lead Agent <pantry-bot@jeanlucmakiola.de>
Date: Wed, 25 Feb 2026 01:24:07 +0000
Subject: [PATCH] feat: add low-stock visual indicator to InventoryCard (#67)

---
 app/components/inventory/InventoryCard.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/app/components/inventory/InventoryCard.vue b/app/components/inventory/InventoryCard.vue
index 242fd0d..b63fbd1 100644
--- a/app/components/inventory/InventoryCard.vue
+++ b/app/components/inventory/InventoryCard.vue
@@ -72,6 +72,18 @@
           {{ expiryText }}
         </UBadge>
       </div>
+
+      <!-- Low Stock Warning -->
+      <div v-if="isLowStock" class="text-xs">
+        <UBadge 
+          color="orange"
+          variant="soft"
+          class="w-full justify-center"
+        >
+          <UIcon name="i-heroicons-exclamation-triangle" class="mr-1" />
+          Low stock ({{ item.quantity }}/{{ item.low_stock_threshold }})
+        </UBadge>
+      </div>
     </div>
 
     <!-- Action Buttons -->
@@ -145,4 +157,10 @@ const expiryText = computed(() => {
   if (daysUntilExpiry.value === 1) return 'Expires tomorrow'
   return `Expires in ${daysUntilExpiry.value} days`
 })
+
+// Low stock detection
+const isLowStock = computed(() => {
+  if (!props.item.low_stock_threshold) return false
+  return Number(props.item.quantity) <= Number(props.item.low_stock_threshold)
+})
 </script>