import React, { useState } from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("potluck-organizer-v1"); const { doc: rsvpDoc, merge: mergeRsvp, submit: submitRsvp } = useDocument({ type: "rsvp", name: "", headcount: 1, createdAt: Date.now() }); const { doc: dishDoc, merge: mergeDish, submit: submitDish } = useDocument({ type: "dish", name: "", bringer: "", category: "appetizer", serves: 4, createdAt: Date.now() }); const { docs: rsvps } = useLiveQuery("type", { key: "rsvp" }); const { docs: dishes } = useLiveQuery("type", { key: "dish" }); const { docs: suggestions } = useLiveQuery("type", { key: "suggestion" }); const [tab, setTab] = useState("dishes"); const [isLoading, setIsLoading] = useState(false); const [aiError, setAiError] = useState(""); const totalGuests = rsvps.reduce((sum, r) => sum + (r.headcount || 1), 0); const categories = ["appetizer", "main", "side", "dessert", "drink"]; const categoryCounts = categories.reduce((acc, cat) => { acc[cat] = dishes.filter(d => d.category === cat).length; return acc; }, {}); async function handleAISuggest() { setIsLoading(true); setAiError(""); try { const dishList = dishes.map(d => `${d.name} (${d.category})`).join(", ") || "none yet"; const prompt = `We have a potluck with ${totalGuests} guests. Current dishes: ${dishList}. Categories covered: ${JSON.stringify(categoryCounts)}. Suggest 4 dishes to fill gaps, vary categories, and balance the meal. Be specific and creative.`; const res = await callAI(prompt, { schema: { properties: { suggestions: { type: "array", items: { type: "object", properties: { name: { type: "string" }, category: { type: "string" }, serves: { type: "number" }, note: { type: "string" } } } } } } }); const data = JSON.parse(res); for (const s of data.suggestions) { await database.put({ type: "suggestion", ...s, createdAt: Date.now() }); } } catch (e) { setAiError("AI suggestion failed. Try again."); } finally { setIsLoading(false); } } function claimSuggestion(s) { mergeDish({ name: s.name, category: s.category, serves: s.serves || 4 }); setTab("dishes"); } const catColors = { appetizer: { bar: "bg-[#c2410c]", text: "text-white" }, main: { bar: "bg-[#1d4ed8]", text: "text-white" }, side: { bar: "bg-[#15803d]", text: "text-[#0f172a]" }, dessert: { bar: "bg-[#ca8a04]", text: "text-[#0f172a]" }, drink: { bar: "bg-[#6d28d9]", text: "text-white" }, }; const c = { bg: "bg-[#f5f3ee]", card: "bg-white border-[3px] border-[#0f172a]", shadow: "[box-shadow:4px_4px_0px_#0f172a]", shadowSm: "[box-shadow:3px_3px_0px_#0f172a]", shadowHover: "hover:[box-shadow:6px_6px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5", ink: "text-[#0f172a]", muted: "text-[#6b7280]", red: "bg-[#c2410c]", yellow: "bg-[#ca8a04]", green: "bg-[#15803d]", blue: "bg-[#1d4ed8]", btnPrimary: "bg-[#c2410c] text-white border-[3px] border-[#0f172a] [box-shadow:4px_4px_0px_#0f172a] hover:[box-shadow:6px_6px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none] disabled:opacity-50 disabled:cursor-not-allowed", btnSecondary: "bg-[#ca8a04] text-[#0f172a] border-[3px] border-[#0f172a] [box-shadow:3px_3px_0px_#0f172a] hover:[box-shadow:5px_5px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-0.5 active:translate-y-0.5 active:[box-shadow:none]", btnGhost: "bg-white text-[#0f172a] border-[3px] border-[#0f172a] hover:[box-shadow:3px_3px_0px_#0f172a] hover:-translate-x-0.5 hover:-translate-y-0.5", input: "w-full bg-white border-[3px] border-[#0f172a] rounded-[4px] px-3 py-2 text-[0.85rem] font-[Space_Grotesk] focus:outline-none focus:[box-shadow:4px_4px_0px_#0f172a] focus:-translate-x-0.5 focus:-translate-y-0.5 transition-all duration-150", label: "block text-[0.6rem] uppercase tracking-[0.15em] text-[#6b7280] mb-1 font-[Space_Grotesk]", mono: "font-[JetBrains_Mono]", tabActive: "bg-[#0f172a] text-white border-[3px] border-[#0f172a] [box-shadow:3px_3px_0px_#c2410c]", tabInactive: "bg-white text-[#0f172a] border-[3px] border-[#0f172a] hover:bg-[#ca8a04] transition-colors duration-150", }; const Spinner = () => ( ); return (

{/* NAV */}

{/* HERO */}

BRING THE FEAST

Coordinate dishes, RSVP, and fill every category. No duplicates. No empty tables.

{/* STAT ROW */}

{[ { label: "Guests", val: totalGuests, bar: "bg-[#c2410c]", textColor: "text-white" }, { label: "RSVPs", val: rsvps.length, bar: "bg-[#ca8a04]", textColor: "text-[#0f172a]" }, { label: "Dishes", val: dishes.length, bar: "bg-[#1d4ed8]", textColor: "text-white" }, { label: "Categories", val: Object.values(categoryCounts).filter(v => v > 0).length + "/5", bar: "bg-[#15803d]", textColor: "text-[#0f172a]" }, ].map(s => (

{s.label}

{s.val}

))}

{/* TABS */}

{["dishes", "rsvp", "suggestions"].map(t => ( ))}

{/* DISHES TAB */} {tab === "dishes" && (

{/* Add Dish Form */}

CLAIM A DISH

Dish Name mergeDish({ name: e.target.value })} placeholder="e.g. Caprese Salad" />

Your Name mergeDish({ bringer: e.target.value })} placeholder="e.g. Maria" />

{h}
{d.name}	{d.bringer}	{d.category}	{d.serves}

ADD YOUR RSVP

Your Name mergeRsvp({ name: e.target.value })} placeholder="e.g. Jordan" />

Headcount (incl. yourself) mergeRsvp({ headcount: parseInt(e.target.value) || 1 })} />

{rsvps.length === 0 ? (

No RSVPs yet. Add yours above!

) : (

{["Name", "Headcount", "Added"].map(h => ( ))} {rsvps.map(r => ( ))}

{h}
{r.name}	{r.headcount}	{new Date(r.createdAt).toLocaleDateString()}

)}

)} {/* SUGGESTIONS TAB */} {tab === "suggestions" && (

AI DISH SUGGESTIONS

Generate ideas to fill menu gaps based on current dishes.

{aiError &&

{aiError}

} {suggestions.length === 0 && !isLoading ? (

No suggestions yet. Hit the button above!

) : (

{suggestions.map(s => { const col = catColors[s.category] || catColors.side; return (

{s.category} serves {s.serves || "?"}

{s.name}

{s.note &&

{s.note}

}

); })}

)}

); }