Add My Bar, Bartender, Recommend features + drink images
- Drink Images: upload/display photos of bottles/cans on drink cards and detail pages - My Bar: inventory tracker for spirits, liqueurs, mixers, bitters, garnishes, tools - Bartender: AI-powered cocktail recipe generation, "what can I make" suggestions, saved recipes. Cross-references bar inventory for ingredient availability. - Recommend: AI flavor profile analysis, personalized drink recommendations, "find similar" drinks based on highly-rated favorites - Navigation: desktop sidebar with all 8 routes, mobile bottom nav with 4 primary items + "More" popup menu - New Prisma models: BarItem, Recipe, FlavorProfile - Backup/restore updated to include bar items Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
JP Scott
70
src/components/bar/bar-category-group.tsx
Normal file
70
src/components/bar/bar-category-group.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
Wine,
|
||||
Droplets,
|
||||
GlassWater,
|
||||
FlaskConical,
|
||||
Flower2,
|
||||
Wrench,
|
||||
} from "lucide-react"
|
||||
import { BarItemCard } from "@/components/bar/bar-item-card"
|
||||
import type { BarItem } from "@/hooks/use-bar"
|
||||
|
||||
const CATEGORY_ICONS: Record<string, React.ElementType> = {
|
||||
SPIRITS: Wine,
|
||||
LIQUEURS: Droplets,
|
||||
MIXERS: GlassWater,
|
||||
BITTERS: FlaskConical,
|
||||
GARNISHES: Flower2,
|
||||
TOOLS: Wrench,
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
SPIRITS: "Spirits",
|
||||
LIQUEURS: "Liqueurs",
|
||||
MIXERS: "Mixers",
|
||||
BITTERS: "Bitters",
|
||||
GARNISHES: "Garnishes",
|
||||
TOOLS: "Tools",
|
||||
}
|
||||
|
||||
interface BarCategoryGroupProps {
|
||||
category: string
|
||||
items: BarItem[]
|
||||
onEdit: (item: BarItem) => void
|
||||
onDelete: (item: BarItem) => void
|
||||
}
|
||||
|
||||
export function BarCategoryGroup({
|
||||
category,
|
||||
items,
|
||||
onEdit,
|
||||
onDelete,
|
||||
}: BarCategoryGroupProps) {
|
||||
const Icon = CATEGORY_ICONS[category] || Wine
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon className="h-5 w-5 text-muted-foreground" />
|
||||
<h2 className="text-lg font-semibold">
|
||||
{CATEGORY_LABELS[category] || category}
|
||||
</h2>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
({items.length})
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
{items.map((item) => (
|
||||
<BarItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
onEdit={onEdit}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
105
src/components/bar/bar-item-card.tsx
Normal file
105
src/components/bar/bar-item-card.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client"
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Pencil, Trash2 } from "lucide-react"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { BarItem } from "@/hooks/use-bar"
|
||||
|
||||
const CATEGORY_COLORS: Record<string, string> = {
|
||||
SPIRITS: "bg-amber-500/15 text-amber-700 border-amber-500/25",
|
||||
LIQUEURS: "bg-purple-500/15 text-purple-700 border-purple-500/25",
|
||||
MIXERS: "bg-sky-500/15 text-sky-700 border-sky-500/25",
|
||||
BITTERS: "bg-orange-500/15 text-orange-700 border-orange-500/25",
|
||||
GARNISHES: "bg-green-500/15 text-green-700 border-green-500/25",
|
||||
TOOLS: "bg-slate-500/15 text-slate-700 border-slate-500/25",
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
SPIRITS: "Spirits",
|
||||
LIQUEURS: "Liqueurs",
|
||||
MIXERS: "Mixers",
|
||||
BITTERS: "Bitters",
|
||||
GARNISHES: "Garnishes",
|
||||
TOOLS: "Tools",
|
||||
}
|
||||
|
||||
const QUANTITY_COLORS: Record<string, string> = {
|
||||
FULL: "bg-green-500/15 text-green-700 border-green-500/25",
|
||||
HALF: "bg-yellow-500/15 text-yellow-700 border-yellow-500/25",
|
||||
LOW: "bg-orange-500/15 text-orange-700 border-orange-500/25",
|
||||
EMPTY: "bg-red-500/15 text-red-700 border-red-500/25",
|
||||
}
|
||||
|
||||
const QUANTITY_LABELS: Record<string, string> = {
|
||||
FULL: "Full",
|
||||
HALF: "Half",
|
||||
LOW: "Low",
|
||||
EMPTY: "Empty",
|
||||
}
|
||||
|
||||
interface BarItemCardProps {
|
||||
item: BarItem
|
||||
onEdit: (item: BarItem) => void
|
||||
onDelete: (item: BarItem) => void
|
||||
}
|
||||
|
||||
export function BarItemCard({ item, onEdit, onDelete }: BarItemCardProps) {
|
||||
return (
|
||||
<Card className="h-full">
|
||||
<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">
|
||||
{item.name}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => onEdit(item)}
|
||||
>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
<span className="sr-only">Edit</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||
onClick={() => onDelete(item)}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
<span className="sr-only">Delete</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge
|
||||
className={cn(
|
||||
"text-[11px]",
|
||||
CATEGORY_COLORS[item.category] || CATEGORY_COLORS.SPIRITS
|
||||
)}
|
||||
>
|
||||
{CATEGORY_LABELS[item.category] || item.category}
|
||||
</Badge>
|
||||
<Badge
|
||||
className={cn(
|
||||
"text-[11px]",
|
||||
QUANTITY_COLORS[item.quantity] || QUANTITY_COLORS.FULL
|
||||
)}
|
||||
>
|
||||
{QUANTITY_LABELS[item.quantity] || item.quantity}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{item.notes && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">
|
||||
{item.notes}
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
144
src/components/bar/bar-item-form.tsx
Normal file
144
src/components/bar/bar-item-form.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
"use client"
|
||||
|
||||
import { useState } 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 type { BarItemCreate } from "@/lib/validators"
|
||||
|
||||
const CATEGORIES = [
|
||||
{ value: "SPIRITS", label: "Spirits" },
|
||||
{ value: "LIQUEURS", label: "Liqueurs" },
|
||||
{ value: "MIXERS", label: "Mixers" },
|
||||
{ value: "BITTERS", label: "Bitters" },
|
||||
{ value: "GARNISHES", label: "Garnishes" },
|
||||
{ value: "TOOLS", label: "Tools" },
|
||||
]
|
||||
|
||||
const QUANTITIES = [
|
||||
{ value: "FULL", label: "Full" },
|
||||
{ value: "HALF", label: "Half" },
|
||||
{ value: "LOW", label: "Low" },
|
||||
{ value: "EMPTY", label: "Empty" },
|
||||
]
|
||||
|
||||
interface BarItemFormProps {
|
||||
initialData?: Partial<BarItemCreate>
|
||||
onSubmit: (data: BarItemCreate) => void
|
||||
isSubmitting?: boolean
|
||||
submitLabel?: string
|
||||
}
|
||||
|
||||
export function BarItemForm({
|
||||
initialData,
|
||||
onSubmit,
|
||||
isSubmitting = false,
|
||||
submitLabel = "Save Item",
|
||||
}: BarItemFormProps) {
|
||||
const [name, setName] = useState(initialData?.name || "")
|
||||
const [category, setCategory] = useState(initialData?.category || "SPIRITS")
|
||||
const [quantity, setQuantity] = useState(initialData?.quantity || "FULL")
|
||||
const [notes, setNotes] = useState(initialData?.notes || "")
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
|
||||
const newErrors: Record<string, string> = {}
|
||||
if (!name.trim()) {
|
||||
newErrors.name = "Name is required"
|
||||
}
|
||||
|
||||
if (Object.keys(newErrors).length > 0) {
|
||||
setErrors(newErrors)
|
||||
return
|
||||
}
|
||||
|
||||
setErrors({})
|
||||
|
||||
const data: BarItemCreate = {
|
||||
name: name.trim(),
|
||||
category: category as BarItemCreate["category"],
|
||||
quantity: quantity as BarItemCreate["quantity"],
|
||||
}
|
||||
|
||||
if (notes.trim()) data.notes = notes.trim()
|
||||
|
||||
onSubmit(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bar-item-name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="bar-item-name"
|
||||
placeholder="e.g., Maker's Mark Bourbon"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm text-destructive">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bar-item-category">
|
||||
Category <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
id="bar-item-category"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value as typeof category)}
|
||||
>
|
||||
{CATEGORIES.map((c) => (
|
||||
<SelectOption key={c.value} value={c.value}>
|
||||
{c.label}
|
||||
</SelectOption>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bar-item-quantity">Quantity</Label>
|
||||
<Select
|
||||
id="bar-item-quantity"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(e.target.value as typeof quantity)}
|
||||
>
|
||||
{QUANTITIES.map((q) => (
|
||||
<SelectOption key={q.value} value={q.value}>
|
||||
{q.label}
|
||||
</SelectOption>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="bar-item-notes">Notes</Label>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{notes.length}/2000
|
||||
</span>
|
||||
</div>
|
||||
<Textarea
|
||||
id="bar-item-notes"
|
||||
placeholder="Brand details, tasting notes, purchase info..."
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value.slice(0, 2000))}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : submitLabel}
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user