feat: integrate LowStockDashboard into inventory page (#68)

✅ 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/ExpiryDashboard.vue

@@ -0,0 +1,130 @@
+<template>
+  <UCard v-if="expiringItems.length > 0">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5 text-orange-500" />
+          <h3 class="text-lg font-semibold">Items Expiring Soon</h3>
+        </div>
+        <UBadge color="orange" variant="soft">
+          {{ expiringItems.length }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="space-y-2">
+      <div
+        v-for="item in displayedItems"
+        :key="item.id"
+        class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors"
+        :class="getItemBgClass(item)"
+      >
+        <div class="flex-1 min-w-0">
+          <p class="font-medium text-gray-900 truncate">{{ item.name }}</p>
+          <div class="flex items-center gap-2 text-sm">
+            <UBadge :color="getExpiryColor(item)" size="xs">
+              {{ getExpiryText(item) }}
+            </UBadge>
+            <span class="text-gray-600">
+              {{ item.quantity }} {{ item.unit?.abbreviation }}
+            </span>
+          </div>
+        </div>
+        
+        <UButton
+          size="xs"
+          color="gray"
+          variant="ghost"
+          icon="i-heroicons-arrow-right"
+          @click="$emit('view-item', item)"
+        />
+      </div>
+
+      <UButton
+        v-if="expiringItems.length > maxDisplay"
+        color="gray"
+        variant="soft"
+        size="sm"
+        class="w-full"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? 'Show Less' : `Show ${expiringItems.length - maxDisplay} More` }}
+      </UButton>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  items: any[]
+  maxDisplay?: number
+}>()
+
+const emit = defineEmits<{
+  'view-item': [item: any]
+}>()
+
+const expanded = ref(false)
+const maxDisplay = props.maxDisplay || 5
+
+// Filter and sort items by expiry
+const expiringItems = computed(() => {
+  const now = new Date()
+  const thirtyDaysFromNow = new Date()
+  thirtyDaysFromNow.setDate(now.getDate() + 30)
+
+  return props.items
+    .filter(item => {
+      if (!item.expiry_date) return false
+      const expiryDate = new Date(item.expiry_date)
+      return expiryDate <= thirtyDaysFromNow
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.expiry_date)
+      const dateB = new Date(b.expiry_date)
+      return dateA.getTime() - dateB.getTime()
+    })
+})
+
+const displayedItems = computed(() => {
+  if (expanded.value) {
+    return expiringItems.value
+  }
+  return expiringItems.value.slice(0, maxDisplay)
+})
+
+// Helper functions
+const getDaysUntilExpiry = (item: any) => {
+  if (!item.expiry_date) return null
+  const today = new Date()
+  const expiry = new Date(item.expiry_date)
+  return Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
+}
+
+const getExpiryColor = (item: any) => {
+  const days = getDaysUntilExpiry(item)
+  if (days === null) return 'gray'
+  if (days < 0) return 'red'
+  if (days <= 3) return 'orange'
+  if (days <= 7) return 'yellow'
+  return 'green'
+}
+
+const getExpiryText = (item: any) => {
+  const days = getDaysUntilExpiry(item)
+  if (days === null) return 'No expiry'
+  if (days < 0) return `Expired ${Math.abs(days)}d ago`
+  if (days === 0) return 'Expires today'
+  if (days === 1) return 'Expires tomorrow'
+  if (days <= 7) return `${days} days left`
+  return `${days} days left`
+}
+
+const getItemBgClass = (item: any) => {
+  const days = getDaysUntilExpiry(item)
+  if (days === null) return ''
+  if (days < 0) return 'bg-red-50'
+  if (days <= 3) return 'bg-orange-50'
+  return ''
+}
+</script>

app/components/inventory/InventoryCard.vue

