Check Off Items While Shopping

As a Host, I want to check off items as I shop, So that I can track my progress and ensure I don’t forget anything.

Acceptance Criteria

• Given I have a shopping list on my mobile device
• When I find an item in the store
• Then I can mark it as checked/purchased
• And checked items are visually distinguished (strikethrough, different color)
• And I can see a progress indicator (e.g., “12 of 25 items purchased”)
• And I can uncheck an item if I made a mistake

Implementation Status

✅ IMPLEMENTED (January 2026)

Implementation Details

Files:

• shaker/app/(tabs)/inventory/shopping/index.tsx - Check-off functionality
• shaker/data/shopping-lists/index.ts - toggleItemChecked function
• shaker/types/shopping-list.ts - checkOffItem, uncheckItem functions

Features:

• ✅ Tap item to check/uncheck
• ✅ Visual distinction (strikethrough, gray color, checkmark icon)
• ✅ Progress indicator in summary (e.g., “12 of 25 items purchased”)
• ✅ Progress bar showing percent complete
• ✅ Uncheck functionality
• ✅ Product selection modal when checking off items with ingredients
• ✅ Automatic inventory update when product is selected
• ⚠️ Note: Event shopping lists are read-only (check-off not supported)

Implementation:

• Checkbox UI with visual feedback
• toggleItemChecked function handles check/uncheck logic
• Summary calculation includes checked count and percentage
• Product selection modal for linking purchased products
• Price history tracking when actual cost is entered

Priority

High - Essential for in-store use

Related Entities

• ShoppingList, ShoppingListItem