feat: add Consume and Restock quick action buttons (#64 #65)

app/components/inventory/InventoryCard.vue

@@ -88,28 +88,106 @@
 
     <!-- Action Buttons -->
     <template #footer>
-      <div class="flex gap-2">
+      <div class="flex flex-col gap-2">
-        <UButton 
+        <!-- Quick Actions Row -->
-          icon="i-heroicons-pencil"
+        <div class="grid grid-cols-2 gap-2">
-          size="sm"
+          <UButton 
-          color="gray"
+            icon="i-heroicons-arrow-trending-down"
-          variant="soft"
+            size="sm"
-          class="flex-1"
+            color="orange"
-          @click="$emit('edit', item)"
+            variant="soft"
-        >
+            @click="handleConsume"
-          Edit
+            :disabled="item.quantity <= 0.01"
-        </UButton>
+          >
-        <UButton 
+            Consume
-          icon="i-heroicons-trash"
+          </UButton>
-          size="sm"
+          <UButton 
-          color="red"
+            icon="i-heroicons-arrow-trending-up"
-          variant="soft"
+            size="sm"
-          @click="$emit('delete', item.id)"
+            color="green"
-        >
+            variant="soft"
-          Delete
+            @click="showRestockModal = true"
-        </UButton>
+          >
+            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"
+            @click="$emit('edit', item)"
+          >
+            Edit
+          </UButton>
+          <UButton 
+            icon="i-heroicons-trash"
+            size="sm"
+            color="red"
+            variant="soft"
+            @click="$emit('delete', item.id)"
+          >
+            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>
 
@@ -118,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
@@ -163,4 +246,24 @@ 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) {
+  let result = items.value
-    return 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
+  // Filter by tags
-  return items.value.filter(item => {
+  if (props.tagFilters && props.tagFilters.length > 0) {
-    if (!item.tags || item.tags.length === 0) return false
+    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))
+      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/pages/index.vue

@@ -33,9 +33,36 @@
       </div>
     </div>
 
-    <!-- Tag Filters -->
+    <!-- Search & Filters -->
-    <UCard v-if="showFilters" class="mb-6">
+    <UCard v-if="showFilters" class="mb-6 space-y-4">
-      <TagsTagFilter v-model="selectedTagFilters" />
+      <!-- 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 -->
+      <div>
+        <TagsTagFilter v-model="selectedTagFilters" />
+      </div>
     </UCard>
 
     <!-- Add Item Form (Overlay) -->
@@ -61,6 +88,7 @@
       ref="inventoryListRef"
       :refresh="refreshKey"
       :tag-filters="selectedTagFilters"
+      :search-query="searchQuery"
       @add-item="showAddForm = true"
       @edit-item="editingItem = $event"
     />
@@ -82,6 +110,7 @@ const refreshKey = ref(0)
 const inventoryListRef = ref()
 const prefilledData = ref<any>(null)
 const selectedTagFilters = ref<string[]>([])
+const searchQuery = ref('')
 
 // Handle scan-to-add flow (Issue #25)
 onMounted(() => {