import React, { useState, useMemo } from "react"; import { Plus, User, Users, Check, Trash2 } from "lucide-react"; function getPeopleFromExpenses(expenses) { // Collect unique people in all expenses (from paidBy and sharedWith) const all = expenses.reduce((out, exp) => { if (!out.includes(exp.paidBy)) out.push(exp.paidBy); exp.sharedWith.forEach(p => { if (!out.includes(p)) out.push(p); }); return out; }, []); return all.sort(); } function calculateBalances(expenses, people) { // Net balance per person (positive = others owe them; negative = they owe others) const balances = {}; people.forEach(p => { balances[p] = 0; }); expenses.forEach(exp => { const split = exp.amount / exp.sharedWith.length; exp.sharedWith.forEach(person => { if (person !== exp.paidBy) balances[person] -= split; }); balances[exp.paidBy] += exp.amount - split * (exp.sharedWith.includes(exp.paidBy) ? 1 : 0); }); // Round to 2 decimals Object.keys(balances).forEach(p => { balances[p] = Math.round(balances[p]*100)/100 }); return balances; } function simplifyDebts(balances) { // Greedy round-robin debtor -> creditor settlements let balArr = Object.entries(balances).map(([name, val]) => ({ name, val })); const debts = []; let debtors = balArr.filter(b => b.val < -0.01).sort((a, b) => a.val - b.val); let creditors = balArr.filter(b => b.val > 0.01).sort((a, b) => b.val - a.val); while (debtors.length && creditors.length) { let d = debtors[0], c = creditors[0]; let amt = Math.min(-d.val, c.val); if (amt < 0.01) break; debts.push({ from: d.name, to: c.name, amount: Math.round(amt * 100) / 100 }); d.val += amt; c.val -= amt; if (d.val > -0.01) debtors.shift(); if (c.val < 0.01) creditors.shift(); } return debts; } export default function App() { const [expenses, setExpenses] = useSharedStorage("smart-splitter-expenses", []); const [people, setPeople] = useSharedStorage("smart-splitter-people", []); const [form, setForm] = useState({ name: "", amount: "", paidBy: "", sharedWith: [] }); const [showPersonModal, setShowPersonModal] = useState(false); const [newPerson, setNewPerson] = useState(""); // Add person const handleAddPerson = () => { const p = newPerson.trim(); if (!p || people.includes(p)) return; setPeople([...people, p]); setNewPerson(""); setShowPersonModal(false); setForm(f => ({ ...f, paidBy: p, sharedWith: f.sharedWith.includes(p) ? f.sharedWith : [...f.sharedWith, p] })); }; // Expenses show all people historically involved const availablePeople = useMemo(() => { return Array.from(new Set([...people, ...getPeopleFromExpenses(expenses)])); }, [people, expenses]); // Add expense row const handleAddExpense = () => { // Validation const errors = {}; if (!form.name.trim()) errors.name = "Required"; if (isNaN(Number(form.amount)) || Number(form.amount) <= 0) errors.amount = "Invalid amount"; if (!form.paidBy) errors.paidBy = "Who paid?"; if (!form.sharedWith.length) errors.sharedWith = "Select at least 1"; if (Object.keys(errors).length) return setForm(f => ({ ...f, errors })); setExpenses([{ id: Date.now(), ...form, amount: +(+form.amount).toFixed(2) }, ...expenses]); setForm({ name: "", amount: "", paidBy: form.paidBy, sharedWith: [form.paidBy] }); }; // Delete expense const removeExpense = (id) => setExpenses(expenses.filter(e => e.id !== id)); // Remove person const removePerson = (p) => { setPeople(people.filter(x => x !== p)); setForm(f => ({ ...f, paidBy: f.paidBy === p ? "" : f.paidBy, sharedWith: f.sharedWith.filter(n => n !== p) })); }; // Balance calculation const balances = useMemo(() => calculateBalances(expenses, availablePeople), [expenses, availablePeople]); const debts = useMemo(() => simplifyDebts(balances), [balances]); const totalSpent = expenses.reduce((sum, e) => sum + e.amount, 0); // UI return (

{/* People List */}

{availablePeople.map((p) => (

{p} {people.includes(p) && ( ) }

))}

{/* Add Expense Form */}

Add Expense

setForm(f => ({ ...f, name: e.target.value }))} /> setForm(f => ({ ...f, amount: e.target.value }))} />

Paid by {availablePeople.map(p => ( ))}

Shared among {availablePeople.map(p => ( ))}

{form.errors &&

{Object.values(form.errors).map((msg, i) =>

{msg}

)}

}

{/* Balances */}

Balances

{availablePeople.map(p => (

{p} 0.01 ? 'text-green-600' : balances[p] < -0.01 ? 'text-red-600' : ''} font-bold`}> {balances[p] > 0.01 ? `+${balances[p].toFixed(2)}` : balances[p] < -0.01 ? balances[p].toFixed(2) : '0.00'}

))}

+ means they are owed. – means they owe.

{/* Debts/Settlement */}

Settle Up

{debts.length === 0 ? (

All settled up!

) : ( debts.map((d, i) => (

{d.from} owes {d.to} ${d.amount.toFixed(2)}

)) )}

{/* Expense Log */}

Expense Log (Total: ${totalSpent.toFixed(2)})

{expenses.length === 0 &&

No expenses logged yet.

} {expenses.map((exp, i) => (

{exp.name} • ${exp.amount.toFixed(2)} {exp.paidBy}

Shared: {exp.sharedWith.map(p => {p})}

))}

{/* Add Person Modal */} {showPersonModal && (

setShowPersonModal(false)}/>

Add Person

setNewPerson(e.target.value)} onKeyDown={e => { if (e.key === "Enter") handleAddPerson(); }} />

)}

); }