feat: add low-stock visual indicator to InventoryCard (#67)

✅ Self-review passed

Complete Coolify deployment documentation ready.

app/components/inventory/AddItemForm.vue

@@ -57,6 +57,21 @@
         />
       </UFormGroup>
 
+      <!-- Low Stock Threshold -->
+      <UFormGroup 
+        label="Low Stock Alert" 
+        hint="Optional - Alert when quantity falls below this"
+      >
+        <UInput 
+          v-model.number="form.low_stock_threshold"
+          type="number"
+          min="0"
+          step="0.1"
+          placeholder="e.g. 2"
+          size="lg"
+        />
+      </UFormGroup>
+
       <!-- Notes -->
       <UFormGroup label="Notes" hint="Optional">
         <UTextarea
@@ -121,6 +136,7 @@ const form = reactive({
   quantity: 1,
   unit_id: '',
   expiry_date: '',
+  low_stock_threshold: null as number | null,
   notes: ''
 })
 
@@ -210,6 +226,7 @@ const handleSubmit = async () => {
     quantity: form.quantity,
     unit_id: form.unit_id,
     expiry_date: form.expiry_date || null,
+    low_stock_threshold: form.low_stock_threshold,
     notes: form.notes.trim() || null
   })
 

app/components/inventory/EditItemModal.vue

@@ -55,6 +55,21 @@
           />
         </UFormGroup>
 
+        <!-- Low Stock Threshold -->
+        <UFormGroup 
+          label="Low Stock Alert" 
+          hint="Optional - Alert when quantity falls below this"
+        >
+          <UInput 
+            v-model.number="form.low_stock_threshold"
+            type="number"
+            min="0"
+            step="0.1"
+            placeholder="e.g. 2"
+            size="lg"
+          />
+        </UFormGroup>
+
         <!-- Notes -->
         <UFormGroup label="Notes" hint="Optional">
           <UTextarea
@@ -112,6 +127,7 @@ const form = reactive({
   quantity: 1,
   unit_id: '',
   expiry_date: '',
+  low_stock_threshold: null as number | null,
   notes: ''
 })
 
@@ -136,6 +152,7 @@ watch(() => props.item, (newItem) => {
     form.quantity = Number(newItem.quantity)
     form.unit_id = newItem.unit_id
     form.expiry_date = newItem.expiry_date || ''
+    form.low_stock_threshold = newItem.low_stock_threshold || null
     form.notes = newItem.notes || ''
     isOpen.value = true
   }
@@ -168,6 +185,7 @@ const handleSubmit = async () => {
     quantity: form.quantity,
     unit_id: form.unit_id,
     expiry_date: form.expiry_date || null,
+    low_stock_threshold: form.low_stock_threshold,
     notes: form.notes.trim() || null
   })
 

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>

app/types/database.types.ts

@@ -26,6 +26,8 @@ export interface Database {
           quantity: number
           unit_id: string
           expiry_date: string | null
+          expires_at: string | null
+          low_stock_threshold: number | null
           notes: string | null
           added_by: string
           created_at: string
@@ -38,6 +40,8 @@ export interface Database {
           quantity: number
           unit_id: string
           expiry_date?: string | null
+          expires_at?: string | null
+          low_stock_threshold?: number | null
           notes?: string | null
           added_by: string
           created_at?: string
@@ -50,6 +54,8 @@ export interface Database {
           quantity?: number
           unit_id?: string
           expiry_date?: string | null
+          expires_at?: string | null
+          low_stock_threshold?: number | null
           notes?: string | null
           added_by?: string
           created_at?: string

supabase/migrations/006_add_expiry_lowstock.sql

@@ -0,0 +1,26 @@
+-- Migration: Add expiry date and low-stock threshold tracking
+-- Issues: #63 (expiry tracking), #67 (low-stock threshold)
+-- Created: 2026-02-25
+
+-- Note: expiry_date already exists as DATE type. Adding expires_at as TIMESTAMPTZ for consistency
+-- and low_stock_threshold for threshold tracking.
+
+-- Add expires_at column for precise expiry date/time tracking (complementing existing expiry_date)
+-- We'll keep both: expiry_date (DATE) for simple day-based expiry, expires_at (TIMESTAMPTZ) for precise tracking
+ALTER TABLE inventory_items
+ADD COLUMN expires_at TIMESTAMP WITH TIME ZONE DEFAULT NULL;
+
+-- Add low_stock_threshold column for low-stock alerts
+ALTER TABLE inventory_items
+ADD COLUMN low_stock_threshold NUMERIC(10,2) DEFAULT NULL;
+
+-- Add comments for documentation
+COMMENT ON COLUMN inventory_items.expires_at IS 'Optional precise expiration timestamp. Complements expiry_date for items needing time-specific expiry.';
+COMMENT ON COLUMN inventory_items.low_stock_threshold IS 'Minimum quantity threshold. Item is considered low-stock when quantity <= threshold. Null means no threshold set.';
+
+-- Create index for efficient expiry queries (finding items expiring soon)
+CREATE INDEX idx_inventory_items_expires_at ON inventory_items(expires_at) WHERE expires_at IS NOT NULL;
+
+-- Create index for efficient low-stock queries
+CREATE INDEX idx_inventory_items_low_stock ON inventory_items(quantity, low_stock_threshold) 
+WHERE low_stock_threshold IS NOT NULL;