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>

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,10 +149,16 @@ function BarContent() {
                 : "Your bar inventory"}
             </p>
           </div>
-          <Button onClick={() => setAddDialogOpen(true)}>
-            <Plus className="h-4 w-4 mr-2" />
-            Add Item
-          </Button>
+          <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 ? (
@@ -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 && (
-          <img
-            src={drink.imageUrl}
-            alt={drink.name}
-            className="w-full max-h-[400px] object-contain rounded-lg bg-muted"
-          />
-        )}
+        <DrinkDetailImage drinkId={drink.id} currentImageUrl={drink.imageUrl} />
 
         {/* 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,17 +12,40 @@ export async function GET() {
       return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
     }
 
-    const recipes = await prisma.recipe.findMany({
-      where: { userId: session.user.id },
-      orderBy: { createdAt: "desc" },
-      include: {
-        sourceDrink: {
-          select: { name: true, type: true },
+    const [recipes, barItems] = await Promise.all([
+      prisma.recipe.findMany({
+        where: { userId: session.user.id },
+        orderBy: { createdAt: "desc" },
+        include: {
+          sourceDrink: {
+            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(