Merge pull request 'feat: implement scan-to-add flow (#25)' (#51) from feature/issue-25-scan-to-add-flow into develop

- Create useProductLookup composable
- Integrate real product lookup in scan page
- Add query parameter handling in index.vue
- Pre-fill AddItemForm from scan data
- Parse quantity and unit from product data
- Include barcode and brand in notes

Complete end-to-end scan workflow:
1. Scan barcode
2. Fetch from Open Food Facts
3. Navigate to inventory with data
4. Pre-filled add form
5. One-click add to inventory

Closes #25

app/components/inventory/AddItemForm.vue

@@ -131,6 +131,16 @@ const { addInventoryItem, addItemTags } = useInventory()
 const { getUnits } = useUnits()
 const { getTags } = useTags()
 
+const props = defineProps<{
+  initialData?: {
+    barcode?: string
+    name?: string
+    brand?: string
+    image_url?: string
+    quantity?: string
+  }
+}>()
+
 const emit = defineEmits<{
   close: []
   added: [item: any]
@@ -166,6 +176,40 @@ onMounted(async () => {
   if (defaultUnit) {
     form.unit_id = defaultUnit.id
   }
+
+  // Pre-fill from initial data (scan-to-add flow)
+  if (props.initialData) {
+    if (props.initialData.name) {
+      form.name = props.initialData.name
+    }
+    
+    // Add brand to notes if available
+    if (props.initialData.brand) {
+      form.notes = `Brand: ${props.initialData.brand}`
+      
+      if (props.initialData.barcode) {
+        form.notes += `\nBarcode: ${props.initialData.barcode}`
+      }
+    } else if (props.initialData.barcode) {
+      form.notes = `Barcode: ${props.initialData.barcode}`
+    }
+
+    // Parse quantity if available (e.g., "750g")
+    if (props.initialData.quantity) {
+      const quantityMatch = props.initialData.quantity.match(/^([\d.]+)\s*([a-zA-Z]+)$/)
+      if (quantityMatch) {
+        form.quantity = parseFloat(quantityMatch[1])
+        // Try to match unit
+        const unitAbbr = quantityMatch[2].toLowerCase()
+        const matchedUnit = units.value.find(u => 
+          u.abbreviation.toLowerCase() === unitAbbr
+        )
+        if (matchedUnit) {
+          form.unit_id = matchedUnit.id
+        }
+      }
+    }
+  }
 })
 
 // Unit options for select

app/composables/useProductLookup.ts

@@ -0,0 +1,61 @@
+// Composable for product lookup via Edge Function
+
+export interface ProductData {
+  barcode: string
+  name: string
+  brand?: string
+  quantity?: string
+  image_url?: string
+  category?: string
+  cached?: boolean
+}
+
+export const useProductLookup = () => {
+  const supabase = useSupabaseClient()
+  const isLoading = ref(false)
+  const error = ref<string | null>(null)
+
+  const lookupProduct = async (barcode: string): Promise<ProductData | null> => {
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const { data, error: functionError } = await supabase.functions.invoke('product-lookup', {
+        body: { barcode }
+      })
+
+      if (functionError) {
+        console.error('Product lookup error:', functionError)
+        error.value = functionError.message || 'Failed to lookup product'
+        
+        // Return basic product data even on error
+        return {
+          barcode,
+          name: `Product ${barcode}`,
+          cached: false
+        }
+      }
+
+      return data as ProductData
+
+    } catch (err) {
+      console.error('Unexpected error during product lookup:', err)
+      error.value = err instanceof Error ? err.message : 'Unknown error'
+      
+      // Return basic product data even on error
+      return {
+        barcode,
+        name: `Product ${barcode}`,
+        cached: false
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return {
+    lookupProduct,
+    isLoading: readonly(isLoading),
+    error: readonly(error)
+  }
+}

app/pages/index.vue

@@ -28,7 +28,8 @@
     <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"
+          :initial-data="prefilledData"
+          @close="handleCloseAddForm"
           @added="handleItemAdded"
         />
       </div>
@@ -56,13 +57,42 @@ definePageMeta({
   layout: 'default'
 })
 
+const route = useRoute()
+const router = useRouter()
+
 const showAddForm = ref(false)
 const editingItem = ref<any>(null)
 const refreshKey = ref(0)
 const inventoryListRef = ref()
+const prefilledData = ref<any>(null)
+
+// Handle scan-to-add flow (Issue #25)
+onMounted(() => {
+  if (route.query.action === 'add') {
+    // Pre-fill data from query params (from scan)
+    prefilledData.value = {
+      barcode: route.query.barcode as string || undefined,
+      name: route.query.name as string || undefined,
+      brand: route.query.brand as string || undefined,
+      image_url: route.query.image_url as string || undefined,
+      quantity: route.query.quantity as string || undefined,
+    }
+    
+    showAddForm.value = true
+    
+    // Clean up URL
+    router.replace({ query: {} })
+  }
+})
+
+const handleCloseAddForm = () => {
+  showAddForm.value = false
+  prefilledData.value = null
+}
 
 const handleItemAdded = (item: any) => {
   showAddForm.value = false
+  prefilledData.value = null
   // Reload the inventory list
   inventoryListRef.value?.reload()
 }

app/pages/scan.vue

@@ -2,25 +2,64 @@
   <div>
     <h1 class="text-3xl font-bold text-gray-900 mb-6">Scan Item</h1>
     
-    <UCard>
+    <UCard v-if="!scannedBarcode" class="mb-6">
-      <div class="text-center py-12">
+      <ScanBarcodeScanner 
-        <UIcon 
+        @barcode-detected="handleBarcodeDetected"
-          name="i-heroicons-qr-code" 
+        @manual-entry="showManualEntry = true"
-          class="w-16 h-16 text-gray-400 mx-auto mb-4"
+      />
+    </UCard>
+
+    <!-- Product Lookup Result -->
+    <UCard v-if="productData" class="mb-6">
+      <div class="space-y-4">
+        <div class="flex items-start gap-4">
+          <img 
+            v-if="productData.image_url" 
+            :src="productData.image_url" 
+            :alt="productData.name"
+            class="w-24 h-24 object-cover rounded"
+          />
+          <div class="flex-1">
+            <h3 class="text-xl font-bold mb-1">{{ productData.name }}</h3>
+            <p v-if="productData.brand" class="text-gray-600">{{ productData.brand }}</p>
+            <p class="text-sm text-gray-500 mt-2">Barcode: {{ scannedBarcode }}</p>
+          </div>
+        </div>
+
+        <UAlert 
+          v-if="lookupError"
+          color="yellow" 
+          icon="i-heroicons-exclamation-triangle"
+          title="Product not found"
+          :description="lookupError"
         />
-        <h3 class="text-lg font-semibold text-gray-900 mb-2">
+
-          Barcode Scanner
+        <div class="flex gap-2">
-        </h3>
+          <UButton 
-        <p class="text-gray-600 mb-6">
+            color="primary" 
-          This feature will be implemented in Week 3.
+            size="lg"
-        </p>
+            icon="i-heroicons-plus"
-        <UButton 
+            class="flex-1"
-          to="/" 
+            @click="addToInventory"
-          color="gray"
+          >
-          variant="soft"
+            Add to Inventory
-        >
+          </UButton>
-          Back to Inventory
+          <UButton 
-        </UButton>
+            color="gray" 
+            size="lg"
+            @click="resetScanner"
+          >
+            Scan Again
+          </UButton>
+        </div>
+      </div>
+    </UCard>
+
+    <!-- Loading State -->
+    <UCard v-if="isLookingUp">
+      <div class="text-center py-8">
+        <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mb-4"></div>
+        <p class="text-gray-600">Looking up product...</p>
       </div>
     </UCard>
   </div>
@@ -30,4 +69,44 @@
 definePageMeta({
   layout: 'default'
 })
+
+const scannedBarcode = ref<string | null>(null)
+const productData = ref<any>(null)
+const showManualEntry = ref(false)
+
+// Use product lookup composable
+const { lookupProduct, isLoading: isLookingUp, error: lookupError } = useProductLookup()
+
+const handleBarcodeDetected = async (barcode: string) => {
+  scannedBarcode.value = barcode
+  
+  // Fetch product data from Edge Function
+  const data = await lookupProduct(barcode)
+  
+  if (data) {
+    productData.value = data
+  }
+}
+
+const addToInventory = () => {
+  // Navigate to home page with add form open and pre-filled
+  navigateTo({
+    path: '/',
+    query: {
+      action: 'add',
+      barcode: scannedBarcode.value,
+      name: productData.value?.name || undefined,
+      brand: productData.value?.brand || undefined,
+      image_url: productData.value?.image_url || undefined,
+      quantity: productData.value?.quantity || undefined
+    }
+  })
+}
+
+const resetScanner = () => {
+  scannedBarcode.value = null
+  productData.value = null
+  lookupError.value = null
+  isLookingUp.value = false
+}
 </script>

supabase/functions/product-lookup/README.md

@@ -0,0 +1,83 @@
+# Product Lookup Edge Function
+
+Fetches product data from Open Food Facts API by barcode and caches results in the database.
+
+## Endpoint
+
+`POST /functions/v1/product-lookup`
+
+## Request
+
+```json
+{
+  "barcode": "8000500310427"
+}
+```
+
+## Response
+
+### Success (200)
+
+```json
+{
+  "barcode": "8000500310427",
+  "name": "Nutella",
+  "brand": "Ferrero",
+  "quantity": "750g",
+  "image_url": "https://...",
+  "category": "spreads",
+  "cached": false
+}
+```
+
+### Not Found (404)
+
+```json
+{
+  "barcode": "1234567890123",
+  "name": "Unknown Product (1234567890123)",
+  "cached": false
+}
+```
+
+### Error (500)
+
+```json
+{
+  "error": "Error message",
+  "barcode": null,
+  "name": null
+}
+```
+
+## Features
+
+- ✅ Queries Open Food Facts API
+- ✅ Caches results in `products` table
+- ✅ Returns cached data for subsequent requests
+- ✅ Handles product not found gracefully
+- ✅ CORS enabled for frontend access
+
+## Environment Variables
+
+- `SUPABASE_URL`: Auto-injected by Supabase
+- `SUPABASE_SERVICE_ROLE_KEY`: Auto-injected by Supabase
+
+## Testing
+
+```bash
+# Local (with Supabase CLI)
+supabase functions serve product-lookup
+
+# Test request
+curl -X POST http://localhost:54321/functions/v1/product-lookup \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer YOUR_ANON_KEY" \
+  -d '{"barcode":"8000500310427"}'
+```
+
+## Deployment
+
+```bash
+supabase functions deploy product-lookup
+```

supabase/functions/product-lookup/index.ts

@@ -0,0 +1,140 @@
+// Product Lookup Edge Function
+// Fetches product data from Open Food Facts API by barcode
+
+import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+}
+
+interface ProductData {
+  barcode: string
+  name: string
+  brand?: string
+  quantity?: string
+  image_url?: string
+  category?: string
+  cached?: boolean
+}
+
+serve(async (req) => {
+  // Handle CORS preflight
+  if (req.method === 'OPTIONS') {
+    return new Response('ok', { headers: corsHeaders })
+  }
+
+  try {
+    const { barcode } = await req.json()
+
+    if (!barcode) {
+      throw new Error('Barcode is required')
+    }
+
+    // Initialize Supabase client
+    const supabaseUrl = Deno.env.get('SUPABASE_URL')!
+    const supabaseKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+    const supabase = createClient(supabaseUrl, supabaseKey)
+
+    // Check cache first (products table can store known products)
+    const { data: cachedProduct } = await supabase
+      .from('products')
+      .select('*')
+      .eq('barcode', barcode)
+      .single()
+
+    if (cachedProduct) {
+      console.log(`Cache HIT for barcode: ${barcode}`)
+      return new Response(
+        JSON.stringify({
+          barcode: cachedProduct.barcode,
+          name: cachedProduct.name,
+          brand: cachedProduct.brand,
+          quantity: cachedProduct.quantity,
+          image_url: cachedProduct.image_url,
+          category: cachedProduct.category,
+          cached: true,
+        } as ProductData),
+        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+      )
+    }
+
+    console.log(`Cache MISS for barcode: ${barcode}, fetching from Open Food Facts...`)
+
+    // Fetch from Open Food Facts
+    const offResponse = await fetch(
+      `https://world.openfoodfacts.org/api/v2/product/${barcode}.json`,
+      {
+        headers: {
+          'User-Agent': 'Pantry/1.0 (https://github.com/pantry-app/pantry)',
+        },
+      }
+    )
+
+    if (!offResponse.ok) {
+      throw new Error(`Open Food Facts API error: ${offResponse.status}`)
+    }
+
+    const offData = await offResponse.json()
+
+    if (offData.status !== 1 || !offData.product) {
+      // Product not found in Open Food Facts
+      return new Response(
+        JSON.stringify({
+          barcode,
+          name: `Unknown Product (${barcode})`,
+          cached: false,
+        } as ProductData),
+        { 
+          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+          status: 404
+        }
+      )
+    }
+
+    const product = offData.product
+
+    // Extract relevant data
+    const productData: ProductData = {
+      barcode,
+      name: product.product_name || product.generic_name || `Product ${barcode}`,
+      brand: product.brands || undefined,
+      quantity: product.quantity || undefined,
+      image_url: product.image_url || product.image_front_url || undefined,
+      category: product.categories || undefined,
+      cached: false,
+    }
+
+    // Cache the product in our database (upsert)
+    await supabase.from('products').upsert({
+      barcode: productData.barcode,
+      name: productData.name,
+      brand: productData.brand,
+      quantity: productData.quantity,
+      image_url: productData.image_url,
+      category: productData.category,
+    }, { onConflict: 'barcode' })
+
+    console.log(`Successfully fetched and cached product: ${productData.name}`)
+
+    return new Response(
+      JSON.stringify(productData),
+      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
+    )
+
+  } catch (error) {
+    console.error('Error in product-lookup:', error)
+    return new Response(
+      JSON.stringify({ 
+        error: error instanceof Error ? error.message : 'Unknown error',
+        barcode: null,
+        name: null,
+      }),
+      { 
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+        status: 500
+      }
+    )
+  }
+})