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>
2026-03-04 22:26:17 -07:00
parent 2ac2c4b2d4
commit dc1ad4d0c0
36 changed files with 1892 additions and 144 deletions
--- a/src/app/(app)/bar/page.tsx
+++ b/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}
--- a/src/app/(app)/bartender/page.tsx
+++ b/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>
--- a/src/app/(app)/drinks/[id]/page.tsx
+++ b/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>
--- a/src/app/(app)/recipes/page.tsx
+++ b/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>
+  )
+}