@fayz-ai/plugin-inventory 0.1.1

package/src/views/ProductFormView.tsx

@@ -0,0 +1,283 @@
+import React, { useState, useEffect } from 'react'
+import { ImagePlus } from 'lucide-react'
+import { useInventoryConfig, useInventoryStore, useInventoryProvider, formatCurrency } from '../InventoryContext'
+import { SubpageHeader, useSaveBar, toast } from '@fayz-ai/ui'
+import { CurrencyInput } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import type { ProductType } from '../types'
+
+// ---------------------------------------------------------------------------
+// Product type descriptions — parametrizable via config
+// ---------------------------------------------------------------------------
+
+const TYPE_DESCRIPTION_KEYS: Record<string, string> = {
+  ingredient: 'inventory.productForm.typeIngredient',
+  sale: 'inventory.productForm.typeSale',
+  intermediate: 'inventory.productForm.typeIntermediate',
+  asset: 'inventory.productForm.typeAsset',
+}
+
+// ---------------------------------------------------------------------------
+// Section component for grouping form fields
+// ---------------------------------------------------------------------------
+
+function FormSection({ title, subtitle, children }: {
+  title: string; subtitle?: string; children: React.ReactNode
+}) {
+  return (
+    <div className="rounded-lg border bg-card shadow-sm">
+      <div className="px-5 py-3 border-b">
+        <h3 className="text-sm font-semibold">{title}</h3>
+        {subtitle && <p className="text-[10px] text-muted-foreground mt-0.5">{subtitle}</p>}
+      </div>
+      <div className="p-5 space-y-4">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Product form
+// ---------------------------------------------------------------------------
+
+export function ProductFormView({ editId, onSaved }: { editId?: string; onSaved?: () => void }) {
+  const t = useTranslation()
+  const { productTypes, currency } = useInventoryConfig()
+  const provider = useInventoryProvider()
+  const createProduct = useInventoryStore((s) => s.createProduct)
+  const isEdit = !!editId
+
+  const [loaded, setLoaded] = useState(false)
+  const [name, setName] = useState('')
+  const [sku, setSku] = useState('')
+  const [barcode, setBarcode] = useState('')
+  const [brand, setBrand] = useState('')
+  const [productType, setProductType] = useState<ProductType>(productTypes[0]?.value as ProductType ?? 'ingredient')
+  const [costPrice, setCostPrice] = useState(0)
+  const [salePrice, setSalePrice] = useState(0)
+  const [minQuantity, setMinQuantity] = useState(0)
+  const [maxQuantity, setMaxQuantity] = useState(0)
+  const [description, setDescription] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  // Load existing product for edit
+  useEffect(() => {
+    if (!editId || loaded) return
+    ;(async () => {
+      const product = await provider.getProductById(editId)
+      if (!product) return
+      setName(product.name)
+      setSku(product.sku ?? '')
+      setBarcode(product.barcode ?? '')
+      setBrand(product.brand ?? '')
+      setProductType(product.productType)
+      setCostPrice(product.costPrice)
+      setSalePrice(product.salePrice ?? 0)
+      setMinQuantity(product.minQuantity)
+      setMaxQuantity(product.maxQuantity ?? 0)
+      setDescription(product.description ?? '')
+      setLoaded(true)
+    })()
+  }, [editId])
+
+  const fields = { name, sku, barcode, brand, productType, costPrice, salePrice, minQuantity, maxQuantity, description }
+  const ready = !editId || loaded
+  const snapshot = React.useRef<string | null>(null)
+  useEffect(() => {
+    if (ready && snapshot.current === null) snapshot.current = JSON.stringify(fields)
+  }, [ready])
+  const dirty = snapshot.current !== null && JSON.stringify(fields) !== snapshot.current
+  useSaveBar({
+    dirty,
+    saving,
+    onSave: () => { void handleSave() },
+    onDiscard: () => onSaved?.(),
+    saveLabel: t('inventory.productForm.save'),
+  })
+
+  async function handleSave() {
+    if (!name.trim()) { toast.error(t('common.formIncomplete')); return }
+    setSaving(true)
+    try {
+      if (isEdit && editId) {
+        await provider.updateProduct(editId, {
+          name, sku: sku || undefined, barcode: barcode || undefined, brand: brand || undefined,
+          productType, costPrice, salePrice: salePrice || undefined,
+          minQuantity, maxQuantity: maxQuantity || undefined, description: description || undefined,
+        })
+      } else {
+        await createProduct({
+          name, sku: sku || undefined, barcode: barcode || undefined, brand: brand || undefined,
+          productType, costPrice, salePrice: salePrice || undefined,
+          minQuantity, maxQuantity: maxQuantity || undefined, description: description || undefined,
+        })
+      }
+      onSaved?.()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const title = isEdit ? (name || t('inventory.productForm.editProduct')) : t('inventory.productForm.newProduct')
+  const subtitle = isEdit ? undefined : t('inventory.productForm.addToCatalog')
+  const margin = salePrice > 0 && costPrice > 0 ? ((salePrice - costPrice) / costPrice * 100).toFixed(1) : null
+
+  return (
+    <div className="space-y-5">
+      <SubpageHeader
+        title={title}
+        subtitle={subtitle}
+        onBack={onSaved}
+        parentLabel={t('inventory.nav.products')}
+      />
+
+      {/* Section 1: General Info */}
+      <FormSection title={t('inventory.productForm.generalInfo')}>
+        <div className="flex gap-4">
+          {/* Image placeholder */}
+          <div className="shrink-0">
+            <div className="w-20 h-20 rounded-lg border-2 border-dashed border-muted flex items-center justify-center text-muted-foreground hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer">
+              <ImagePlus className="h-5 w-5" />
+            </div>
+          </div>
+
+          <div className="flex-1 grid gap-3 sm:grid-cols-2">
+            <div className="sm:col-span-1">
+              <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.name')} *</label>
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={t('inventory.productForm.namePlaceholder')}
+                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.productForm.brand')}</label>
+              <input
+                type="text"
+                value={brand}
+                onChange={(e) => setBrand(e.target.value)}
+                placeholder={t('inventory.productForm.brandPlaceholder')}
+                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>
+
+        <div className="grid gap-3 sm:grid-cols-2">
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.sku')}</label>
+            <input type="text" value={sku} onChange={(e) => setSku(e.target.value)} placeholder={t('inventory.productForm.skuPlaceholder')} 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.productForm.barcode')}</label>
+            <input type="text" value={barcode} onChange={(e) => setBarcode(e.target.value)} placeholder={t('inventory.productForm.barcodePlaceholder')} 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.productForm.description')}</label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={2}
+            placeholder={t('inventory.productForm.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>
+      </FormSection>
+
+      {/* Section 2: Classification */}
+      <FormSection title={t('inventory.productForm.classification')} subtitle={t('inventory.productForm.classificationDesc')}>
+        <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+          {productTypes.map((pt) => {
+            const active = productType === pt.value
+            const descKey = TYPE_DESCRIPTION_KEYS[pt.value]
+            const desc = descKey ? t(descKey) : ''
+            return (
+              <button
+                key={pt.value}
+                onClick={() => setProductType(pt.value as ProductType)}
+                className={`rounded-lg border-2 p-3 text-left transition-all ${
+                  active
+                    ? 'border-primary bg-primary/5'
+                    : 'border-transparent bg-muted/20 hover:bg-muted/40'
+                }`}
+              >
+                <p className={`text-sm font-medium ${active ? 'text-primary' : ''}`}>{pt.label}</p>
+                {desc && <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight">{desc}</p>}
+              </button>
+            )
+          })}
+        </div>
+      </FormSection>
+
+      {/* Section 3: Pricing */}
+      <FormSection title={t('inventory.productForm.pricing')}>
+        <div className="grid gap-4 sm:grid-cols-3">
+          <CurrencyInput
+            label={t('inventory.productForm.costPrice')}
+            value={costPrice}
+            onChange={setCostPrice}
+            symbol={currency.symbol}
+            locale={currency.locale}
+            currencyCode={currency.code}
+          />
+          <CurrencyInput
+            label={t('inventory.productForm.salePrice')}
+            value={salePrice}
+            onChange={setSalePrice}
+            symbol={currency.symbol}
+            locale={currency.locale}
+            currencyCode={currency.code}
+          />
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.margin')}</label>
+            <div className="mt-1 rounded-lg border bg-muted/20 px-3 py-2 text-sm tabular-nums text-right">
+              {margin !== null ? (
+                <span className={Number(margin) >= 0 ? 'text-success' : 'text-destructive'}>
+                  {margin}%
+                </span>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              )}
+            </div>
+          </div>
+        </div>
+      </FormSection>
+
+      {/* Section 4: Stock Levels */}
+      <FormSection title={t('inventory.productForm.stockLevels')} subtitle={t('inventory.productForm.stockLevelsDesc')}>
+        <div className="grid gap-4 sm:grid-cols-2 max-w-md">
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.minQuantity')}</label>
+            <input
+              type="number"
+              min={0}
+              value={minQuantity}
+              onChange={(e) => setMinQuantity(Number(e.target.value) || 0)}
+              placeholder="0"
+              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"
+            />
+            <p className="text-[10px] text-muted-foreground mt-1">{t('inventory.productForm.minQuantityHint')}</p>
+          </div>
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">{t('inventory.productForm.maxQuantity')}</label>
+            <input
+              type="number"
+              min={0}
+              value={maxQuantity}
+              onChange={(e) => setMaxQuantity(Number(e.target.value) || 0)}
+              placeholder={t('inventory.productForm.optional')}
+              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"
+            />
+            <p className="text-[10px] text-muted-foreground mt-1">{t('inventory.productForm.maxQuantityHint')}</p>
+          </div>
+        </div>
+      </FormSection>
+    </div>
+  )
+}

package/src/views/ProductListView.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react'
+import { Package } from 'lucide-react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { ListView } from '@fayz-ai/ui'
+import { useInventoryConfig, useInventoryStore, formatCurrency } from '../InventoryContext'
+import { SubpageHeader } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import type { ProductType, Product } from '../types'
+
+const useColumns = (currency: { code: string; locale: string; symbol: string }, t: (key: string) => string): ColumnDef<Product, any>[] => [
+  {
+    accessorKey: 'name',
+    header: t('inventory.productList.product'),
+    enableSorting: true,
+    cell: ({ row }: any) => (
+      <div>
+        <p className="font-medium">{row.original.name}</p>
+        {row.original.sku && <p className="text-xs text-muted-foreground">{row.original.sku}</p>}
+      </div>
+    ),
+  },
+  {
+    accessorKey: 'productType',
+    header: t('inventory.productList.type'),
+    cell: ({ getValue }: any) => (
+      <span className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium bg-muted text-muted-foreground capitalize">
+        {getValue() as string}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'currentQuantity',
+    header: t('inventory.productList.stock'),
+    enableSorting: true,
+    meta: { align: 'right' },
+    cell: ({ row }: any) => (
+      <span className={`text-right block ${row.original.currentQuantity <= row.original.minQuantity ? 'text-destructive font-medium' : ''}`}>
+        {row.original.currentQuantity}
+      </span>
+    ),
+  },
+  {
+    accessorKey: 'costPrice',
+    header: t('inventory.productList.cost'),
+    meta: { align: 'right' },
+    cell: ({ getValue }: any) => (
+      <span className="text-right block text-muted-foreground">{formatCurrency(getValue() as number, currency)}</span>
+    ),
+  },
+  {
+    id: 'value',
+    header: t('inventory.productList.value'),
+    meta: { align: 'right' },
+    cell: ({ row }: any) => (
+      <span className="text-right block font-medium">
+        {formatCurrency(row.original.currentQuantity * row.original.costPrice, currency)}
+      </span>
+    ),
+  },
+]
+
+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>()
+
+  useEffect(() => {
+    fetchProducts({ productType: typeFilter as ProductType | undefined, search: search || undefined })
+  }, [typeFilter, search])
+
+  const columns = useColumns(currency, t)
+
+  return (
+    <div className="space-y-4">
+      <SubpageHeader title={t('inventory.productList.title')} subtitle={t('inventory.productList.subtitle', { count: String(productsTotal) })} />
+
+      <ListView<Product>
+        columns={columns}
+        data={products}
+        loading={productsLoading}
+        searchPlaceholder={t('inventory.productList.searchPlaceholder')}
+        search={search}
+        onSearchChange={setSearch}
+        searchDebounce={0}
+        tags={productTypes.map((t) => ({ value: t.value, label: t.label }))}
+        activeTag={typeFilter}
+        onTagChange={setTypeFilter}
+        newLabel={t('inventory.productList.newProduct')}
+        onNew={onNew}
+        onRowClick={(row) => onEdit?.(row.id)}
+        emptyIcon={Package}
+        emptyMessage={t('inventory.productList.empty')}
+        emptyActionLabel={onNew ? t('inventory.productList.createFirst') : undefined}
+        onEmptyAction={onNew}
+      />
+    </div>
+  )
+}

package/src/views/RecipeDetailView.tsx

@@ -0,0 +1,192 @@
+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>
+  )
+}