@fayz-ai/plugin-inventory 0.9.0 → 0.9.1

package/src/views/ProductCrudForm.tsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import { SubpageHeader, toast } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { CrudFormPage, useLimitGuard, invalidateLimit } from '@fayz-ai/saas'
-import { useInventoryConfig, useInventoryStore, useInventoryProvider } from '../InventoryContext'
-import type { ProductType } from '../types'
-import { buildProductEntity } from './productEntity'
-
-// ---------------------------------------------------------------------------
-// Product create/edit, rendered through the generic CRUD form. The sectioned
-// layout (General Information · Classification · Pricing+Margin · Stock Levels)
-// comes from the shared buildProductEntity (segmented/computed/currency field
-// types). Persistence still flows through the inventory provider/store, so the
-// metadata-JSON column mapping is unchanged.
-// ---------------------------------------------------------------------------
-
-export function ProductCrudForm({ editId, onSaved }: { editId?: string; onSaved?: () => void }) {
-  const t = useTranslation()
-  const { productTypes, currency } = useInventoryConfig()
-  const provider = useInventoryProvider()
-  const createProduct = useInventoryStore((s) => s.createProduct)
-  const guardProducts = useLimitGuard('products')
-  const isEdit = !!editId
-
-  const [initialData, setInitialData] = React.useState<Record<string, any> | null>(isEdit ? null : {})
-  const [headerName, setHeaderName] = React.useState('')
-
-  // Load the existing product for edit and map it to flat form values.
-  React.useEffect(() => {
-    if (!editId) return
-    let cancelled = false
-    ;(async () => {
-      const p = await provider.getProductById(editId)
-      if (cancelled) return
-      setHeaderName(p?.name ?? '')
-      setInitialData(
-        p
-          ? {
-              name: p.name,
-              brand: p.brand ?? '',
-              sku: p.sku ?? '',
-              barcode: p.barcode ?? '',
-              description: p.description ?? '',
-              productType: p.productType,
-              costPrice: p.costPrice,
-              salePrice: p.salePrice ?? 0,
-              minQuantity: p.minQuantity,
-              maxQuantity: p.maxQuantity ?? 0,
-            }
-          : {},
-      )
-    })()
-    return () => { cancelled = true }
-  }, [editId])
-
-  const entity = React.useMemo(() => buildProductEntity(t, productTypes, currency), [t, productTypes, currency])
-
-  async function save(values: Record<string, any>) {
-    const name = String(values.name ?? '').trim()
-    if (!name) { toast.error(t('common.formIncomplete')); throw new Error('name required') }
-    const payload = {
-      name,
-      sku: values.sku || undefined,
-      barcode: values.barcode || undefined,
-      brand: values.brand || undefined,
-      productType: (values.productType ?? productTypes[0]?.value) as ProductType,
-      costPrice: Number(values.costPrice) || 0,
-      salePrice: Number(values.salePrice) || undefined,
-      minQuantity: Number(values.minQuantity) || 0,
-      maxQuantity: Number(values.maxQuantity) || undefined,
-      description: values.description || undefined,
-    }
-    if (isEdit && editId) {
-      await provider.updateProduct(editId, payload)
-    } else {
-      // Plan quantity guard (client-side, before the provider call). Opens the
-      // global UpgradeModal and aborts when the plan's product cap is reached.
-      if ((await guardProducts()) === 'blocked') return
-      await createProduct(payload)
-      invalidateLimit('products')
-    }
-    onSaved?.()
-  }
-
-  const title = isEdit ? (headerName || t('inventory.productForm.editProduct')) : t('inventory.productForm.newProduct')
-  const subtitle = isEdit ? undefined : t('inventory.productForm.addToCatalog')
-
-  return (
-    <div className="space-y-5">
-      <SubpageHeader title={title} subtitle={subtitle} onBack={onSaved} parentLabel={t('inventory.nav.products')} />
-      {initialData && (
-        <CrudFormPage
-          entityDef={entity}
-          mode={isEdit ? 'edit' : 'create'}
-          initialData={initialData}
-          onSubmit={save}
-          onCancel={() => onSaved?.()}
-          namePlural={t('inventory.nav.products')}
-          hideBreadcrumb
-        />
-      )}
-    </div>
-  )
-}