@@ -72,17 +72,53 @@
           {{ 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 -->
     <template #footer>
-      <div class="flex gap-2">
+      <div class="flex flex-col gap-2">
+        <!-- Quick Actions Row -->
+        <div class="grid grid-cols-2 gap-2">
+          <UButton 
+            icon="i-heroicons-arrow-trending-down"
+            size="sm"
+            color="orange"
+            variant="soft"
+            @click="handleConsume"
+            :disabled="item.quantity <= 0.01"
+          >
+            Consume
+          </UButton>
+          <UButton 
+            icon="i-heroicons-arrow-trending-up"
+            size="sm"
+            color="green"
+            variant="soft"
+            @click="showRestockModal = true"
+          >
+            Restock
+          </UButton>
+        </div>
+
+        <!-- Management Actions Row -->
+        <div class="grid grid-cols-2 gap-2">
           <UButton 
             icon="i-heroicons-pencil"
             size="sm"
             color="gray"
             variant="soft"
-          class="flex-1"
             @click="$emit('edit', item)"
           >
             Edit
@@ -97,7 +133,61 @@
             Delete
           </UButton>
         </div>
+      </div>
     </template>
+
+    <!-- Restock Modal -->
+    <UModal v-model="showRestockModal">
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">Restock {{ item.name }}</h3>
+        </template>
+
+        <div class="space-y-4">
+          <div class="text-sm text-gray-600">
+            Current: <span class="font-semibold">{{ item.quantity }} {{ item.unit?.abbreviation }}</span>
+          </div>
+
+          <UFormGroup label="Amount to add">
+            <UInput
+              v-model.number="restockAmount"
+              type="number"
+              min="0.01"
+              step="0.01"
+              size="lg"
+              autofocus
+              placeholder="e.g. 5"
+            />
+          </UFormGroup>
+
+          <div v-if="restockAmount > 0" class="text-sm text-gray-600">
+            New total: <span class="font-semibold">{{ (Number(item.quantity) + Number(restockAmount)).toFixed(2) }} {{ item.unit?.abbreviation }}</span>
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex gap-2">
+            <UButton
+              color="primary"
+              size="lg"
+              class="flex-1"
+              @click="handleRestock"
+              :disabled="!restockAmount || restockAmount <= 0"
+            >
+              Add {{ restockAmount || 0 }} {{ item.unit?.abbreviation }}
+            </UButton>
+            <UButton
+              color="gray"
+              size="lg"
+              variant="soft"
+              @click="showRestockModal = false"
+            >
+              Cancel
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </UModal>
   </UCard>
 </template>
 
@@ -106,12 +196,17 @@ const props = defineProps<{
   item: any
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   edit: [item: any]
   delete: [id: string]
   'update-quantity': [id: string, change: number]
+  'consume': [id: string]
+  'restock': [id: string, amount: number]
 }>()
 
+const showRestockModal = ref(false)
+const restockAmount = ref<number>(1)
+
 // Calculate days until expiry
 const daysUntilExpiry = computed(() => {
   if (!props.item.expiry_date) return null
@@ -145,4 +240,30 @@ 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)
+})
+
+// Quick actions
+const handleConsume = () => {
+  emit('update-quantity', props.item.id, -1)
+}
+
+const handleRestock = () => {
+  if (restockAmount.value && restockAmount.value > 0) {
+    emit('update-quantity', props.item.id, restockAmount.value)
+    showRestockModal.value = false
+    restockAmount.value = 1 // Reset for next time
+  }
+}
+
+// Reset restock amount when modal closes
+watch(showRestockModal, (isOpen) => {
+  if (!isOpen) {
+    restockAmount.value = 1
+  }
+})
 </script>

app/components/inventory/InventoryList.vue

@@ -60,6 +60,7 @@ const { getInventory, deleteInventoryItem, updateQuantity } = useInventory()
 const props = defineProps<{
   refresh?: boolean
   tagFilters?: string[]
+  searchQuery?: string
 }>()
 
 const emit = defineEmits<{
@@ -89,17 +90,27 @@ const loadInventory = async () => {
 
 // Computed filtered items
 const filteredItems = computed(() => {
-  if (!props.tagFilters || props.tagFilters.length === 0) {
-    return items.value
+  let result = items.value
+
+  // Filter by search query (case-insensitive)
+  if (props.searchQuery && props.searchQuery.trim()) {
+    const query = props.searchQuery.trim().toLowerCase()
+    result = result.filter(item => 
+      item.name.toLowerCase().includes(query)
+    )
   }
 
-  // Filter items that have at least one of the selected tags
-  return items.value.filter(item => {
+  // Filter by tags
+  if (props.tagFilters && props.tagFilters.length > 0) {
+    result = result.filter(item => {
       if (!item.tags || item.tags.length === 0) return false
       
       const itemTagIds = item.tags.map((t: any) => t.tag.id)
       return props.tagFilters!.some(filterId => itemTagIds.includes(filterId))
     })
+  }
+
+  return result
 })
 
 const handleDelete = async (id: string) => {

app/components/inventory/LowStockDashboard.vue

@@ -0,0 +1,110 @@
+<template>
+  <UCard v-if="lowStockItems.length > 0">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-arrow-trending-down" class="w-5 h-5 text-orange-500" />
+          <h3 class="text-lg font-semibold">Low Stock Items</h3>
+        </div>
+        <UBadge color="orange" variant="soft">
+          {{ lowStockItems.length }}
+        </UBadge>
+      </div>
+    </template>
+
+    <div class="space-y-2">
+      <div
+        v-for="item in displayedItems"
+        :key="item.id"
+        class="flex items-center justify-between p-3 rounded-lg bg-orange-50 hover:bg-orange-100 transition-colors"
+      >
+        <div class="flex-1 min-w-0">
+          <p class="font-medium text-gray-900 truncate">{{ item.name }}</p>
+          <div class="flex items-center gap-2 text-sm">
+            <UBadge color="orange" size="xs">
+              {{ item.quantity }}/{{ item.low_stock_threshold }} {{ item.unit?.abbreviation }}
+            </UBadge>
+            <span class="text-gray-600">
+              {{ getUrgencyText(item) }}
+            </span>
+          </div>
+        </div>
+        
+        <div class="flex gap-1">
+          <UButton
+            size="xs"
+            color="green"
+            variant="soft"
+            icon="i-heroicons-arrow-trending-up"
+            @click="$emit('restock-item', item)"
+          >
+            Restock
+          </UButton>
+          <UButton
+            size="xs"
+            color="gray"
+            variant="ghost"
+            icon="i-heroicons-pencil"
+            @click="$emit('view-item', item)"
+          />
+        </div>
+      </div>
+
+      <UButton
+        v-if="lowStockItems.length > maxDisplay"
+        color="gray"
+        variant="soft"
+        size="sm"
+        class="w-full"
+        @click="expanded = !expanded"
+      >
+        {{ expanded ? 'Show Less' : `Show ${lowStockItems.length - maxDisplay} More` }}
+      </UButton>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  items: any[]
+  maxDisplay?: number
+}>()
+
+const emit = defineEmits<{
+  'view-item': [item: any]
+  'restock-item': [item: any]
+}>()
+
+const expanded = ref(false)
+const maxDisplay = props.maxDisplay || 5
+
+// Filter and sort items by low stock urgency
+const lowStockItems = computed(() => {
+  return props.items
+    .filter(item => {
+      if (!item.low_stock_threshold) return false
+      return Number(item.quantity) <= Number(item.low_stock_threshold)
+    })
+    .sort((a, b) => {
+      // Sort by urgency: items closest to 0 first
+      const urgencyA = Number(a.quantity) / Number(a.low_stock_threshold)
+      const urgencyB = Number(b.quantity) / Number(b.low_stock_threshold)
+      return urgencyA - urgencyB
+    })
+})
+
+const displayedItems = computed(() => {
+  if (expanded.value) {
+    return lowStockItems.value
+  }
+  return lowStockItems.value.slice(0, maxDisplay)
+})
+
+// Helper function
+const getUrgencyText = (item: any) => {
+  const ratio = Number(item.quantity) / Number(item.low_stock_threshold)
+  if (ratio <= 0.25) return 'Critical'
+  if (ratio <= 0.5) return 'Very low'
+  return 'Low'
+}
+</script>

app/pages/index.vue

@@ -33,9 +33,36 @@
       </div>
     </div>
 
+    <!-- Search & Filters -->
+    <UCard v-if="showFilters" class="mb-6 space-y-4">
+      <!-- Search Bar -->
+      <div>
+        <UFormGroup label="Search Items">
+          <UInput
+            v-model="searchQuery"
+            placeholder="Search by item name..."
+            icon="i-heroicons-magnifying-glass"
+            size="lg"
+            :ui="{ icon: { trailing: { pointer: '' } } }"
+          >
+            <template #trailing>
+              <UButton
+                v-if="searchQuery"
+                color="gray"
+                variant="link"
+                icon="i-heroicons-x-mark"
+                :padded="false"
+                @click="searchQuery = ''"
+              />
+            </template>
+          </UInput>
+        </UFormGroup>
+      </div>
+
       <!-- Tag Filters -->
-    <UCard v-if="showFilters" class="mb-6">
+      <div>
         <TagsTagFilter v-model="selectedTagFilters" />
+      </div>
     </UCard>
 
     <!-- Add Item Form (Overlay) -->
@@ -56,11 +83,28 @@
       @updated="handleItemUpdated"
     />
 
+    <!-- Dashboard Cards -->
+    <div class="grid gap-6 mb-6 md:grid-cols-2">
+      <!-- Expiry Dashboard -->
+      <InventoryExpiryDashboard
+        :items="inventoryItems"
+        @view-item="editingItem = $event"
+      />
+
+      <!-- Low Stock Dashboard -->
+      <InventoryLowStockDashboard
+        :items="inventoryItems"
+        @view-item="editingItem = $event"
+        @restock-item="handleRestockFromDashboard"
+      />
+    </div>
+
     <!-- Inventory List -->
     <InventoryList
       ref="inventoryListRef"
       :refresh="refreshKey"
       :tag-filters="selectedTagFilters"
+      :search-query="searchQuery"
       @add-item="showAddForm = true"
       @edit-item="editingItem = $event"
     />
@@ -82,9 +126,22 @@ const refreshKey = ref(0)
 const inventoryListRef = ref()
 const prefilledData = ref<any>(null)
 const selectedTagFilters = ref<string[]>([])
+const searchQuery = ref('')
+const inventoryItems = ref<any[]>([])
+
+// Load inventory for dashboard
+const { getInventory } = useInventory()
+
+const loadInventoryData = async () => {
+  const { data } = await getInventory()
+  inventoryItems.value = data || []
+}
 
 // Handle scan-to-add flow (Issue #25)
-onMounted(() => {
+onMounted(async () => {
+  // Load inventory for dashboard
+  await loadInventoryData()
+
   if (route.query.action === 'add') {
     // Pre-fill data from query params (from scan)
     prefilledData.value = {
@@ -107,15 +164,22 @@ const handleCloseAddForm = () => {
   prefilledData.value = null
 }
 
-const handleItemAdded = (item: any) => {
+const handleItemAdded = async (item: any) => {
   showAddForm.value = false
   prefilledData.value = null
-  // Reload the inventory list
+  // Reload the inventory list and dashboard
   inventoryListRef.value?.reload()
+  await loadInventoryData()
 }
 
-const handleItemUpdated = (item: any) => {
+const handleItemUpdated = async (item: any) => {
   editingItem.value = null
   inventoryListRef.value?.reload()
+  await loadInventoryData()
+}
+
+const handleRestockFromDashboard = (item: any) => {
+  // Open edit modal with the item (user can use Restock button there)
+  editingItem.value = item
 }
 </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;