feat: implement inventory CRUD UI components (#18 #19 #20 #21)
Some checks failed
Deploy to Coolify / Deploy to Development (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Production (pull_request) Has been cancelled
Deploy to Coolify / Code Quality (pull_request) Has been cancelled
Deploy to Coolify / Run Tests (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Test (pull_request) Has been cancelled
Pull Request Checks / Validate PR (pull_request) Has been cancelled

Week 2 core inventory management:

**Composables:**
- useInventory: Full CRUD operations for inventory items
- useUnits: Unit fetching and conversion helpers
- useTags: Tag fetching and category filtering

**Components:**
- InventoryList (#18): Grid view with loading/empty/error states
- InventoryCard: Item card with image, quantity controls, tags, expiry
- AddItemForm (#19): Form with tag picker, unit selector, validation
- EditItemModal (#20): Modal form for editing existing items
- Delete functionality (#21): Confirm dialog + cascade tag cleanup

**Features:**
- Quantity quick-actions (+/- buttons on cards)
- Auto-delete when quantity reaches zero
- Expiry date tracking with color-coded warnings
- Tag selection by category in add form
- Responsive grid layout (1-4 columns)
- Product image display from barcode cache
- Form validation and loading states

Closes #18, #19, #20, #21
This commit is contained in:
Pantry Lead Agent
2026-02-09 13:03:00 +00:00
parent be2af1675a
commit 4834286005
8 changed files with 1059 additions and 21 deletions

View File

@@ -17,36 +17,37 @@
color="white"
size="lg"
icon="i-heroicons-plus"
@click="showAddForm = true"
>
Add Manually
</UButton>
</div>
</div>
<!-- Empty State -->
<UCard v-if="true">
<div class="text-center py-12">
<UIcon
name="i-heroicons-inbox"
class="w-16 h-16 text-gray-400 mx-auto mb-4"
<!-- Add Item Form (Overlay) -->
<div v-if="showAddForm" class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-black/50">
<div class="w-full max-w-lg">
<AddItemForm
@close="showAddForm = false"
@added="handleItemAdded"
/>
<h3 class="text-lg font-semibold text-gray-900 mb-2">
No items yet
</h3>
<p class="text-gray-600 mb-6">
Start by scanning a barcode or adding an item manually.
</p>
<UButton
to="/scan"
color="primary"
icon="i-heroicons-qr-code"
>
Scan First Item
</UButton>
</div>
</UCard>
</div>
<!-- TODO: Item list will go here -->
<!-- Edit Item Modal -->
<EditItemModal
:item="editingItem"
@close="editingItem = null"
@updated="handleItemUpdated"
/>
<!-- Inventory List -->
<InventoryList
ref="inventoryListRef"
:refresh="refreshKey"
@add-item="showAddForm = true"
@edit-item="editingItem = $event"
/>
</div>
</template>
@@ -54,4 +55,20 @@
definePageMeta({
layout: 'default'
})
const showAddForm = ref(false)
const editingItem = ref<any>(null)
const refreshKey = ref(0)
const inventoryListRef = ref()
const handleItemAdded = (item: any) => {
showAddForm.value = false
// Reload the inventory list
inventoryListRef.value?.reload()
}
const handleItemUpdated = (item: any) => {
editingItem.value = null
inventoryListRef.value?.reload()
}
</script>