package/src/views/ProductListView.tsx

@@ -1,58 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import { CrudListView } from '@fayz-ai/saas'
-import { useInventoryConfig, useInventoryStore } from '../InventoryContext'
-import { useTranslation } from '@fayz-ai/core'
-import type { ProductType } from '../types'
-import { buildProductEntity } from './productEntity'
-
-// Product list, rendered through the generic CrudListView (header · search ·
-// facet pills · table). One shared EntityDef (buildProductEntity) drives both
-// this list and the create/edit form. Data + routing stay in the inventory
-// store / module nav.
-export function ProductListView({ onNew, onEdit }: {
-  onNew?: () => void
-  onEdit?: (id: string) => void
-}) {
-  const t = useTranslation()
-  const { currency, productTypes } = useInventoryConfig()
-  const products = useInventoryStore((s) => s.products)
-  const productsTotal = useInventoryStore((s) => s.productsTotal)
-  const productsLoading = useInventoryStore((s) => s.productsLoading)
-  const fetchProducts = useInventoryStore((s) => s.fetchProducts)
-
-  const [search, setSearch] = useState('')
-  const [typeFilter, setTypeFilter] = useState<string | undefined>()
-  const [loadedOnce, setLoadedOnce] = useState(false)
-
-  useEffect(() => {
-    let active = true
-    Promise.resolve(fetchProducts({ productType: typeFilter as ProductType | undefined, search: search || undefined }))
-      .finally(() => { if (active) setLoadedOnce(true) })
-    return () => { active = false }
-  }, [typeFilter, search])
-
-  const entity = useMemo(() => buildProductEntity(t, productTypes, currency), [t, productTypes, currency])
-  const facets = useMemo(() => [{
-    field: 'productType',
-    allLabel: t('crud.list.allFacet'),
-    options: productTypes.map((p) => ({ value: p.value, label: p.label })),
-  }], [productTypes, t])
-
-  return (
-    <CrudListView
-      entityDef={entity}
-      items={loadedOnce ? products : null}
-      total={productsTotal}
-      search={search}
-      onSearchChange={setSearch}
-      searchPlaceholder={t('inventory.productList.searchPlaceholder')}
-      facets={facets}
-      activeFilters={{ productType: typeFilter }}
-      onFacetChange={(_field, value) => setTypeFilter(value)}
-      onNew={onNew}
-      addLabel={t('inventory.productList.newProduct')}
-      onRowClick={(row) => onEdit?.((row as { id: string }).id)}
-      feature="inventory"
-    />
-  )
-}

package/src/views/RecipeDetailView.tsx

