import React, { useState, useMemo } from "react"; export default function App() { // Shared state const [people, setPeople] = useSharedStorage("splitter_people", [""]); const [expenses, setExpenses] = useSharedStorage("splitter_expenses", []); // UI state const [personInput, setPersonInput] = useState(""); const [newExpense, setNewExpense] = useState({ description: "", amount: "", paidBy: "", splitWith: [], }); const [showAddExpense, setShowAddExpense] = useState(false); // --- Core logic: Calculate each person's balance --- const balances = useMemo(() => { // Build dict {person: {paid, share, balance}} const out = {}; people.filter(Boolean).forEach((p) => { out[p] = { paid: 0, share: 0, balance: 0 }; }); expenses.forEach((exp) => { // Guard: skip malformed if (!exp.paidBy || !exp.amount || !exp.splitWith?.length) return; const amount = Number(exp.amount); if (isNaN(amount) || amount <= 0) return; // Paid by if (out[exp.paidBy]) out[exp.paidBy].paid += amount; // Split with const splitCount = exp.splitWith.length; exp.splitWith.forEach((p) => { if (out[p]) out[p].share += amount / splitCount; }); }); // Compute final balance: paid - share Object.keys(out).forEach((p) => { out[p].balance = out[p].paid - out[p].share; }); return out; }, [people, expenses]); // --- Compute who owes whom (greedy settle) --- const settlements = useMemo(() => { // List of {from, to, amount} // Get negative balances (debtors), positive (receivers) const creditors = []; const debtors = []; Object.entries(balances).forEach(([p, bal]) => { if (Math.abs(bal.balance) < 0.01) return; // Ignore near zero if (bal.balance > 0) creditors.push({ person: p, amount: bal.balance }); if (bal.balance < 0) debtors.push({ person: p, amount: -bal.balance }); }); // Greedy: debtor pays creditor until all settled const txs = []; let c = 0, d = 0; while (c < creditors.length && d < debtors.length) { const pay = Math.min(creditors[c].amount, debtors[d].amount); txs.push({ from: debtors[d].person, to: creditors[c].person, amount: pay, }); creditors[c].amount -= pay; debtors[d].amount -= pay; if (creditors[c].amount <= 0.01) c++; if (debtors[d].amount <= 0.01) d++; } return txs; }, [balances]); // --- UI helpers --- const canAddPerson = personInput.trim() && !people.includes(personInput.trim()); const canAddExpense = newExpense.description.trim() && newExpense.amount && Number(newExpense.amount) > 0 && people.includes(newExpense.paidBy) && newExpense.splitWith.length > 0; const currency = "USD"; // --- Event handlers --- function handleAddPerson(e) { e.preventDefault(); if (!canAddPerson) return; setPeople((prev) => [...prev.filter(Boolean), personInput.trim()]); setPersonInput(""); } function handleRemovePerson(p) { // Remove from people and all expenses setPeople((prev) => prev.filter((x) => x !== p)); setExpenses((prev) => prev.map((ex) => ({ ...ex, paidBy: ex.paidBy === p ? "" : ex.paidBy, splitWith: ex.splitWith.filter((x) => x !== p), })).filter((ex) => ex.paidBy && ex.splitWith.length > 0) ); } function handleAddExpense(e) { e.preventDefault(); if (!canAddExpense) return; setExpenses((prev) => [ ...prev, { ...newExpense, amount: parseFloat(newExpense.amount), timestamp: Date.now(), }, ]); setNewExpense({ description: "", amount: "", paidBy: "", splitWith: [] }); setShowAddExpense(false); } function handleRemoveExpense(idx) { setExpenses((prev) => prev.slice(0, idx).concat(prev.slice(idx + 1))); } function toggleSplitPerson(name) { setNewExpense((ne) => ({ ...ne, splitWith: ne.splitWith.includes(name) ? ne.splitWith.filter((n) => n !== name) : [...ne.splitWith, name], })); } // --- UI COMPONENTS --- return (

Simple Expense Splitter

{/* People section */}

👥 Friends {people.filter(Boolean).length} total

{people.filter(Boolean).length === 0 ? (

🙋 Add at least one person to start

) : (

{people.filter(Boolean).map((p) => ( {p} ))}

)}

{/* Expenses section */}

📋 Expenses

{expenses.length === 0 ? (

No expenses yet. Add one!

) : (

{expenses.map((ex, idx) => (

{ex.description}

Paid by {ex.paidBy}, split with {ex.splitWith.join(", ")}

${ex.amount.toFixed(2)}

))}

)}

{/* Add Expense Modal */} {showAddExpense && (

Add Expense

Description setNewExpense(ex => ({ ...ex, description: e.target.value }))} className="block w-full px-3 py-2 border rounded mt-1" placeholder="Groceries, rent, dinner, ..." maxLength={32} required /> Amount ({currency}) setNewExpense(ex => ({ ...ex, amount: e.target.value }))} className="block w-full px-3 py-2 border rounded mt-1" placeholder="Enter amount" required /> Who paid?

Split with:

{people.filter(Boolean).map((p) => ( toggleSplitPerson(p)} /> {p} ))}

)} {/* Summary section */}

💸 Balances

{people.filter(Boolean).length === 0 ? (

Add at least one person.

) : (

{people.filter(Boolean).map((p) => (

{p} 0.01 ? "text-green-600 font-mono" : balances[p].balance < -0.01 ? "text-red-600 font-mono" : "text-gray-500 font-mono" }> {balances[p].balance > 0.01 ? `gets ` : balances[p].balance < -0.01 ? `owes ` : ``} ${Math.abs(balances[p].balance).toFixed(2)}

))}

)}

{/* Settlement summary */}

🧾 Who pays whom

{settlements.length === 0 ? (

All settled! 🎉 No one owes anything.

) : (

{tx.from} → {tx.to} ${tx.amount.toFixed(2)}

)}

{/* Footer */}

); }