pantry/app/components/inventory/AddItemForm.vue

<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <h3 class="text-lg font-semibold">Add New Item</h3>
        <UButton 
          icon="i-heroicons-x-mark" 
          color="gray" 
          variant="ghost"
          @click="$emit('close')"
        />
      </div>
    </template>

    <form @submit.prevent="handleSubmit" class="space-y-4">
      <!-- Item Name -->
      <UFormGroup label="Item Name" required>
        <UInput 
          v-model="form.name"
          placeholder="e.g. Whole Milk, Pasta, Tomatoes"
          size="lg"
          autofocus
        />
      </UFormGroup>

      <!-- Quantity & Unit -->
      <div class="grid grid-cols-2 gap-3">
        <UFormGroup label="Quantity" required>
          <UInput 
            v-model.number="form.quantity"
            type="number"
            min="0.01"
            step="0.01"
            placeholder="1"
            size="lg"
          />
        </UFormGroup>

        <UFormGroup label="Unit" required>
          <USelect 
            v-model="form.unit_id"
            :options="unitOptions"
            option-attribute="label"
            value-attribute="value"
            placeholder="Select unit"
            size="lg"
          />
        </UFormGroup>
      </div>

      <!-- Expiry Date -->
      <UFormGroup label="Expiry Date" hint="Optional">
        <UInput 
          v-model="form.expiry_date"
          type="date"
          size="lg"
        />
      </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
          v-model="form.notes"
          placeholder="Any additional notes..."
          :rows="2"
        />
      </UFormGroup>

      <!-- Tags -->
      <UFormGroup label="Tags" hint="Optional">
        <TagsTagPicker v-model="selectedTags" />
      </UFormGroup>

      <!-- Submit -->
      <div class="flex gap-2 pt-2">
        <UButton 
          type="submit"
          color="primary"
          size="lg"
          class="flex-1"
          :loading="submitting"
          :disabled="!isValid"
        >
          Add Item
        </UButton>
        <UButton 
          color="gray"
          size="lg"
          variant="soft"
          @click="$emit('close')"
        >
          Cancel
        </UButton>
      </div>
    </form>
  </UCard>
</template>

<script setup lang="ts">
const { addInventoryItem, addItemTags } = useInventory()
const { getUnits } = useUnits()

const props = defineProps<{
  initialData?: {
    barcode?: string
    name?: string
    brand?: string
    image_url?: string
    quantity?: string
  }
}>()

const emit = defineEmits<{
  close: []
  added: [item: any]
}>()

// Form state
const form = reactive({
  name: '',
  quantity: 1,
  unit_id: '',
  expiry_date: '',
  low_stock_threshold: null as number | null,
  notes: ''
})

const submitting = ref(false)
const selectedTags = ref<any[]>([])

// Load units
const units = ref<any[]>([])

onMounted(async () => {
  const unitsResult = await getUnits()
  units.value = unitsResult.data || []

  // Set default unit (Piece)
  const defaultUnit = units.value.find(u => u.abbreviation === 'pc')
  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
const unitOptions = computed(() => {
  const grouped: Record<string, any[]> = {}
  
  for (const unit of units.value) {
    const type = unit.unit_type
    if (!grouped[type]) grouped[type] = []
    grouped[type].push({
      label: `${unit.name} (${unit.abbreviation})`,
      value: unit.id
    })
  }

  return Object.entries(grouped).flatMap(([type, options]) => [
    { label: `— ${type.charAt(0).toUpperCase() + type.slice(1)} —`, value: '', disabled: true },
    ...options
  ])
})

// Validation
const isValid = computed(() => {
  return form.name.trim().length > 0 && form.quantity > 0 && form.unit_id
})

// Submit
const handleSubmit = async () => {
  if (!isValid.value) return

  submitting.value = true

  const { data, error } = await addInventoryItem({
    name: form.name.trim(),
    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
  })

  if (error) {
    alert('Failed to add item: ' + error.message)
    submitting.value = false
    return
  }

  // Add tags if any selected
  if (data && selectedTags.value.length > 0) {
    const tagIds = selectedTags.value.map(t => t.id)
    await addItemTags(data.id, tagIds)
  }

  emit('added', data)
  submitting.value = false
}
</script>