import React, { useState, useEffect, useRef } from "react"; import { Plus, Trash2, AlertCircle, CheckCircle, ArrowDown } from "lucide-react"; function suggestSavings(items, overAmount) { // Suggest savings by swapping expensive brands or reducing quantities // Sort items by price per unit desc, only if more than 1 qty const sorted = [...items] .filter((i) => i.quantity > 1 || i.price >= 5) .sort((a, b) => (b.price / b.quantity) - (a.price / a.quantity)); let tips = []; let reduced = 0; for (const item of sorted) { // Try reducing quantity or picking alternative brand // Suggest reducing quantity by 1 if possible if (item.quantity > 1) { const save = item.price / item.quantity; tips.push(`Reduce "${item.name}" quantity by 1 (-$${save.toFixed(2)})`); reduced += save; } else if (item.price >= 5) { tips.push(`Try lower-priced alternative for "${item.name}"`); } if (reduced >= overAmount) break; } if (tips.length === 0) tips.push("No further suggestions found"); return tips.slice(0, 3); } export default function App() { const [budget, setBudget] = useState("100"); const [items, setItems] = useState([]); const [itemName, setItemName] = useState(""); const [itemPrice, setItemPrice] = useState(""); const [itemQty, setItemQty] = useState("1"); const [flash, setFlash] = useState(false); // Budget calculations const total = items.reduce((sum, i) => sum + i.price * i.quantity, 0); const remaining = Math.max(0, Number(budget) - total); const overBudget = total - Number(budget); const isOver = overBudget > 0; // For suggestions const savings = isOver ? suggestSavings(items, overBudget) : []; // Success flash when adding function flashSuccess() { setFlash(true); setTimeout(() => setFlash(false), 1200); } const addItem = () => { if (!itemName.trim() || isNaN(+itemPrice) || itemPrice === "" || +itemPrice <= 0 || isNaN(+itemQty) || +itemQty <= 0) return; setItems([ ...items, { name: itemName.trim(), price: parseFloat(itemPrice), quantity: parseInt(itemQty, 10) } ]); setItemName(""); setItemPrice(""); setItemQty("1"); flashSuccess(); }; const removeItem = (idx) => setItems(items.filter((_, i) => i !== idx)); // Format amount const fmt = (n) => "$" + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); // Pie chart for budget usage (inline SVG) const usage = Math.min(1, total / (Number(budget) || 1)); const r = 32, c = 2 * Math.PI * r; const chartColor = isOver ? "#ef4444" : usage > 0.8 ? "#facc15" : "#10b981"; // Autofocus item name input after adding const nameRef = useRef(null); useEffect(() => { if (nameRef.current) nameRef.current.focus(); }, [flash]); return (

{/* Budget setup */}

Weekly Grocery Allowance

setBudget(e.target.value.replace(/[^0-9.]/g, ''))} className="w-32 px-3 py-2 rounded-lg border border-gray-300 text-lg font-semibold bg-white/80 focus:outline-none" inputMode="decimal" step="1" /> USD

{/* Add item */}

Add Grocery Item

setItemName(e.target.value)} placeholder="e.g. Milk" className="flex-1 px-3 py-2 rounded-lg border border-gray-300 bg-white" autoComplete="off" onKeyDown={e => e.key === 'Enter' && addItem()} maxLength={32} /> setItemPrice(e.target.value.replace(/[^0-9.]/g, ''))} placeholder="Price" className="w-20 px-2 py-2 rounded-lg border border-gray-300 text-right bg-white" inputMode="decimal" onKeyDown={e => e.key === 'Enter' && addItem()} /> setItemQty(e.target.value.replace(/[^0-9]/g, ''))} placeholder="Qty" className="w-14 px-2 py-2 rounded-lg border border-gray-300 text-right bg-white" inputMode="numeric" onKeyDown={e => e.key === 'Enter' && addItem()} />

{/* Budget summary + chart */}

{isOver && }

Budget Used 0.8 ? 'text-yellow-500' : 'text-emerald-600'}`}>{fmt(Math.min(total, budget))}/{fmt(Number(budget) || 0)} {(usage*100).toFixed(0)}% used {isOver ? ( Over by {fmt(overBudget)} ) : ( You have {fmt(remaining)} left )}

{/* Shopping list */}

Planned Items ({items.length}) {items.length > 0 && }

{items.length === 0 ? (

🛒

Add your planned grocery items above

) : (

{items.map((item, idx) => (

{item.name}

x{item.quantity}

{fmt(item.price * item.quantity)}

))}

)}

{/* Over-budget suggestions */} {isOver && (

You’re over budget!

Try these tips to reduce cost:

{tip}

)} {/* Savings suggestions for everyone near the threshold */} {!isOver && usage > 0.8 && (

Budget almost used

Consider these for extra savings:

{tip}

)} {/* Data freshness footer (not fetching remote data, but follows pattern) */}

{new Date().toLocaleTimeString()} planned · Data entered by you

); }