import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" export default function App() { const { viewer, can } = useViewer(); const { useDocument, useLiveQuery, database } = useFireproof("gift-ledger"); const { doc, merge, submit } = useDocument({ type: "recipient", name: "", occasion: "birthday", budget: "", idea: "", purchased: false, spent: "", createdAt: Date.now(), }); const { docs: recipients } = useLiveQuery("type", { key: "recipient", descending: true }); const [isSuggesting, setIsSuggesting] = React.useState(false); const totalBudget = recipients.reduce((s, r) => s + (parseFloat(r.budget) || 0), 0); const totalSpent = recipients.reduce((s, r) => s + (r.purchased ? (parseFloat(r.spent) || 0) : 0), 0); async function suggestIdea() { if (!doc.name && !doc.occasion) return; setIsSuggesting(true); try { const res = await callAI( `Suggest one short, specific gift idea for ${doc.name || "someone"} for a ${doc.occasion} with budget $${doc.budget || "flexible"}. Keep it under 12 words.`, { schema: { properties: { idea: { type: "string" } } } } ); const { idea } = JSON.parse(res); merge({ idea }); } finally { setIsSuggesting(false); } } const c = { page: "min-h-screen bg-[#fafaf7] dark:bg-[#1a1a1a] text-[#1a1a1a] dark:text-[#e8e8e3] font-[Helvetica_Neue,Helvetica,Arial,sans-serif]", header: "border-b-2 border-[#1a1a1a] dark:border-[#e8e8e3] px-4 py-5", title: "text-3xl font-bold tracking-tight", tagline: "text-sm italic mt-1 text-[#555] dark:text-[#aaa]", main: "max-w-3xl mx-auto px-4 py-6 space-y-6", section: "border border-[#1a1a1a]/20 dark:border-[#e8e8e3]/20 bg-white dark:bg-[#222] p-4", h2: "text-xl font-bold border-b border-[#1a1a1a]/30 dark:border-[#e8e8e3]/30 pb-2 mb-3", input: "w-full border border-[#1a1a1a]/30 dark:border-[#e8e8e3]/30 bg-transparent px-3 py-2 min-h-[44px] text-base", btn: "px-4 py-3 min-h-[44px] bg-[#1a1a1a] dark:bg-[#e8e8e3] text-[#fafaf7] dark:text-[#1a1a1a] font-semibold", btnGhost: "px-3 py-2 min-h-[44px] border border-[#1a1a1a]/40 dark:border-[#e8e8e3]/40 text-sm", row: "border-t border-[#1a1a1a]/15 dark:border-[#e8e8e3]/15 py-3", stat: "text-2xl font-bold", statLabel: "text-xs uppercase tracking-wider text-[#555] dark:text-[#aaa]", }; return (

{/* summary pass */}

Add a Recipient

{can("write") ? ( ) : (

Read-only view — contact the owner for write access.

)}

The Ledger

No recipients yet — add someone above.
{r.name || "(unnamed)"}

{r.occasion}

{r.idea || no idea yet}

Budget: ${parseFloat(r.budget || 0).toFixed(2)}
{r.purchased &&
Spent: ${parseFloat(r.spent || 0).toFixed(2)}
}

{can("write") && (
database.put({ ...r, purchased: !r.purchased })} /> Purchased {r.purchased && ( database.put({ ...r, spent: e.target.value })} /> )}
)}

); }