Add recipes, images, AI photo ID, barcode scanning & ingredient matching

- Fuzzy ingredient matching for bar inventory against recipes
- AI photo identification API for bottles/labels (drink + bar context)
- Barcode scanner with photo toggle for My Bar
- Barcode scan + photo ID buttons on Add Drink form
- Auto-pull product images from Open Food Facts barcode lookup
- Recipes section on drink detail pages with bar availability
- Dedicated Recipes page in sidebar navigation
- Bar item image support (schema, upload, display)
- Drink detail image upload component
- MinIO image proxy through Next.js rewrites (fixes broken image links)
- Improved category mapping (energy drinks → Mixers, not Spirits)
- Re-process saved recipe ingredients against current bar inventory

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -40,3 +40,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

docker-compose.yml

@@ -64,6 +64,7 @@ services:
     environment:
       DATABASE_URL: "postgresql://${POSTGRES_USER:-drinktracker}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-drinktracker}"
       MINIO_ENDPOINT: "minio"
+      WATCHPACK_POLLING: "true"
     depends_on:
       db:
         condition: service_healthy

next.config.mjs

@@ -16,6 +16,18 @@ const nextConfig = {
       },
     ],
   },
+  async rewrites() {
+    // Proxy image requests to MinIO so URLs work from any device
+    const minioHost = process.env.MINIO_ENDPOINT || "localhost";
+    const minioPort = process.env.MINIO_PORT || "9000";
+    const minioBucket = process.env.MINIO_BUCKET || "drink-images";
+    return [
+      {
+        source: "/minio-images/:path*",
+        destination: `http://${minioHost}:${minioPort}/${minioBucket}/:path*`,
+      },
+    ];
+  },
   async headers() {
     return [
       {

package-lock.json

@@ -17,6 +17,7 @@
         "bcryptjs": "^3.0.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "html5-qrcode": "^2.3.8",
         "lucide-react": "^0.575.0",
         "next": "14.2.35",
         "next-auth": "^5.0.0-beta.25",
@@ -5359,6 +5360,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html5-qrcode": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.8.tgz",
+      "integrity": "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -18,6 +18,7 @@
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "html5-qrcode": "^2.3.8",
     "lucide-react": "^0.575.0",
     "next": "14.2.35",
     "next-auth": "^5.0.0-beta.25",

prisma/schema.prisma

@@ -279,6 +279,8 @@ model BarItem {
   category  BarItemCategory
   quantity  BarItemQuantity @default(FULL)
   notes     String?         @db.Text
+  barcode   String?
+  imageUrl  String?
   createdAt DateTime        @default(now())
   updatedAt DateTime        @updatedAt
 
@@ -286,6 +288,7 @@ model BarItem {
 
   @@index([userId])
   @@index([userId, category])
+  @@index([userId, barcode])
 }
 
 // ─── Recipes ────────────────────────────────────────────────────

src/app/(app)/bar/page.tsx

@@ -20,7 +20,9 @@ import {
   useDeleteBarItem,
 } from "@/hooks/use-bar"
 import type { BarItem } from "@/hooks/use-bar"
-import { Plus, Wine } from "lucide-react"
+import { BarcodeScanDialog } from "@/components/bar/barcode-scan-dialog"
+import type { BarcodeLookupResult } from "@/hooks/use-barcode-lookup"
+import { Plus, Wine, ScanLine } from "lucide-react"
 import type { BarItemCreate } from "@/lib/validators"
 
 export default function BarPage() {
@@ -65,17 +67,40 @@ const CATEGORY_ORDER = [
 
 function BarContent() {
   const [addDialogOpen, setAddDialogOpen] = useState(false)
+  const [scanDialogOpen, setScanDialogOpen] = useState(false)
   const [editingItem, setEditingItem] = useState<BarItem | null>(null)
+  const [scannedData, setScannedData] = useState<Partial<BarItemCreate> | null>(null)
 
   const { data, isLoading, error } = useBarItems()
   const createBarItem = useCreateBarItem()
   const updateBarItem = useUpdateBarItem()
   const deleteBarItem = useDeleteBarItem()
 
+  function handleScanResult(result: BarcodeLookupResult) {
+    const initial: Partial<BarItemCreate> & { imageUrl?: string } = {
+      barcode: result.barcode,
+    }
+    if (result.name) {
+      initial.name = result.brand
+        ? `${result.brand} ${result.name}`
+        : result.name
+    }
+    if (result.category) {
+      initial.category = result.category as BarItemCreate["category"]
+    }
+    if (result.imageUrl) {
+      initial.imageUrl = result.imageUrl
+    }
+    setScannedData(initial)
+    // Scan dialog closes itself before calling this — just open add form
+    setAddDialogOpen(true)
+  }
+
   function handleCreate(formData: BarItemCreate) {
     createBarItem.mutate(formData, {
       onSuccess: () => {
         setAddDialogOpen(false)
+        setScannedData(null)
       },
     })
   }
@@ -124,11 +149,17 @@ function BarContent() {
                 : "Your bar inventory"}
             </p>
           </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => setScanDialogOpen(true)}>
+              <ScanLine className="h-4 w-4 mr-2" />
+              Scan
+            </Button>
             <Button onClick={() => setAddDialogOpen(true)}>
               <Plus className="h-4 w-4 mr-2" />
               Add Item
             </Button>
           </div>
+        </div>
 
         {isLoading ? (
           <div className="space-y-6">
@@ -180,16 +211,33 @@ function BarContent() {
         )}
       </div>
 
+      {/* Barcode Scan Dialog */}
+      <BarcodeScanDialog
+        open={scanDialogOpen}
+        onOpenChange={setScanDialogOpen}
+        onResult={handleScanResult}
+      />
+
       {/* Add Item Dialog */}
-      <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+      <Dialog
+        open={addDialogOpen}
+        onOpenChange={(open) => {
+          setAddDialogOpen(open)
+          if (!open) setScannedData(null)
+        }}
+      >
         <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-[550px]">
           <DialogHeader>
             <DialogTitle>Add Bar Item</DialogTitle>
             <DialogDescription>
-              Add a spirit, mixer, or other item to your bar inventory.
+              {scannedData
+                ? "Review the scanned product info and make any changes."
+                : "Add a spirit, mixer, or other item to your bar inventory."}
             </DialogDescription>
           </DialogHeader>
           <BarItemForm
+            key={scannedData?.barcode || "manual"}
+            initialData={scannedData || undefined}
             onSubmit={handleCreate}
             isSubmitting={createBarItem.isPending}
             submitLabel="Add Item"
@@ -224,6 +272,8 @@ function BarContent() {
                   category: editingItem.category,
                   quantity: editingItem.quantity,
                   notes: editingItem.notes || undefined,
+                  barcode: editingItem.barcode || undefined,
+                  imageUrl: editingItem.imageUrl || undefined,
                 }}
                 onSubmit={handleUpdate}
                 isSubmitting={updateBarItem.isPending}

src/app/(app)/bartender/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Suspense, useState } from "react"
+import { useSearchParams } from "next/navigation"
 import { Header } from "@/components/layout/header"
 import { Skeleton } from "@/components/ui/skeleton"
 import { RecreateTab } from "@/components/bartender/recreate-tab"
@@ -43,6 +44,8 @@ const TABS: { id: Tab; label: string; icon: typeof Search }[] = [
 ]
 
 function BartenderContent() {
+  const searchParams = useSearchParams()
+  const recreateParam = searchParams.get("recreate")
   const [activeTab, setActiveTab] = useState<Tab>("recreate")
 
   return (
@@ -79,7 +82,7 @@ function BartenderContent() {
         </div>
 
         {/* Tab content */}
-        {activeTab === "recreate" && <RecreateTab />}
+        {activeTab === "recreate" && <RecreateTab initialDrink={recreateParam || undefined} />}
         {activeTab === "suggest" && <SuggestTab />}
         {activeTab === "saved" && <SavedRecipesTab />}
       </div>

src/app/(app)/drinks/[id]/page.tsx

@@ -6,11 +6,14 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
-import { Star, MapPin, Percent, Calendar, ArrowLeft } from "lucide-react"
+import { Star, MapPin, Percent, Calendar, ArrowLeft, GlassWater, BookOpen } from "lucide-react"
 import Link from "next/link"
 import { cn } from "@/lib/utils"
 import { DrinkDetailActions } from "@/components/drinks/drink-detail-actions"
 import { AddToWishlistButton } from "@/components/drinks/add-to-wishlist-button"
+import { DrinkRecipesList } from "@/components/drinks/drink-recipes-list"
+import { DrinkDetailImage } from "@/components/drinks/drink-detail-image"
+import { fuzzyMatchIngredients } from "@/lib/ingredient-matcher"
 
 const TYPE_COLORS: Record<string, string> = {
   BEER: "bg-amber-500/15 text-amber-700 border-amber-500/25",
@@ -44,6 +47,9 @@ export default async function DrinkDetailPage({
       ratings: {
         orderBy: { createdAt: "desc" },
       },
+      recipes: {
+        orderBy: { createdAt: "desc" },
+      },
     },
   })
 
@@ -55,6 +61,24 @@ export default async function DrinkDetailPage({
     notFound()
   }
 
+  // Fetch bar items to re-check recipe ingredient availability
+  const barItems = await prisma.barItem.findMany({
+    where: {
+      userId: session.user.id,
+      quantity: { not: "EMPTY" },
+    },
+    select: { name: true },
+  })
+
+  // Re-process recipe ingredients against current bar
+  const processedRecipes = drink.recipes.map((recipe) => {
+    if (barItems.length > 0 && Array.isArray(recipe.ingredients)) {
+      const ingredients = recipe.ingredients as { name: string; amount: string; available: boolean }[]
+      return { ...recipe, ingredients: fuzzyMatchIngredients(ingredients, barItems) }
+    }
+    return recipe
+  })
+
   const scores = drink.ratings.map((r) => r.score)
   const avgRating =
     scores.length > 0
@@ -75,13 +99,7 @@ export default async function DrinkDetailPage({
         </Link>
 
         {/* Drink Image */}
-        {drink.imageUrl && (
+        <DrinkDetailImage drinkId={drink.id} currentImageUrl={drink.imageUrl} />
-          <img
-            src={drink.imageUrl}
-            alt={drink.name}
-            className="w-full max-h-[400px] object-contain rounded-lg bg-muted"
-          />
-        )}
 
         {/* Main Info Card */}
         <Card>
@@ -179,13 +197,19 @@ export default async function DrinkDetailPage({
 
             <Separator />
 
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-3 flex-wrap">
               <Link href={`/rate/${drink.id}`}>
                 <Button className="w-full sm:w-auto">
                   <Star className="h-4 w-4 mr-2" />
                   Rate This Drink
                 </Button>
               </Link>
+              <Link href={`/bartender?recreate=${encodeURIComponent(drink.name)}`}>
+                <Button variant="outline" className="w-full sm:w-auto">
+                  <GlassWater className="h-4 w-4 mr-2" />
+                  Recreate
+                </Button>
+              </Link>
               <AddToWishlistButton
                 name={drink.name}
                 type={drink.type as "BEER" | "WINE" | "COCKTAIL" | "SPIRIT" | "OTHER"}
@@ -200,6 +224,43 @@ export default async function DrinkDetailPage({
           </CardContent>
         </Card>
 
+        {/* Recipes */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-lg flex items-center gap-2">
+                <BookOpen className="h-5 w-5" />
+                Recipes
+              </CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {processedRecipes.length > 0 ? (
+              <DrinkRecipesList
+                recipes={processedRecipes.map((r) => ({
+                  id: r.id,
+                  title: r.title,
+                  ingredients: r.ingredients as { name: string; amount: string; available: boolean }[],
+                  steps: r.steps as string[],
+                  garnish: r.garnish,
+                  glassware: r.glassware,
+                  notes: r.notes,
+                }))}
+              />
+            ) : (
+              <div className="text-center py-6 text-muted-foreground">
+                <p>No saved recipes for this drink.</p>
+                <Link href={`/bartender?recreate=${encodeURIComponent(drink.name)}`}>
+                  <Button variant="outline" className="mt-3" size="sm">
+                    <GlassWater className="h-4 w-4 mr-2" />
+                    Generate Recipe
+                  </Button>
+                </Link>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
         {/* Rating History */}
         <Card>
           <CardHeader>

src/app/(app)/recipes/page.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Header } from "@/components/layout/header"
+import { SavedRecipesTab } from "@/components/bartender/saved-recipes-tab"
+
+export default function RecipesPage() {
+  return (
+    <div>
+      <Header title="Recipes" />
+      <div className="p-4 md:p-8 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Saved Recipes</h1>
+          <p className="text-muted-foreground">
+            Your collection of saved cocktail recipes.
+          </p>
+        </div>
+        <SavedRecipesTab />
+      </div>
+    </div>
+  )
+}

src/app/api/ai/identify/route.ts

@@ -0,0 +1,116 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { z } from "zod"
+
+const identifySchema = z.object({
+  imageBase64: z.string().min(1),
+  mimeType: z.string().regex(/^image\/(jpeg|png|webp|heic)$/),
+  context: z.enum(["drink", "bar"]),
+})
+
+// Map AI drink types to bar item categories
+function mapTypeToBarCategory(type: string, subType?: string, name?: string): string {
+  const t = type.toUpperCase()
+  const sub = (subType || "").toLowerCase()
+  const n = (name || "").toLowerCase()
+  const allText = `${sub} ${n}`
+
+  // Check name + subType for specific categories first
+  if (allText.includes("bitter")) return "BITTERS"
+
+  if (allText.includes("liqueur") || allText.includes("amaro") || allText.includes("vermouth") ||
+      allText.includes("triple sec") || allText.includes("curaçao") || allText.includes("curacao") ||
+      allText.includes("schnapps") || allText.includes("aperitif") || allText.includes("digestif") ||
+      allText.includes("cordial") || allText.includes("crème de")) {
+    return "LIQUEURS"
+  }
+
+  if (allText.includes("mixer") || allText.includes("soda") || allText.includes("tonic") ||
+      allText.includes("juice") || allText.includes("syrup") || allText.includes("cola") ||
+      allText.includes("ginger") || allText.includes("energy") || allText.includes("water") ||
+      allText.includes("lemonade") || allText.includes("grenadine") || allText.includes("club")) {
+    return "MIXERS"
+  }
+
+  if (allText.includes("garnish") || allText.includes("olive") || allText.includes("cherry") ||
+      allText.includes("mint sprig")) {
+    return "GARNISHES"
+  }
+
+  // Map by drink type
+  if (t === "SPIRIT") return "SPIRITS"
+  if (t === "COCKTAIL") return "SPIRITS"
+  if (t === "BEER" || t === "WINE") return "SPIRITS"
+  if (t === "OTHER") return "MIXERS" // energy drinks, non-alcoholic, etc.
+
+  return "SPIRITS"
+}
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { success: withinLimit } = rateLimit(`ai-identify:${session.user.id}`, 10, 60000)
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = identifySchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json({ error: "Invalid request" }, { status: 400 })
+    }
+
+    const { imageBase64, mimeType, context } = parsed.data
+
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId: session.user.id, isActive: true },
+    })
+
+    if (!apiKeyRecord) {
+      return NextResponse.json(
+        { error: "No AI provider configured. Add an API key in Settings." },
+        { status: 400 }
+      )
+    }
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const result = await provider.extractLabel(imageBase64, mimeType)
+
+    // Build response based on context
+    const response: Record<string, unknown> = {
+      name: result.name,
+      type: result.type,
+      subType: result.subType,
+      brewery: result.brewery,
+      region: result.region,
+      abv: result.abv,
+      description: result.description,
+    }
+
+    if (context === "bar") {
+      // Map to bar category
+      response.category = mapTypeToBarCategory(result.type, result.subType, result.name)
+    }
+
+    return NextResponse.json(response)
+  } catch (error) {
+    console.error("AI identify error:", error)
+    return NextResponse.json(
+      { error: "Failed to identify product. Please try again." },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bar/barcode-lookup/route.ts

@@ -0,0 +1,177 @@
+import { NextResponse } from "next/server"
+import { auth } from "@/lib/auth"
+import { prisma } from "@/lib/prisma"
+import { decrypt } from "@/lib/encryption"
+import { createProvider } from "@/lib/ai/provider-factory"
+import { rateLimit } from "@/lib/rate-limit"
+import { z } from "zod"
+
+const barcodeLookupSchema = z.object({
+  barcode: z.string().min(8).max(20).regex(/^\d+$/, "Invalid barcode format"),
+})
+
+function mapOffCategoryToBarCategory(tags: string[]): string {
+  const joined = (tags || []).join(",").toLowerCase()
+  if (/spirits|whisk|bourbon|vodka|rum|gin|tequila|brandy|cognac|mezcal|scotch/.test(joined)) return "SPIRITS"
+  if (/liqueur|amaretto|kahlua|baileys|triple.sec|schnapps|chartreuse|campari|aperol/.test(joined)) return "LIQUEURS"
+  if (/juice|soda|tonic|cola|syrup|water|mixer|ginger|lemon|lime|cranberry|club/.test(joined)) return "MIXERS"
+  if (/bitter/.test(joined)) return "BITTERS"
+  return "SPIRITS"
+}
+
+function mapOffCategoryToDrinkType(tags: string[]): string | null {
+  const joined = (tags || []).join(",").toLowerCase()
+  if (/beer|ale|lager|stout|porter|pilsner|ipa|wheat.beer|craft.beer/.test(joined)) return "BEER"
+  if (/wine|champagne|prosecco|cava|merlot|cabernet|chardonnay|pinot|rosé|rose/.test(joined)) return "WINE"
+  if (/cocktail/.test(joined)) return "COCKTAIL"
+  if (/spirits|whisk|bourbon|vodka|rum|gin|tequila|brandy|cognac|mezcal|scotch/.test(joined)) return "SPIRIT"
+  return null
+}
+
+async function lookupOpenFoodFacts(barcode: string) {
+  try {
+    const res = await fetch(
+      `https://world.openfoodfacts.org/api/v2/product/${barcode}.json`,
+      { signal: AbortSignal.timeout(8000) }
+    )
+    if (!res.ok) return null
+    const data = await res.json()
+    if (data.status !== 1 || !data.product) return null
+
+    const product = data.product
+    const name = product.product_name || product.product_name_en || null
+    if (!name) return null
+
+    // Extract product image URL
+    const imageUrl = product.image_url || product.image_front_url || product.image_front_small_url || null
+
+    // Extract ABV from alcohol_100g nutrient or nutriments
+    let abv: number | null = null
+    if (product.nutriments?.alcohol_100g) {
+      abv = parseFloat(product.nutriments.alcohol_100g)
+      if (isNaN(abv)) abv = null
+    }
+
+    // Determine drink type from categories
+    const drinkType = mapOffCategoryToDrinkType(product.categories_tags || [])
+
+    return {
+      name,
+      brand: product.brands || null,
+      category: mapOffCategoryToBarCategory(product.categories_tags || []),
+      imageUrl,
+      abv,
+      type: drinkType,
+      subType: null as string | null,
+    }
+  } catch {
+    return null
+  }
+}
+
+async function lookupViaAI(barcode: string, userId: string) {
+  try {
+    const apiKeyRecord = await prisma.userApiKey.findFirst({
+      where: { userId, isActive: true },
+    })
+    if (!apiKeyRecord) return null
+
+    const apiKey = decrypt(apiKeyRecord.encryptedKey, apiKeyRecord.iv)
+    const provider = createProvider(apiKeyRecord.provider, apiKey)
+
+    const systemPrompt = `You are a product identification expert. Given a UPC/EAN barcode number, identify the product — especially alcoholic beverages, spirits, mixers, and bar supplies.
+
+Return ONLY a valid JSON object with these fields:
+- "name" (string): The product name (e.g., "Maker's Mark Bourbon")
+- "brand" (string or null): The brand name
+- "category" (string): One of "SPIRITS", "LIQUEURS", "MIXERS", "BITTERS", "GARNISHES", or "TOOLS"
+
+If you cannot confidently identify the barcode, return: { "name": null }
+Do not include any text before or after the JSON.`
+
+    const response = await provider.sendTextRequest(
+      systemPrompt,
+      `Identify the product with UPC/EAN barcode: ${barcode}`
+    )
+
+    const match = response.match(/\{[\s\S]*\}/)
+    if (!match) return null
+    const parsed = JSON.parse(match[0])
+    if (!parsed.name) return null
+
+    return {
+      name: parsed.name as string,
+      brand: (parsed.brand as string) || null,
+      category: parsed.category || "SPIRITS",
+    }
+  } catch {
+    return null
+  }
+}
+
+export async function POST(request: Request) {
+  const session = await auth()
+  if (!session?.user?.id) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+  }
+
+  const { success: withinLimit } = rateLimit(`barcode-lookup:${session.user.id}`, 10, 60000)
+  if (!withinLimit) {
+    return NextResponse.json(
+      { error: "Too many requests. Please wait a moment." },
+      { status: 429 }
+    )
+  }
+
+  try {
+    const body = await request.json()
+    const parsed = barcodeLookupSchema.safeParse(body)
+    if (!parsed.success) {
+      return NextResponse.json({ error: "Invalid barcode format" }, { status: 400 })
+    }
+
+    const { barcode } = parsed.data
+
+    // Check if user already has this barcode in their bar
+    const existing = await prisma.barItem.findFirst({
+      where: { userId: session.user.id, barcode },
+    })
+    if (existing) {
+      return NextResponse.json({
+        barcode,
+        name: existing.name,
+        brand: null,
+        category: existing.category,
+        source: "existing",
+        existingId: existing.id,
+      })
+    }
+
+    // Try Open Food Facts first
+    const offResult = await lookupOpenFoodFacts(barcode)
+    if (offResult) {
+      return NextResponse.json({ ...offResult, barcode, source: "openfoodfacts" })
+    }
+
+    // AI fallback
+    const aiResult = await lookupViaAI(barcode, session.user.id)
+    if (aiResult) {
+      return NextResponse.json({ ...aiResult, barcode, source: "ai" })
+    }
+
+    // Not found
+    return NextResponse.json({
+      barcode,
+      name: null,
+      brand: null,
+      category: null,
+      source: "not_found",
+    })
+  } catch (error) {
+    console.error("Barcode lookup error:", error)
+    return NextResponse.json(
+      { error: "Failed to look up barcode" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/bartender/recreate/route.ts

@@ -5,6 +5,7 @@ import { decrypt } from "@/lib/encryption"
 import { createProvider } from "@/lib/ai/provider-factory"
 import { rateLimit } from "@/lib/rate-limit"
 import { COCKTAIL_RECIPE_PROMPT, buildBarInventoryString } from "@/lib/ai/prompts"
+import { fuzzyMatchIngredients, recalculateMissingCount } from "@/lib/ingredient-matcher"
 import { z } from "zod"
 
 const recreateSchema = z.object({
@@ -82,6 +83,12 @@ export async function POST(request: Request) {
       }
     }
 
+    // Post-process: fuzzy-match ingredients against bar inventory
+    if (recipe.ingredients && Array.isArray(recipe.ingredients) && barItems.length > 0) {
+      recipe.ingredients = fuzzyMatchIngredients(recipe.ingredients, barItems)
+      recipe.missingCount = recalculateMissingCount(recipe.ingredients)
+    }
+
     return NextResponse.json(recipe)
   } catch (error) {
     console.error("Bartender recreate error:", error)

src/app/api/bartender/suggest/route.ts

@@ -5,6 +5,7 @@ import { decrypt } from "@/lib/encryption"
 import { createProvider } from "@/lib/ai/provider-factory"
 import { rateLimit } from "@/lib/rate-limit"
 import { WHAT_CAN_I_MAKE_PROMPT, buildBarInventoryString } from "@/lib/ai/prompts"
+import { fuzzyMatchIngredients, recalculateMissingCount } from "@/lib/ingredient-matcher"
 
 export async function POST() {
   const session = await auth()
@@ -80,6 +81,21 @@ export async function POST() {
       suggestions = []
     }
 
+    // Post-process: fuzzy-match ingredients against bar inventory and re-sort
+    if (barItems.length > 0) {
+      suggestions = suggestions.map((s: { ingredients?: { name: string; amount: string; available: boolean }[]; missingCount?: number }) => {
+        if (s.ingredients && Array.isArray(s.ingredients)) {
+          s.ingredients = fuzzyMatchIngredients(s.ingredients, barItems)
+          s.missingCount = recalculateMissingCount(s.ingredients)
+        }
+        return s
+      })
+      // Re-sort by missingCount ascending
+      suggestions.sort((a: { missingCount?: number }, b: { missingCount?: number }) =>
+        (a.missingCount ?? 99) - (b.missingCount ?? 99)
+      )
+    }
+
     return NextResponse.json({ suggestions })
   } catch (error) {
     console.error("Bartender suggest error:", error)

src/app/api/recipes/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from "next/server"
 import { auth } from "@/lib/auth"
 import { prisma } from "@/lib/prisma"
 import { recipeCreateSchema } from "@/lib/validators"
+import { fuzzyMatchIngredients, recalculateMissingCount } from "@/lib/ingredient-matcher"
 import type { Prisma } from "@prisma/client"
 
 export async function GET() {
@@ -11,7 +12,8 @@ export async function GET() {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
     }
 
-    const recipes = await prisma.recipe.findMany({
+    const [recipes, barItems] = await Promise.all([
+      prisma.recipe.findMany({
         where: { userId: session.user.id },
         orderBy: { createdAt: "desc" },
         include: {
@@ -19,9 +21,31 @@ export async function GET() {
             select: { name: true, type: true },
           },
         },
+      }),
+      prisma.barItem.findMany({
+        where: {
+          userId: session.user.id,
+          quantity: { not: "EMPTY" },
+        },
+        select: { name: true },
+      }),
+    ])
+
+    // Re-process ingredient availability against current bar inventory
+    const processedRecipes = recipes.map((recipe) => {
+      if (barItems.length > 0 && Array.isArray(recipe.ingredients)) {
+        const ingredients = recipe.ingredients as { name: string; amount: string; available: boolean }[]
+        const matched = fuzzyMatchIngredients(ingredients, barItems)
+        return {
+          ...recipe,
+          ingredients: matched,
+          missingCount: recalculateMissingCount(matched),
+        }
+      }
+      return recipe
     })
 
-    return NextResponse.json({ recipes })
+    return NextResponse.json({ recipes: processedRecipes })
   } catch (error) {
     console.error("GET /api/recipes error:", error)
     return NextResponse.json(

src/components/bar/bar-item-card.tsx

@@ -48,6 +48,15 @@ interface BarItemCardProps {
 export function BarItemCard({ item, onEdit, onDelete }: BarItemCardProps) {
   return (
     <Card className="h-full">
+      {item.imageUrl && (
+        <div className="relative w-full h-32 overflow-hidden rounded-t-lg">
+          <img
+            src={item.imageUrl}
+            alt={item.name}
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
       <CardContent className="p-4 space-y-3">
         <div className="flex items-start justify-between gap-2">
           <h3 className="font-semibold leading-tight line-clamp-2">

src/components/bar/bar-item-form.tsx

@@ -6,6 +6,8 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectOption } from "@/components/ui/select"
+import { DrinkImageUpload } from "@/components/drinks/drink-image-upload"
+import { Barcode } from "lucide-react"
 import type { BarItemCreate } from "@/lib/validators"
 
 const CATEGORIES = [
@@ -25,7 +27,7 @@ const QUANTITIES = [
 ]
 
 interface BarItemFormProps {
-  initialData?: Partial<BarItemCreate>
+  initialData?: Partial<BarItemCreate> & { imageUrl?: string | null }
   onSubmit: (data: BarItemCreate) => void
   isSubmitting?: boolean
   submitLabel?: string
@@ -41,8 +43,13 @@ export function BarItemForm({
   const [category, setCategory] = useState(initialData?.category || "SPIRITS")
   const [quantity, setQuantity] = useState(initialData?.quantity || "FULL")
   const [notes, setNotes] = useState(initialData?.notes || "")
+  const [imageUrl, setImageUrl] = useState<string | null>(
+    initialData?.imageUrl || null
+  )
   const [errors, setErrors] = useState<Record<string, string>>({})
 
+  const barcode = initialData?.barcode
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
 
@@ -65,6 +72,8 @@ export function BarItemForm({
     }
 
     if (notes.trim()) data.notes = notes.trim()
+    if (barcode) data.barcode = barcode
+    if (imageUrl) data.imageUrl = imageUrl
 
     onSubmit(data)
   }
@@ -84,6 +93,12 @@ export function BarItemForm({
         {errors.name && (
           <p className="text-sm text-destructive">{errors.name}</p>
         )}
+        {barcode && (
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Barcode className="h-3 w-3" />
+            <span>UPC: {barcode}</span>
+          </div>
+        )}
       </div>
 
       <div className="grid grid-cols-2 gap-4">
@@ -120,6 +135,11 @@ export function BarItemForm({
         </div>
       </div>
 
+      <div className="space-y-2">
+        <Label>Photo</Label>
+        <DrinkImageUpload imageUrl={imageUrl} onImageChange={setImageUrl} />
+      </div>
+
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <Label htmlFor="bar-item-notes">Notes</Label>

src/components/bar/barcode-scan-dialog.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import { useState, useCallback, useRef, useEffect } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { BarcodeScanner } from "./barcode-scanner"
+import { CameraCapture } from "@/components/scan/camera-capture"
+import { useBarcodeLookup } from "@/hooks/use-barcode-lookup"
+import type { BarcodeLookupResult } from "@/hooks/use-barcode-lookup"
+import { useIdentifyProduct } from "@/hooks/use-identify"
+import { Loader2, AlertCircle, PackageCheck, CheckCircle2, ScanLine, Camera } from "lucide-react"
+
+interface BarcodeScanDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onResult: (result: BarcodeLookupResult) => void
+}
+
+type ScanMode = "barcode" | "photo"
+type Phase = "scanning" | "looking-up" | "found" | "already-exists" | "error"
+
+export function BarcodeScanDialog({
+  open,
+  onOpenChange,
+  onResult,
+}: BarcodeScanDialogProps) {
+  const [scanMode, setScanMode] = useState<ScanMode>("barcode")
+  const [phase, setPhase] = useState<Phase>("scanning")
+  const [scannedBarcode, setScannedBarcode] = useState<string | null>(null)
+  const [existingName, setExistingName] = useState<string | null>(null)
+  const [foundResult, setFoundResult] = useState<BarcodeLookupResult | null>(null)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const lookup = useBarcodeLookup()
+  const identify = useIdentifyProduct()
+
+  const lookupRef = useRef(lookup)
+  lookupRef.current = lookup
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      const t = setTimeout(() => {
+        setPhase("scanning")
+        setScanMode("barcode")
+        setScannedBarcode(null)
+        setExistingName(null)
+        setFoundResult(null)
+        setErrorMessage(null)
+      }, 300)
+      return () => clearTimeout(t)
+    }
+  }, [open])
+
+  function handleAddToBar() {
+    if (!foundResult) return
+    const result = foundResult
+    onOpenChange(false)
+    setTimeout(() => {
+      onResult(result)
+    }, 250)
+  }
+
+  const handleScan = useCallback(async (barcode: string) => {
+    console.log("[scan-dialog] barcode detected:", barcode)
+    setScannedBarcode(barcode)
+    setPhase("looking-up")
+
+    try {
+      const result = await lookupRef.current.mutateAsync(barcode)
+      console.log("[scan-dialog] lookup result:", result)
+
+      if (result.source === "existing") {
+        setExistingName(result.name)
+        setPhase("already-exists")
+        return
+      }
+
+      setFoundResult(result)
+      setPhase("found")
+    } catch (err) {
+      console.error("[scan-dialog] lookup error:", err)
+      setErrorMessage("Could not identify this barcode. You can try again or add the item manually.")
+      setPhase("error")
+    }
+  }, [])
+
+  async function handlePhotoCapture(file: File) {
+    setPhase("looking-up")
+
+    try {
+      // Convert file to base64
+      const buffer = await file.arrayBuffer()
+      const base64 = btoa(
+        new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), "")
+      )
+
+      const result = await identify.mutateAsync({
+        imageBase64: base64,
+        mimeType: file.type || "image/jpeg",
+        context: "bar",
+      })
+
+      // Convert IdentifyResult to BarcodeLookupResult format
+      const lookupResult: BarcodeLookupResult = {
+        name: result.name,
+        brand: result.brewery || null,
+        category: result.category || null,
+        barcode: "",
+        source: "ai" as const,
+      }
+
+      setFoundResult(lookupResult)
+      setPhase("found")
+    } catch (err) {
+      console.error("[scan-dialog] photo identify error:", err)
+      setErrorMessage("Could not identify this product from the photo. Try a clearer image or add the item manually.")
+      setPhase("error")
+    }
+  }
+
+  function switchMode(mode: ScanMode) {
+    setScanMode(mode)
+    setPhase("scanning")
+    setErrorMessage(null)
+  }
+
+  const dialogTitle = scanMode === "barcode" ? "Scan Barcode" : "Identify by Photo"
+  const dialogDesc =
+    phase === "scanning"
+      ? scanMode === "barcode"
+        ? "Point your camera at the barcode on a bottle or can."
+        : "Take a photo of the bottle or label."
+      : phase === "looking-up"
+        ? scanMode === "barcode" ? "Looking up the product..." : "Identifying the product..."
+        : phase === "found"
+          ? "Product identified!"
+          : phase === "already-exists"
+            ? "This item is already in your bar."
+            : "Something went wrong."
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+          <DialogDescription>{dialogDesc}</DialogDescription>
+        </DialogHeader>
+
+        {/* Mode toggle — only show during scanning phase */}
+        {phase === "scanning" && (
+          <div className="flex rounded-lg border overflow-hidden">
+            <button
+              className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+                scanMode === "barcode"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted/50 text-muted-foreground hover:bg-muted"
+              }`}
+              onClick={() => switchMode("barcode")}
+            >
+              <ScanLine className="h-4 w-4" />
+              Scan Barcode
+            </button>
+            <button
+              className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors ${
+                scanMode === "photo"
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted/50 text-muted-foreground hover:bg-muted"
+              }`}
+              onClick={() => switchMode("photo")}
+            >
+              <Camera className="h-4 w-4" />
+              Take Photo
+            </button>
+          </div>
+        )}
+
+        {/* Scanning phase */}
+        {phase === "scanning" && scanMode === "barcode" && (
+          <BarcodeScanner
+            onScan={handleScan}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+
+        {phase === "scanning" && scanMode === "photo" && (
+          <CameraCapture
+            onCapture={handlePhotoCapture}
+            onClose={() => onOpenChange(false)}
+          />
+        )}
+
+        {/* Looking up phase */}
+        {phase === "looking-up" && (
+          <div className="flex flex-col items-center gap-4 py-12">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <div className="text-center">
+              <p className="font-medium">
+                {scanMode === "barcode" ? "Looking up product..." : "AI is identifying the product..."}
+              </p>
+              {scannedBarcode && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  Barcode: {scannedBarcode}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Found phase */}
+        {phase === "found" && foundResult && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <CheckCircle2 className="h-8 w-8 text-green-500" />
+            <div className="text-center">
+              <p className="font-medium">Product found!</p>
+              <p className="text-lg font-semibold mt-1">
+                {foundResult.brand && foundResult.name
+                  ? `${foundResult.brand} ${foundResult.name}`
+                  : foundResult.name || "Unknown product"}
+              </p>
+              {foundResult.category && (
+                <p className="text-sm text-muted-foreground mt-1">
+                  Category: {foundResult.category}
+                </p>
+              )}
+              {scannedBarcode && (
+                <p className="text-xs text-muted-foreground mt-1">
+                  UPC: {scannedBarcode}
+                </p>
+              )}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setFoundResult(null)
+                  setScannedBarcode(null)
+                  setPhase("scanning")
+                }}
+              >
+                Scan Another
+              </Button>
+              <Button onClick={handleAddToBar}>
+                Add to Bar
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Already exists phase */}
+        {phase === "already-exists" && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <PackageCheck className="h-8 w-8 text-primary" />
+            <div className="text-center">
+              <p className="font-medium">Already in your bar!</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                &ldquo;{existingName}&rdquo; is already in your inventory.
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setPhase("scanning")}
+              >
+                Scan Another
+              </Button>
+              <Button onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Error phase */}
+        {phase === "error" && (
+          <div className="flex flex-col items-center gap-4 py-8">
+            <AlertCircle className="h-8 w-8 text-destructive" />
+            <div className="text-center">
+              <p className="font-medium text-destructive">
+                {scanMode === "barcode" ? "Lookup failed" : "Identification failed"}
+              </p>
+              <p className="text-sm text-muted-foreground mt-1">
+                {errorMessage || "Something went wrong. Please try again."}
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setErrorMessage(null)
+                  setPhase("scanning")
+                }}
+              >
+                Try Again
+              </Button>
+              <Button onClick={() => onOpenChange(false)}>
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/bar/barcode-scanner.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Camera, X, AlertCircle } from "lucide-react"
+
+interface BarcodeScannerProps {
+  onScan: (barcode: string) => void
+  onClose: () => void
+}
+
+export function BarcodeScanner({ onScan, onClose }: BarcodeScannerProps) {
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+  const scannerRef = useRef<unknown>(null)
+  const stoppedRef = useRef(false)
+  const onScanRef = useRef(onScan)
+  onScanRef.current = onScan
+  const containerRef = useRef<string>("barcode-reader-" + Math.random().toString(36).slice(2))
+
+  useEffect(() => {
+    let mounted = true
+    stoppedRef.current = false
+
+    async function startScanner() {
+      try {
+        // Dynamic import to avoid SSR issues
+        const { Html5Qrcode } = await import("html5-qrcode")
+
+        if (!mounted) return
+
+        const scanner = new Html5Qrcode(containerRef.current)
+        scannerRef.current = scanner
+
+        await scanner.start(
+          { facingMode: "environment" },
+          {
+            fps: 10,
+            qrbox: { width: 250, height: 100 },
+            aspectRatio: 1.0,
+          },
+          (decodedText) => {
+            // Prevent double-fire
+            if (stoppedRef.current) return
+            stoppedRef.current = true
+
+            // Mark scanner as handled so cleanup doesn't double-stop
+            scannerRef.current = null
+
+            // Stop camera then report result
+            scanner.stop().then(() => {
+              if (mounted) onScanRef.current(decodedText)
+            }).catch(() => {
+              if (mounted) onScanRef.current(decodedText)
+            })
+          },
+          () => {
+            // Per-frame decode failure — ignore
+          }
+        )
+
+        if (mounted) setLoading(false)
+      } catch (err) {
+        if (!mounted) return
+        setLoading(false)
+
+        const isInsecure = typeof window !== "undefined" && window.location.protocol === "http:" && window.location.hostname !== "localhost"
+
+        if (err instanceof Error) {
+          if (err.message.includes("Permission") || err.message.includes("NotAllowedError")) {
+            setError(
+              isInsecure
+                ? "Camera blocked — HTTPS is required. Access this page via https:// (port 3000) to use the scanner."
+                : "Camera permission denied. Please allow camera access and try again."
+            )
+          } else if (err.message.includes("NotFoundError") || err.message.includes("Requested device not found")) {
+            setError("No camera found on this device.")
+          } else if (isInsecure) {
+            setError("Camera requires HTTPS. Access this page via https:// (port 3000) to use the scanner.")
+          } else {
+            setError("Could not start camera. Please try again.")
+          }
+        } else if (isInsecure) {
+          setError("Camera requires HTTPS. Access this page via https:// (port 3000) to use the scanner.")
+        } else {
+          setError("Could not start camera. Please try again.")
+        }
+      }
+    }
+
+    startScanner()
+
+    return () => {
+      mounted = false
+      // Only stop if the decode callback didn't already stop it
+      try {
+        const scanner = scannerRef.current as { stop?: () => Promise<void> } | null
+        if (scanner?.stop) {
+          scanner.stop().catch(() => {})
+        }
+      } catch {
+        // Scanner already stopped or disposed
+      }
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className="relative">
+      {/* Close button */}
+      <Button
+        variant="ghost"
+        size="sm"
+        className="absolute top-2 right-2 z-10 h-8 w-8 p-0 bg-black/50 hover:bg-black/70 text-white rounded-full"
+        onClick={onClose}
+      >
+        <X className="h-4 w-4" />
+      </Button>
+
+      {/* Scanner viewport */}
+      <div className="relative rounded-lg overflow-hidden bg-black min-h-[300px]">
+        <div id={containerRef.current} className="w-full" />
+
+        {loading && !error && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-white">
+            <Camera className="h-8 w-8 animate-pulse" />
+            <p className="text-sm">Starting camera...</p>
+          </div>
+        )}
+      </div>
+
+      {/* Instruction text */}
+      {!error && (
+        <p className="text-center text-sm text-muted-foreground mt-3">
+          Point your camera at a barcode on a bottle or can
+        </p>
+      )}
+
+      {/* Error state */}
+      {error && (
+        <div className="flex flex-col items-center gap-3 py-4">
+          <AlertCircle className="h-8 w-8 text-destructive" />
+          <p className="text-sm text-destructive text-center">{error}</p>
+          <Button variant="outline" size="sm" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/bartender/recreate-tab.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -10,26 +10,37 @@ import { Search, Loader2, Sparkles } from "lucide-react"
 import type { RecipeCardData } from "./recipe-card"
 import type { RecipeCreate } from "@/lib/validators"
 
-export function RecreateTab() {
+interface RecreateTabProps {
-  const [cocktailName, setCocktailName] = useState("")
+  initialDrink?: string
-  const [recipe, setRecipe] = useState<RecipeCardData | null>(null)
+}
+
+export function RecreateTab({ initialDrink }: RecreateTabProps) {
+  const [cocktailName, setCocktailName] = useState(initialDrink || "")
+  const [savedId, setSavedId] = useState<string | null>(null)
+  const autoTriggered = useRef(false)
 
   const recreate = useRecreateRecipe()
   const saveRecipe = useSaveRecipe()
 
+  // Auto-trigger search when coming from drink detail page
+  useEffect(() => {
+    if (initialDrink && !autoTriggered.current) {
+      autoTriggered.current = true
+      recreate.mutate({ cocktailName: initialDrink })
+    }
+  }, [initialDrink]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // The recipe to display — comes from the mutation result
+  const recipe: RecipeCardData | null = recreate.data
+    ? { ...recreate.data, id: savedId || recreate.data.id }
+    : null
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
     const name = cocktailName.trim()
     if (!name) return
-
+    setSavedId(null)
-    recreate.mutate(
+    recreate.mutate({ cocktailName: name })
-      { cocktailName: name },
-      {
-        onSuccess: (data) => {
-          setRecipe(data)
-        },
-      }
-    )
   }
 
   function handleSave(recipeData: RecipeCardData) {
@@ -43,9 +54,7 @@ export function RecreateTab() {
     }
     saveRecipe.mutate(payload, {
       onSuccess: () => {
-        setRecipe((prev) =>
+        setSavedId("saved")
-          prev ? { ...prev, id: "saved" } : prev
-        )
       },
     })
   }
@@ -99,7 +108,7 @@ export function RecreateTab() {
           recipe={recipe}
           onSave={handleSave}
           isSaving={saveRecipe.isPending}
-          saved={recipe.id === "saved" || saveRecipe.isSuccess}
+          saved={savedId === "saved" || saveRecipe.isSuccess}
         />
       )}
     </div>

src/components/drinks/drink-card.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link"
 import { Card, CardContent } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Star } from "lucide-react"
+import { Star, GlassWater } from "lucide-react"
 import { cn } from "@/lib/utils"
 import type { DrinkListItem } from "@/hooks/use-drinks"
 
@@ -84,12 +84,22 @@ export function DrinkCard({ drink }: DrinkCardProps) {
                 </span>
               )}
             </div>
+            <div className="flex items-center gap-2">
+              <Link
+                href={`/bartender?recreate=${encodeURIComponent(drink.name)}`}
+                onClick={(e) => e.stopPropagation()}
+                className="text-muted-foreground hover:text-primary transition-colors"
+                title="Recreate recipe"
+              >
+                <GlassWater className="h-3.5 w-3.5" />
+              </Link>
               {drink.abv !== null && drink.abv !== undefined && (
                 <span className="text-xs text-muted-foreground">
                   {drink.abv}% ABV
                 </span>
               )}
             </div>
+          </div>
         </CardContent>
       </Card>
     </Link>

src/components/drinks/drink-detail-image.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import { useState } from "react"
+import { DrinkImageUpload } from "./drink-image-upload"
+import { Loader2 } from "lucide-react"
+
+interface DrinkDetailImageProps {
+  drinkId: string
+  currentImageUrl: string | null
+}
+
+export function DrinkDetailImage({ drinkId, currentImageUrl }: DrinkDetailImageProps) {
+  const [imageUrl, setImageUrl] = useState(currentImageUrl)
+  const [saving, setSaving] = useState(false)
+
+  async function handleImageChange(newUrl: string | null) {
+    setImageUrl(newUrl)
+    setSaving(true)
+
+    try {
+      await fetch(`/api/drinks/${drinkId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageUrl: newUrl || undefined }),
+      })
+    } catch (err) {
+      console.error("Failed to update drink image:", err)
+      // Revert on error
+      setImageUrl(currentImageUrl)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="relative">
+      {saving && (
+        <div className="absolute top-2 right-2 z-10 bg-background/80 rounded-full p-1">
+          <Loader2 className="h-4 w-4 animate-spin" />
+        </div>
+      )}
+      <DrinkImageUpload imageUrl={imageUrl} onImageChange={handleImageChange} />
+    </div>
+  )
+}

src/components/drinks/drink-form.tsx

@@ -1,12 +1,24 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useCallback, useRef } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectOption } from "@/components/ui/select"
 import { DrinkImageUpload } from "@/components/drinks/drink-image-upload"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog"
+import { BarcodeScanner } from "@/components/bar/barcode-scanner"
+import { CameraCapture } from "@/components/scan/camera-capture"
+import { useBarcodeLookup } from "@/hooks/use-barcode-lookup"
+import { useIdentifyProduct } from "@/hooks/use-identify"
+import { ScanLine, Camera, Loader2, CheckCircle2, AlertCircle } from "lucide-react"
 import type { DrinkCreate } from "@/lib/validators"
 
 const DRINK_TYPES = [
@@ -24,6 +36,8 @@ interface DrinkFormProps {
   submitLabel?: string
 }
 
+type ScanPhase = "scanning" | "looking-up" | "found" | "error"
+
 export function DrinkForm({
   initialData,
   onSubmit,
@@ -44,6 +58,122 @@ export function DrinkForm({
   )
   const [errors, setErrors] = useState<Record<string, string>>({})
 
+  // Scan dialog state
+  const [scanDialogOpen, setScanDialogOpen] = useState(false)
+  const [scanType, setScanType] = useState<"barcode" | "photo">("barcode")
+  const [scanPhase, setScanPhase] = useState<ScanPhase>("scanning")
+  const [scanError, setScanError] = useState<string | null>(null)
+  const [scanResult, setScanResult] = useState<{
+    name: string
+    type?: string
+    subType?: string
+    brewery?: string
+    abv?: number
+    description?: string
+    imageUrl?: string
+  } | null>(null)
+
+  const lookup = useBarcodeLookup()
+  const identify = useIdentifyProduct()
+  const lookupRef = useRef(lookup)
+  lookupRef.current = lookup
+
+  function fillFormFromResult(result: {
+    name?: string
+    type?: string
+    subType?: string
+    brewery?: string
+    region?: string
+    abv?: number
+    description?: string
+    imageUrl?: string
+  }) {
+    if (result.name) setName(result.name)
+    if (result.type) setType(result.type as typeof type)
+    if (result.subType) setSubType(result.subType)
+    if (result.brewery) setBrewery(result.brewery)
+    if (result.region) setRegion(result.region)
+    if (result.abv) setAbv(result.abv.toString())
+    if (result.description) setDescription(result.description)
+    if (result.imageUrl) setImageUrl(result.imageUrl)
+  }
+
+  function openScanDialog(mode: "barcode" | "photo") {
+    setScanType(mode)
+    setScanPhase("scanning")
+    setScanError(null)
+    setScanResult(null)
+    setScanDialogOpen(true)
+  }
+
+  function closeScanDialog() {
+    setScanDialogOpen(false)
+    setTimeout(() => {
+      setScanPhase("scanning")
+      setScanError(null)
+      setScanResult(null)
+    }, 300)
+  }
+
+  const handleBarcodeScan = useCallback(async (barcode: string) => {
+    setScanPhase("looking-up")
+    try {
+      const result = await lookupRef.current.mutateAsync(barcode)
+      const displayName = result.brand && result.name
+        ? `${result.brand} ${result.name}`
+        : result.name || "Unknown product"
+
+      const found: typeof scanResult & {} = {
+        name: displayName,
+        type: result.type || undefined,
+        subType: result.subType || undefined,
+        abv: result.abv || undefined,
+        imageUrl: result.imageUrl || undefined,
+      }
+      setScanResult(found)
+      setScanPhase("found")
+    } catch {
+      setScanError("Could not identify this barcode.")
+      setScanPhase("error")
+    }
+  }, [])
+
+  async function handlePhotoCaptureForDrink(file: File) {
+    setScanPhase("looking-up")
+    try {
+      const buffer = await file.arrayBuffer()
+      const base64 = btoa(
+        new Uint8Array(buffer).reduce((data, byte) => data + String.fromCharCode(byte), "")
+      )
+
+      const result = await identify.mutateAsync({
+        imageBase64: base64,
+        mimeType: file.type || "image/jpeg",
+        context: "drink",
+      })
+
+      setScanResult({
+        name: result.name,
+        type: result.type,
+        subType: result.subType,
+        brewery: result.brewery,
+        abv: result.abv,
+        description: result.description,
+      })
+      setScanPhase("found")
+    } catch {
+      setScanError("Could not identify this product from the photo.")
+      setScanPhase("error")
+    }
+  }
+
+  function handleAcceptScanResult() {
+    if (scanResult) {
+      fillFormFromResult(scanResult)
+    }
+    closeScanDialog()
+  }
+
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
 
@@ -80,7 +210,32 @@ export function DrinkForm({
   }
 
   return (
+    <>
       <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Scan / Photo buttons */}
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => openScanDialog("barcode")}
+          >
+            <ScanLine className="h-4 w-4 mr-2" />
+            Scan Barcode
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="flex-1"
+            onClick={() => openScanDialog("photo")}
+          >
+            <Camera className="h-4 w-4 mr-2" />
+            Snap Photo
+          </Button>
+        </div>
+
         <div className="space-y-2">
           <Label htmlFor="drink-name">
             Name <span className="text-destructive">*</span>
@@ -181,5 +336,106 @@ export function DrinkForm({
           {isSubmitting ? "Saving..." : submitLabel}
         </Button>
       </form>
+
+      {/* Scan/Photo Dialog */}
+      <Dialog open={scanDialogOpen} onOpenChange={(open) => { if (!open) closeScanDialog() }}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>
+              {scanType === "barcode" ? "Scan Barcode" : "Identify by Photo"}
+            </DialogTitle>
+            <DialogDescription>
+              {scanPhase === "scanning"
+                ? scanType === "barcode"
+                  ? "Point your camera at the barcode on a bottle or can."
+                  : "Take a photo of the bottle or label."
+                : scanPhase === "looking-up"
+                  ? scanType === "barcode" ? "Looking up the product..." : "AI is identifying the product..."
+                  : scanPhase === "found"
+                    ? "Product identified!"
+                    : "Something went wrong."}
+            </DialogDescription>
+          </DialogHeader>
+
+          {scanPhase === "scanning" && scanType === "barcode" && (
+            <BarcodeScanner
+              onScan={handleBarcodeScan}
+              onClose={closeScanDialog}
+            />
+          )}
+
+          {scanPhase === "scanning" && scanType === "photo" && (
+            <CameraCapture
+              onCapture={handlePhotoCaptureForDrink}
+              onClose={closeScanDialog}
+            />
+          )}
+
+          {scanPhase === "looking-up" && (
+            <div className="flex flex-col items-center gap-4 py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+              <p className="font-medium">
+                {scanType === "barcode" ? "Looking up product..." : "AI is identifying..."}
+              </p>
+            </div>
+          )}
+
+          {scanPhase === "found" && scanResult && (
+            <div className="flex flex-col items-center gap-4 py-8">
+              <CheckCircle2 className="h-8 w-8 text-green-500" />
+              <div className="text-center">
+                <p className="font-medium">Product found!</p>
+                <p className="text-lg font-semibold mt-1">{scanResult.name}</p>
+                {scanResult.type && (
+                  <p className="text-sm text-muted-foreground mt-1">
+                    Type: {scanResult.type}
+                    {scanResult.subType ? ` / ${scanResult.subType}` : ""}
+                  </p>
+                )}
+                {scanResult.brewery && (
+                  <p className="text-sm text-muted-foreground">
+                    {scanResult.brewery}
+                  </p>
+                )}
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => {
+                  setScanResult(null)
+                  setScanPhase("scanning")
+                }}>
+                  Try Again
+                </Button>
+                <Button onClick={handleAcceptScanResult}>
+                  Fill Form
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {scanPhase === "error" && (
+            <div className="flex flex-col items-center gap-4 py-8">
+              <AlertCircle className="h-8 w-8 text-destructive" />
+              <div className="text-center">
+                <p className="font-medium text-destructive">Identification failed</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {scanError || "Something went wrong. Please try again."}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => {
+                  setScanError(null)
+                  setScanPhase("scanning")
+                }}>
+                  Try Again
+                </Button>
+                <Button onClick={closeScanDialog}>
+                  Close
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }

src/components/drinks/drink-recipes-list.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { RecipeCard } from "@/components/bartender/recipe-card"
+import type { RecipeCardData } from "@/components/bartender/recipe-card"
+
+interface DrinkRecipesListProps {
+  recipes: RecipeCardData[]
+}
+
+export function DrinkRecipesList({ recipes }: DrinkRecipesListProps) {
+  return (
+    <div className="space-y-4">
+      {recipes.map((recipe) => (
+        <RecipeCard
+          key={recipe.id}
+          recipe={recipe}
+          saved
+        />
+      ))}
+    </div>
+  )
+}

src/components/layout/bottom-nav.tsx

@@ -20,7 +20,7 @@ export function BottomNav() {
     <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-card border-t safe-area-bottom">
       <div className="flex items-center justify-around h-16">
         {primaryItems.map((item) => {
-          const isActive = pathname.startsWith(item.href)
+          const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
           return (
             <Link
               key={item.href}

src/components/layout/history-section.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useQuery } from "@tanstack/react-query"
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Search,
+  Camera,
+  Wine,
+  Star,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface RecentSearch {
+  id: string
+  query: string
+  resultCount: number
+  createdAt: string
+}
+
+interface RecentScan {
+  id: string
+  status: string
+  itemCount: number
+  createdAt: string
+}
+
+interface RecentDrink {
+  id: string
+  name: string
+  type: string
+  avgRating: number | null
+  createdAt: string
+}
+
+interface HistoryData {
+  searches: RecentSearch[]
+  scans: RecentScan[]
+  drinks: RecentDrink[]
+}
+
+function useRecentHistory() {
+  return useQuery<HistoryData>({
+    queryKey: ["recent-history"],
+    queryFn: async () => {
+      const [searchRes, scanRes, drinkRes] = await Promise.all([
+        fetch("/api/ai/search/history").then((r) =>
+          r.ok ? r.json() : { searches: [] }
+        ),
+        fetch("/api/scan?limit=5&page=1").then((r) =>
+          r.ok ? r.json() : { scans: [] }
+        ),
+        fetch("/api/drinks?sort=recent&limit=5").then((r) =>
+          r.ok ? r.json() : { drinks: [] }
+        ),
+      ])
+
+      return {
+        searches: (searchRes.searches || []).slice(0, 5).map(
+          (s: { id: string; query: string; results?: { drinks?: unknown[] }; createdAt: string }) => ({
+            id: s.id,
+            query: s.query,
+            resultCount: s.results?.drinks?.length || 0,
+            createdAt: s.createdAt,
+          })
+        ),
+        scans: (scanRes.scans || []).slice(0, 5).map(
+          (s: { id: string; status: string; items?: unknown[]; createdAt: string }) => ({
+            id: s.id,
+            status: s.status,
+            itemCount: s.items?.length || 0,
+            createdAt: s.createdAt,
+          })
+        ),
+        drinks: (drinkRes.drinks || []).slice(0, 5).map(
+          (d: { id: string; name: string; type: string; avgRating: number | null; createdAt: string }) => ({
+            id: d.id,
+            name: d.name,
+            type: d.type,
+            avgRating: d.avgRating,
+            createdAt: d.createdAt,
+          })
+        ),
+      }
+    },
+    staleTime: 30 * 1000, // 30s
+    refetchOnWindowFocus: false,
+  })
+}
+
+function timeAgo(dateStr: string): string {
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diff = now - then
+
+  const mins = Math.floor(diff / 60000)
+  if (mins < 1) return "just now"
+  if (mins < 60) return `${mins}m ago`
+
+  const hours = Math.floor(mins / 60)
+  if (hours < 24) return `${hours}h ago`
+
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}d ago`
+
+  const weeks = Math.floor(days / 7)
+  if (weeks < 5) return `${weeks}w ago`
+
+  const months = Math.floor(days / 30)
+  return `${months}mo ago`
+}
+
+function CollapsibleSection({
+  title,
+  icon: Icon,
+  children,
+  count,
+  defaultOpen = false,
+}: {
+  title: string
+  icon: React.ComponentType<{ className?: string }>
+  children: React.ReactNode
+  count: number
+  defaultOpen?: boolean
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  if (count === 0) return null
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 w-full px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+      >
+        {open ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <Icon className="h-3.5 w-3.5" />
+        <span>{title}</span>
+        <span className="ml-auto text-[10px] opacity-60">{count}</span>
+      </button>
+      {open && <div className="space-y-0.5 mt-0.5">{children}</div>}
+    </div>
+  )
+}
+
+export function HistorySection() {
+  const { data, isLoading } = useRecentHistory()
+
+  if (isLoading || !data) return null
+
+  const hasAny =
+    data.searches.length > 0 ||
+    data.scans.length > 0 ||
+    data.drinks.length > 0
+
+  if (!hasAny) return null
+
+  return (
+    <div className="border-t px-2 py-3 space-y-1">
+      <div className="flex items-center gap-1.5 px-3 pb-1">
+        <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+          Recent
+        </span>
+      </div>
+
+      <CollapsibleSection
+        title="Searches"
+        icon={Search}
+        count={data.searches.length}
+        defaultOpen
+      >
+        {data.searches.map((s) => (
+          <Link
+            key={s.id}
+            href="/drinks"
+            className="flex items-center gap-2 px-3 py-1 mx-1 rounded text-xs hover:bg-accent transition-colors group"
+          >
+            <span className="truncate flex-1 text-muted-foreground group-hover:text-foreground">
+              {s.query}
+            </span>
+            <span className="text-[10px] text-muted-foreground/60 shrink-0">
+              {timeAgo(s.createdAt)}
+            </span>
+          </Link>
+        ))}
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Scans"
+        icon={Camera}
+        count={data.scans.length}
+      >
+        {data.scans.map((s) => (
+          <Link
+            key={s.id}
+            href={`/scan/${s.id}`}
+            className="flex items-center gap-2 px-3 py-1 mx-1 rounded text-xs hover:bg-accent transition-colors group"
+          >
+            <span
+              className={cn(
+                "h-1.5 w-1.5 rounded-full shrink-0",
+                s.status === "COMPLETED"
+                  ? "bg-green-500"
+                  : s.status === "FAILED"
+                  ? "bg-red-500"
+                  : "bg-yellow-500"
+              )}
+            />
+            <span className="truncate flex-1 text-muted-foreground group-hover:text-foreground">
+              {s.itemCount} items
+            </span>
+            <span className="text-[10px] text-muted-foreground/60 shrink-0">
+              {timeAgo(s.createdAt)}
+            </span>
+          </Link>
+        ))}
+      </CollapsibleSection>
+
+      <CollapsibleSection
+        title="Drinks"
+        icon={Wine}
+        count={data.drinks.length}
+      >
+        {data.drinks.map((d) => (
+          <Link
+            key={d.id}
+            href={`/drinks/${d.id}`}
+            className="flex items-center gap-2 px-3 py-1 mx-1 rounded text-xs hover:bg-accent transition-colors group"
+          >
+            <span className="truncate flex-1 text-muted-foreground group-hover:text-foreground">
+              {d.name}
+            </span>
+            {d.avgRating !== null && (
+              <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground/60 shrink-0">
+                <Star className="h-2.5 w-2.5 fill-primary text-primary" />
+                {d.avgRating.toFixed(1)}
+              </span>
+            )}
+          </Link>
+        ))}
+      </CollapsibleSection>
+    </div>
+  )
+}

src/components/layout/more-menu.tsx

@@ -10,11 +10,13 @@ import {
   Settings,
   MoreHorizontal,
   X,
+  BookOpen,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 const moreItems = [
   { href: "/scan", label: "Scan Menu", icon: Camera },
+  { href: "/recipes", label: "Recipes", icon: BookOpen },
   { href: "/recommend", label: "For You", icon: Sparkles },
   { href: "/wishlist", label: "Try Later", icon: Bookmark },
   { href: "/settings", label: "Settings", icon: Settings },
@@ -25,7 +27,7 @@ export function MoreMenu() {
   const pathname = usePathname()
 
   const isActiveInMore = moreItems.some((item) =>
-    pathname.startsWith(item.href)
+    pathname === item.href || pathname.startsWith(item.href + "/")
   )
 
   return (
@@ -56,7 +58,7 @@ export function MoreMenu() {
           {/* Menu */}
           <div className="absolute bottom-full right-0 mb-2 z-50 bg-card border rounded-lg shadow-lg p-2 min-w-[160px]">
             {moreItems.map((item) => {
-              const isActive = pathname.startsWith(item.href)
+              const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
               return (
                 <Link
                   key={item.href}

src/components/layout/sidebar.tsx

@@ -14,9 +14,11 @@ import {
   FlaskConical,
   GlassWater,
   Sparkles,
+  BookOpen,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { HistorySection } from "./history-section"
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
@@ -24,6 +26,7 @@ const navItems = [
   { href: "/drinks", label: "My Drinks", icon: Wine },
   { href: "/bar", label: "My Bar", icon: FlaskConical },
   { href: "/bartender", label: "Bartender", icon: GlassWater },
+  { href: "/recipes", label: "Recipes", icon: BookOpen },
   { href: "/recommend", label: "Recommend", icon: Sparkles },
   { href: "/wishlist", label: "Try Later", icon: Bookmark },
   { href: "/settings", label: "Settings", icon: Settings },
@@ -43,7 +46,7 @@ export function Sidebar() {
 
         <nav className="flex-1 px-2 space-y-1">
           {navItems.map((item) => {
-            const isActive = pathname.startsWith(item.href)
+            const isActive = pathname === item.href || pathname.startsWith(item.href + "/")
             return (
               <Link
                 key={item.href}
@@ -62,6 +65,8 @@ export function Sidebar() {
           })}
         </nav>
 
+        <HistorySection />
+
         <div className="p-4 border-t">
           {session?.user && (
             <div className="flex items-center gap-3 mb-3">

src/hooks/use-bar.ts

@@ -10,6 +10,8 @@ export interface BarItem {
   category: "SPIRITS" | "LIQUEURS" | "MIXERS" | "BITTERS" | "GARNISHES" | "TOOLS"
   quantity: "FULL" | "HALF" | "LOW" | "EMPTY"
   notes: string | null
+  barcode: string | null
+  imageUrl: string | null
   createdAt: string
   updatedAt: string
 }

src/hooks/use-barcode-lookup.ts

@@ -0,0 +1,33 @@
+"use client"
+
+import { useMutation } from "@tanstack/react-query"
+
+export interface BarcodeLookupResult {
+  barcode: string
+  name: string | null
+  brand: string | null
+  category: string | null
+  source: "openfoodfacts" | "ai" | "existing" | "not_found"
+  existingId?: string
+  imageUrl?: string | null
+  type?: string | null
+  abv?: number | null
+  subType?: string | null
+}
+
+export function useBarcodeLookup() {
+  return useMutation<BarcodeLookupResult, Error, string>({
+    mutationFn: async (barcode: string) => {
+      const res = await fetch("/api/bar/barcode-lookup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ barcode }),
+      })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}))
+        throw new Error(body.error || "Lookup failed")
+      }
+      return res.json()
+    },
+  })
+}

src/hooks/use-identify.ts

@@ -0,0 +1,39 @@
+import { useMutation } from "@tanstack/react-query"
+
+export interface IdentifyResult {
+  name: string
+  type: "BEER" | "WINE" | "COCKTAIL" | "SPIRIT" | "OTHER"
+  subType?: string
+  brewery?: string
+  region?: string
+  abv?: number
+  description?: string
+  category?: string // Only for context="bar"
+}
+
+interface IdentifyRequest {
+  imageBase64: string
+  mimeType: string
+  context: "drink" | "bar"
+}
+
+async function identifyProduct(data: IdentifyRequest): Promise<IdentifyResult> {
+  const res = await fetch("/api/ai/identify", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  })
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: "Unknown error" }))
+    throw new Error(err.error || "Failed to identify product")
+  }
+
+  return res.json()
+}
+
+export function useIdentifyProduct() {
+  return useMutation({
+    mutationFn: identifyProduct,
+  })
+}

src/lib/ai/prompts.ts

@@ -183,7 +183,14 @@ Create a recipe for the requested cocktail. Return a valid JSON object:
 - "glassware" (string, optional): Recommended glass
 - "notes" (string, optional): Tips, variations, or history
 
-Mark ingredients available:true only if matching item exists in bar inventory. Do not include text before or after the JSON.`
+Mark ingredients available:true if a matching item exists in bar inventory.
+When checking availability, match flexibly:
+- Ignore brand names — "Angostura Aromatic Bitters" matches "Angostura bitters" or just "bitters"
+- Match the core ingredient identity — "simple syrup" matches "Simple Syrup", "bourbon" matches "Maker's Mark Bourbon"
+- If the bar inventory lists a specific brand/product that IS the ingredient type, mark it available
+- Be generous — if the user clearly has something that serves the same purpose, mark it available
+
+Do not include text before or after the JSON.`
 
 export const WHAT_CAN_I_MAKE_PROMPT = `You are an expert bartender. Based on the user's bar inventory, suggest cocktails they can make.
 
@@ -201,7 +208,14 @@ Return a valid JSON array of objects:
 - "glassware" (string, optional)
 - "missingCount" (number): How many ingredients missing (0 = can make now)
 
-Sort by missingCount ascending. Return up to 10. Do not include text before or after the JSON.`
+Sort by missingCount ascending. Return up to 10.
+When checking availability, match flexibly:
+- Ignore brand names — "Angostura Aromatic Bitters" matches "Angostura bitters" or just "bitters"
+- Match the core ingredient identity — "simple syrup" matches "Simple Syrup", "bourbon" matches "Maker's Mark Bourbon"
+- If the bar inventory lists a specific brand/product that IS the ingredient type, mark it available
+- Be generous — if the user clearly has something that serves the same purpose, mark it available
+
+Do not include text before or after the JSON.`
 
 export function buildBarInventoryString(items: { name: string; category: string; quantity: string }[]): string {
   const byCategory: Record<string, string[]> = {}

src/lib/ingredient-matcher.ts

@@ -0,0 +1,68 @@
+/**
+ * Post-process AI-generated recipe ingredients to fix incorrect
+ * available:false flags using fuzzy string matching against bar inventory.
+ */
+
+interface Ingredient {
+  name: string
+  amount: string
+  available: boolean
+}
+
+interface BarItemForMatching {
+  name: string
+}
+
+// Common words to ignore during matching
+const STOP_WORDS = new Set([
+  "of", "or", "and", "the", "a", "an", "to", "for", "in", "on",
+  "fresh", "large", "small", "whole", "crushed", "muddled",
+  "oz", "ml", "cl", "dash", "dashes", "splash", "tsp", "tbsp",
+  "cup", "part", "parts", "slice", "slices", "piece", "pieces",
+  "cube", "cubes", "drop", "drops", "sprig", "sprigs", "leaf", "leaves",
+])
+
+function getSignificantWords(text: string): string[] {
+  return text
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((w) => w.length > 2 && !STOP_WORDS.has(w))
+}
+
+export function fuzzyMatchIngredients(
+  ingredients: Ingredient[],
+  barItems: BarItemForMatching[]
+): Ingredient[] {
+  if (barItems.length === 0) return ingredients
+
+  const barItemNames = barItems.map((item) => item.name.toLowerCase())
+
+  return ingredients.map((ingredient) => {
+    if (ingredient.available) return ingredient
+
+    const ingName = ingredient.name.toLowerCase()
+
+    const matched = barItemNames.some((barName) => {
+      // Direct substring match in either direction
+      if (barName.includes(ingName)) return true
+      if (ingName.includes(barName)) return true
+
+      // Word-level: all significant words of the ingredient appear
+      // somewhere across bar item names
+      const ingWords = getSignificantWords(ingName)
+      if (ingWords.length > 0) {
+        return ingWords.every((word) =>
+          barItemNames.some((bn) => bn.includes(word))
+        )
+      }
+
+      return false
+    })
+
+    return matched ? { ...ingredient, available: true } : ingredient
+  })
+}
+
+export function recalculateMissingCount(ingredients: Ingredient[]): number {
+  return ingredients.filter((i) => !i.available).length
+}

src/lib/s3.ts

@@ -31,9 +31,8 @@ export async function uploadImage(
     })
   )
 
-  const useSSL = process.env.MINIO_USE_SSL === "true"
+  // Return relative URL through Next.js proxy — works from any device
-  const protocol = useSSL ? "https" : "http"
+  return `/minio-images/${key}`
-  return `${protocol}://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${BUCKET}/${key}`
 }
 
 export async function getImage(key: string) {
@@ -56,7 +55,6 @@ export async function deleteImage(key: string) {
 }
 
 export function getImageUrl(key: string): string {
-  const useSSL = process.env.MINIO_USE_SSL === "true"
+  // Return relative URL through Next.js proxy — works from any device
-  const protocol = useSSL ? "https" : "http"
+  return `/minio-images/${key}`
-  return `${protocol}://${process.env.MINIO_ENDPOINT}:${process.env.MINIO_PORT}/${BUCKET}/${key}`
 }

src/lib/validators.ts

@@ -77,6 +77,8 @@ export const barItemCreateSchema = z.object({
   category: z.enum(["SPIRITS", "LIQUEURS", "MIXERS", "BITTERS", "GARNISHES", "TOOLS"]),
   quantity: z.enum(["FULL", "HALF", "LOW", "EMPTY"]).default("FULL"),
   notes: z.string().max(2000).optional(),
+  barcode: z.string().max(50).optional(),
+  imageUrl: z.string().url().optional().or(z.literal("")),
 })
 
 export const barItemUpdateSchema = barItemCreateSchema.partial()

src/middleware.ts

@@ -8,5 +8,6 @@ export const config = {
     "/rate/:path*",
     "/settings/:path*",
     "/wishlist/:path*",
+    "/recipes/:path*",
   ],
 }