@@ -1,192 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { BookOpen, Clock, Layers, Package } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { useInventoryProvider } from '../InventoryContext'
-import { useTranslation } from '@fayz-ai/core'
-import { Breadcrumb, DataTable } from '@fayz-ai/ui'
-import type { Recipe, RecipeIngredient } from '../types'
-
-function DetailSkeleton() {
-  return (
-    <div className="space-y-5">
-      <div className="flex items-center gap-3">
-        <div className="h-12 w-12 rounded-xl bg-muted/40 animate-pulse" />
-        <div className="space-y-2 flex-1">
-          <div className="h-5 w-40 rounded bg-muted/40 animate-pulse" />
-          <div className="h-3 w-24 rounded bg-muted/30 animate-pulse" />
-        </div>
-      </div>
-      <div className="rounded-xl border divide-y">
-        {[1, 2, 3].map((i) => (
-          <div key={i} className="flex items-center gap-3 px-4 py-3">
-            <div className="h-3 w-20 rounded bg-muted/30 animate-pulse" />
-            <div className="flex-1" />
-            <div className="h-3 w-16 rounded bg-muted/40 animate-pulse" />
-          </div>
-        ))}
-      </div>
-      <div className="rounded-xl border p-4 space-y-2">
-        {[1, 2, 3, 4].map((i) => (
-          <div key={i} className="flex items-center gap-3">
-            <div className="h-3.5 w-6 rounded bg-muted/30 animate-pulse" />
-            <div className="h-3.5 flex-1 rounded bg-muted/30 animate-pulse" />
-            <div className="h-3.5 w-12 rounded bg-muted/40 animate-pulse" />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export function RecipeDetailView({ recipeId, onBack }: { recipeId: string; onBack: () => void }) {
-  const t = useTranslation()
-  const provider = useInventoryProvider()
-  const [recipe, setRecipe] = useState<Recipe | null>(null)
-  const [ingredients, setIngredients] = useState<RecipeIngredient[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    setLoading(true)
-    Promise.all([
-      provider.getRecipeById(recipeId),
-      provider.getRecipeIngredients(recipeId),
-    ]).then(([r, ings]) => {
-      setRecipe(r)
-      setIngredients(ings.sort((a, b) => a.displayOrder - b.displayOrder))
-      setLoading(false)
-    })
-  }, [recipeId])
-
-  if (loading) {
-    return (
-      <div className="space-y-6">
-        <Breadcrumb parent={t('inventory.nav.recipes')} current={t('inventory.recipeDetail.loading')} onBack={onBack} />
-        <DetailSkeleton />
-      </div>
-    )
-  }
-
-  if (!recipe) {
-    return (
-      <div className="space-y-6">
-        <Breadcrumb parent={t('inventory.nav.recipes')} onBack={onBack} />
-        <div className="flex flex-col items-center justify-center py-16 text-center rounded-lg border-2 border-dashed border-muted">
-          <BookOpen className="h-8 w-8 text-muted-foreground/30 mb-2" />
-          <p className="text-sm text-muted-foreground">{t('inventory.recipeDetail.notFound')}</p>
-          <button onClick={onBack} className="text-xs text-primary hover:underline mt-1">{t('inventory.recipeDetail.backToList')}</button>
-        </div>
-      </div>
-    )
-  }
-
-  const ingredientColumns: ColumnDef<RecipeIngredient, any>[] = [
-    {
-      id: 'index', header: '#',
-      cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.index + 1}</span>,
-    },
-    {
-      accessorKey: 'productName', header: t('inventory.recipeDetail.ingredient'),
-      cell: ({ getValue }) => <span className="font-medium">{(getValue() as string) || '—'}</span>,
-    },
-    {
-      accessorKey: 'quantity', header: () => <span className="block text-right">{t('inventory.recipeDetail.quantity')}</span>,
-      cell: ({ getValue }) => <span className="block text-right tabular-nums">{getValue() as number}</span>,
-    },
-    {
-      accessorKey: 'unitName', header: t('inventory.recipeDetail.unit'),
-      cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{(getValue() as string) || '—'}</span>,
-    },
-    {
-      accessorKey: 'notes', header: t('inventory.recipeDetail.notes'),
-      cell: ({ getValue }) => <span className="text-xs text-muted-foreground">{(getValue() as string) || '—'}</span>,
-    },
-  ]
-
-  return (
-    <div className="space-y-6">
-      {/* Breadcrumb */}
-      <Breadcrumb parent={t('inventory.nav.recipes')} current={recipe.name} onBack={onBack} />
-
-      {/* Hero */}
-      <div className="flex items-start gap-4">
-        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <BookOpen className="h-6 w-6" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <h1 className="text-2xl font-bold text-foreground">{recipe.name}</h1>
-          {recipe.description && <p className="text-muted-foreground mt-0.5 text-sm">{recipe.description}</p>}
-          <div className="flex items-center gap-3 mt-2">
-            {recipe.isActive ? (
-              <span className="inline-flex items-center gap-1 text-[10px] text-success"><span className="h-1.5 w-1.5 rounded-full bg-success" /> {t('inventory.recipeDetail.active')}</span>
-            ) : (
-              <span className="inline-flex items-center gap-1 text-[10px] text-muted-foreground/50"><span className="h-1.5 w-1.5 rounded-full bg-muted-foreground/30" /> {t('inventory.recipeDetail.inactive')}</span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="border-t" />
-
-      <div className="grid gap-4 lg:grid-cols-3">
-        {/* Left: Info */}
-        <div className="space-y-4">
-          {/* Metrics */}
-          <div className="rounded-xl border divide-y">
-            {recipe.productName && (
-              <div className="flex items-center gap-3 px-4 py-3">
-                <Package className="h-4 w-4 text-muted-foreground shrink-0" />
-                <span className="text-xs text-muted-foreground flex-1">{t('inventory.recipeDetail.produces')}</span>
-                <span className="text-sm font-medium">{recipe.productName}</span>
-              </div>
-            )}
-            <div className="flex items-center gap-3 px-4 py-3">
-              <Layers className="h-4 w-4 text-muted-foreground shrink-0" />
-              <span className="text-xs text-muted-foreground flex-1">{t('inventory.recipeDetail.yield')}</span>
-              <span className="text-sm font-medium">{recipe.yieldQuantity}{recipe.yieldUnitName ? ` ${recipe.yieldUnitName}` : ''}</span>
-            </div>
-            {recipe.preparationTimeMinutes != null && (
-              <div className="flex items-center gap-3 px-4 py-3">
-                <Clock className="h-4 w-4 text-muted-foreground shrink-0" />
-                <span className="text-xs text-muted-foreground flex-1">{t('inventory.recipeDetail.prepTime')}</span>
-                <span className="text-sm font-medium">{recipe.preparationTimeMinutes} min</span>
-              </div>
-            )}
-            <div className="flex items-center gap-3 px-4 py-3">
-              <Layers className="h-4 w-4 text-muted-foreground shrink-0" />
-              <span className="text-xs text-muted-foreground flex-1">{t('inventory.recipeDetail.ingredientCount')}</span>
-              <span className="text-sm font-medium">{ingredients.length}</span>
-            </div>
-          </div>
-
-          {/* Instructions */}
-          {recipe.instructions && (
-            <div>
-              <h3 className="text-sm font-semibold text-foreground mb-1">{t('inventory.recipeDetail.instructions')}</h3>
-              <div className="rounded-xl border bg-card shadow-sm px-4 py-3">
-                <p className="text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed">{recipe.instructions}</p>
-              </div>
-            </div>
-          )}
-
-          {/* Dates */}
-          <div className="flex items-center gap-4 text-[10px] text-muted-foreground/50">
-            <span>{t('inventory.recipeDetail.created')} {recipe.createdAt?.slice(0, 10)}</span>
-            <span>{t('inventory.recipeDetail.updated')} {recipe.updatedAt?.slice(0, 10)}</span>
-          </div>
-        </div>
-
-        {/* Right: Ingredients table */}
-        <div className="lg:col-span-2">
-          <h3 className="text-sm font-semibold text-foreground mb-2">{t('inventory.recipeDetail.ingredientsTitle')}</h3>
-          {ingredients.length === 0 ? (
-            <div className="rounded-xl border p-8 text-center">
-              <p className="text-xs text-muted-foreground">{t('inventory.recipeDetail.noIngredients')}</p>
-            </div>
-          ) : (
-            <DataTable columns={ingredientColumns} data={ingredients} variant="card" />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/RecipeFormView.tsx

@@ -1,241 +0,0 @@
-import React, { useState } from 'react'
-import { Plus, Trash2, GripVertical } from 'lucide-react'
-import { useInventoryStore, useInventoryProvider } from '../InventoryContext'
-import { toast } from '@fayz-ai/ui'
-import { SubpageHeader, useSaveBar } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { SearchSelect } from '@fayz-ai/ui'
-import { useLimitGuard, invalidateLimit } from '@fayz-ai/saas'
-import type { CreateRecipeIngredientInput } from '../types'
-
-interface FormIngredient {
-  _id: string
-  productId: string
-  productName: string
-  quantity: number
-  unitId: string
-  unitName: string
-  notes: string
-}
-
-let fid = 1
-function nextId() { return `ri${fid++}` }
-
-export function RecipeFormView({ onSaved }: { onSaved?: (id?: string) => void }) {
-  const t = useTranslation()
-  const provider = useInventoryProvider()
-  const createRecipe = useInventoryStore((s) => s.createRecipe)
-  const guardRecipes = useLimitGuard('recipes')
-
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [productId, setProductId] = useState('')
-  const [productName, setProductName] = useState('')
-  const [yieldQuantity, setYieldQuantity] = useState(1)
-  const [prepTime, setPrepTime] = useState('')
-  const [instructions, setInstructions] = useState('')
-  const [ingredients, setIngredients] = useState<FormIngredient[]>([])
-  const [saving, setSaving] = useState(false)
-
-  function addIngredient() {
-    setIngredients([...ingredients, { _id: nextId(), productId: '', productName: '', quantity: 1, unitId: '', unitName: '', notes: '' }])
-  }
-
-  function updateIngredient(id: string, data: Partial<FormIngredient>) {
-    setIngredients(ingredients.map((ing) => ing._id === id ? { ...ing, ...data } : ing))
-  }
-
-  function removeIngredient(id: string) {
-    setIngredients(ingredients.filter((ing) => ing._id !== id))
-  }
-
-  async function handleSave() {
-    if (!name.trim() || !productId || ingredients.length === 0) { toast.error(t('common.formIncomplete')); return }
-    // Plan quantity guard (client-side, before the provider call). Opens the
-    // global UpgradeModal and aborts when the plan's recipe cap is reached.
-    if ((await guardRecipes()) === 'blocked') return
-    setSaving(true)
-    try {
-      const recipe = await createRecipe({
-        name,
-        description: description || undefined,
-        productId,
-        yieldQuantity,
-        preparationTimeMinutes: prepTime ? parseInt(prepTime) : undefined,
-        instructions: instructions || undefined,
-        ingredients: ingredients.filter((i) => i.productId).map((i, idx) => ({
-          productId: i.productId,
-          quantity: i.quantity,
-          unitId: i.unitId || undefined,
-          displayOrder: idx,
-          notes: i.notes || undefined,
-        })),
-      })
-      invalidateLimit('recipes')
-      onSaved?.(recipe.id)
-    } finally { setSaving(false) }
-  }
-
-  const dirty = !!(name || description || productId || prepTime || instructions || ingredients.length > 0 || yieldQuantity !== 1)
-  useSaveBar({
-    dirty,
-    saving,
-    onSave: () => { void handleSave() },
-    onDiscard: () => onSaved?.(),
-    saveLabel: t('inventory.recipeForm.saveRecipe'),
-  })
-
-  async function searchProducts(query: string) {
-    const result = await provider.getProducts({ search: query, pageSize: 10 })
-    return result.data.map((p) => ({ id: p.id, label: p.name, subtitle: p.sku ?? p.productType, data: p }))
-  }
-
-  async function quickCreateProduct(name: string, type: 'ingredient' | 'sale' = 'ingredient') {
-    try {
-      const product = await provider.createProduct({ name, productType: type })
-      toast.success(`Product "${name}" created`)
-      return product
-    } catch {
-      toast.error('Failed to create product')
-      return null
-    }
-  }
-
-  return (
-    <div className="space-y-5">
-      <SubpageHeader
-        title={t('inventory.recipeForm.newRecipe')}
-        subtitle={t('inventory.recipeForm.subtitle')}
-        onBack={() => onSaved?.()}
-        parentLabel={t('inventory.nav.recipes')}
-      />
-
-      <div className="grid gap-4 lg:grid-cols-3">
-        {/* Left: Recipe details */}
-        <div className="rounded-lg border bg-card shadow-sm p-5 space-y-4">
-          <h3 className="text-sm font-semibold">{t('inventory.recipeForm.recipeDetails')}</h3>
-
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.recipeForm.recipeName')} *</label>
-            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inventory.recipeForm.recipeNamePlaceholder')} autoFocus className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
-          </div>
-
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.recipeForm.description')}</label>
-            <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder={t('inventory.recipeForm.descriptionPlaceholder')} className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring resize-none" />
-          </div>
-
-          <SearchSelect
-            label={`${t('inventory.recipeForm.produces')} *`}
-            value={productId}
-            displayValue={productName}
-            onChange={(id, opt) => { setProductId(id); setProductName(opt?.label ?? '') }}
-            onSearch={searchProducts}
-            placeholder={t('inventory.recipeForm.searchProduct')}
-            allowCreate
-            createLabel={t('inventory.recipeForm.createProduct')}
-            onCreate={async (q) => {
-              const p = await quickCreateProduct(q, 'sale')
-              if (p) { setProductId(p.id); setProductName(p.name) }
-            }}
-          />
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="text-xs font-medium text-muted-foreground">{t('inventory.recipeForm.yieldQuantity')}</label>
-              <input type="number" min={0.01} step={0.01} value={yieldQuantity} onChange={(e) => setYieldQuantity(Number(e.target.value) || 1)} className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
-            </div>
-            <div>
-              <label className="text-xs font-medium text-muted-foreground">{t('inventory.recipeForm.prepTime')}</label>
-              <input type="number" min={0} value={prepTime} onChange={(e) => setPrepTime(e.target.value)} placeholder="—" className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" />
-            </div>
-          </div>
-
-          <div>
-            <label className="text-xs font-medium text-muted-foreground">{t('inventory.recipeForm.instructions')}</label>
-            <textarea value={instructions} onChange={(e) => setInstructions(e.target.value)} rows={4} placeholder={t('inventory.recipeForm.instructionsPlaceholder')} className="w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring resize-none" />
-          </div>
-        </div>
-
-        {/* Right: Ingredients */}
-        <div className="lg:col-span-2 rounded-lg border bg-card shadow-sm overflow-hidden flex flex-col">
-          <div className="flex items-center justify-between px-4 py-3 border-b">
-            <h3 className="text-sm font-semibold">{t('inventory.recipeForm.ingredients')}</h3>
-            <button onClick={addIngredient} className="inline-flex items-center gap-1.5 rounded-lg bg-primary border border-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors">
-              <Plus className="h-3 w-3" /> {t('inventory.recipeForm.addIngredient')}
-            </button>
-          </div>
-
-          <div className="flex-1">
-            {ingredients.length === 0 ? (
-              <div className="py-12 text-center">
-                <p className="text-sm text-muted-foreground">{t('inventory.recipeForm.noIngredients')}</p>
-                <button onClick={addIngredient} className="text-xs text-primary hover:underline mt-1">{t('inventory.recipeForm.addFirstIngredient')}</button>
-              </div>
-            ) : (
-              <div className="divide-y">
-                {/* Header */}
-                <div className="grid grid-cols-12 gap-2 px-4 py-2 text-[10px] font-medium text-muted-foreground uppercase tracking-wider bg-muted/20">
-                  <div className="col-span-5">{t('inventory.recipeForm.ingredient')}</div>
-                  <div className="col-span-2">{t('inventory.recipeForm.quantity')}</div>
-                  <div className="col-span-4">{t('inventory.recipeForm.notes')}</div>
-                  <div className="col-span-1" />
-                </div>
-                {ingredients.map((ing, idx) => (
-                  <div key={ing._id} className="grid grid-cols-12 gap-2 px-4 py-2.5 items-center group">
-                    <div className="col-span-5">
-                      <SearchSelect
-                        value={ing.productId}
-                        displayValue={ing.productName}
-                        onChange={(id, opt) => updateIngredient(ing._id, { productId: id, productName: opt?.label ?? '' })}
-                        onSearch={searchProducts}
-                        placeholder={t('inventory.recipeForm.searchIngredient')}
-                        allowCreate
-                        createLabel={t('inventory.recipeForm.createIngredient')}
-                        onCreate={async (q) => {
-                          const p = await quickCreateProduct(q, 'ingredient')
-                          if (p) updateIngredient(ing._id, { productId: p.id, productName: p.name })
-                        }}
-                      />
-                    </div>
-                    <div className="col-span-2">
-                      <input
-                        type="number"
-                        min={0.01}
-                        step={0.01}
-                        value={ing.quantity}
-                        onChange={(e) => updateIngredient(ing._id, { quantity: Number(e.target.value) || 0 })}
-                        className="w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-                      />
-                    </div>
-                    <div className="col-span-4">
-                      <input
-                        type="text"
-                        value={ing.notes}
-                        onChange={(e) => updateIngredient(ing._id, { notes: e.target.value })}
-                        placeholder={t('inventory.recipeForm.notesPlaceholder')}
-                        className="w-full rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-                      />
-                    </div>
-                    <div className="col-span-1 flex justify-end">
-                      <button onClick={() => removeIngredient(ing._id)} className="p-1 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-destructive transition-all">
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          {ingredients.length > 0 && (
-            <div className="px-4 py-3 border-t bg-muted/20 text-xs text-muted-foreground">
-              {t('inventory.recipeForm.ingredientsConfigured', { configured: String(ingredients.filter((i) => i.productId).length), total: String(ingredients.length) })}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}