import React, { useState, useRef, useEffect } from "react"; import { Plus, Trash2, Users, Percent, DollarSign, Receipt, Share2, Copy } from "lucide-react"; function toCurrency(n) { return "$" + Number(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } export default function App() { // App-Scoped State const [people, setPeople] = useState(["Alice", "Bob"]); const [items, setItems] = useState([]); // [{name, price, who: [indexes]}] const [taxRate, setTaxRate] = useState(8.0); // percent const [tipRate, setTipRate] = useState(10.0); // percent const [showAddPerson, setShowAddPerson] = useState(false); const [showAddItem, setShowAddItem] = useState(false); const [personInput, setPersonInput] = useState(""); const [itemInput, setItemInput] = useState({ name: "", price: "", who: [] }); const [copied, setCopied] = useState(false); // Helper: Add a person function handleAddPerson() { if (personInput.trim() && !people.includes(personInput.trim())) { setPeople([...people, personInput.trim()]); setPersonInput(""); setShowAddPerson(false); } } // Helper: Add item function handleAddItem() { let price = parseFloat(itemInput.price) if (!itemInput.name.trim() || isNaN(price) || price <= 0 || itemInput.who.length === 0) return; setItems([ ...items, { name: itemInput.name.trim(), price, who: [...itemInput.who] } ]); setItemInput({ name: "", price: "", who: [] }); setShowAddItem(false); } // Helper: Remove item function deleteItem(ix) { setItems(items.filter((_, i) => i !== ix)); } // --- Core Calculation --- const personTotals = people.map((_, ix) => { // Share of items let subtotal = 0; for (let item of items) { if (item.who.includes(ix)) { subtotal += item.price / item.who.length; } } return subtotal; }); const totalNoTaxTip = personTotals.reduce((a, b) => a + b, 0); const taxAmt = totalNoTaxTip * (taxRate / 100); const tipAmt = (totalNoTaxTip + taxAmt) * (tipRate / 100); const grandTotal = totalNoTaxTip + taxAmt + tipAmt; // For split, compute how much each person owes for tax and tip, proportional to their subtotal const perPersonSummary = people.map((name, ix) => { let share = personTotals[ix]; let sharePct = totalNoTaxTip === 0 ? 0 : share / totalNoTaxTip; let tax = taxAmt * sharePct; let tip = tipAmt * sharePct; return { name, items: items .filter((item) => item.who.includes(ix)) .map((item) => ({ name: item.name, price: item.price / item.who.length })), subtotal: share, tax, tip, total: share + tax + tip }; }); // For export/copy function buildTextSummary() { let str = `Expense Split\n`; str += `---------------------------------\n`; for (let p of perPersonSummary) { str += `* ${p.name}: ${toCurrency(p.total)}\n`; str += p.items.map(it => ` - ${it.name}: ${toCurrency(it.price)}`).join("\n"); str += `\n Subtotal: ${toCurrency(p.subtotal)}`; str += `\n Tax: ${toCurrency(p.tax)}, Tip: ${toCurrency(p.tip)}\n\n`; } str += `Grand Total: ${toCurrency(grandTotal)}`; return str; } function handleCopy() { navigator.clipboard.writeText(buildTextSummary()); setCopied(true); setTimeout(() => setCopied(false), 2000); } // UI return (

{/* People Chips */}

{people.map((name, ix) => (

{name}

))}

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

setShowAddPerson(false)} />

Add Person

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

)} {/* --- Add Item --- */}

Items

{showAddItem && (

setShowAddItem(false)} />

Add Item

setItemInput({ ...itemInput, name: e.target.value })} /> setItemInput({ ...itemInput, price: e.target.value.replace(/[^0-9.]/g, "") })} />

Who ordered?

{people.map((name, ix) => ( ))}

)} {/* --- List of Items --- */}

{items.length === 0 && (

No items yet. Add your order!

)} {items.map((item, ix) => (

{item.name} {toCurrency(item.price)} {" "} · {item.who.map(i => people[i]).join(", ")}

))}

{/* --- Tax & Tip Controls --- */}

Tax setTaxRate(+e.target.value)} /> %

Tip setTipRate(+e.target.value)} /> %

{/* --- Grand Total & Per-person breakdown --- */}

Grand Total: {toCurrency(grandTotal)}

{/* Person breakdown */}

{perPersonSummary.map((p, ix) => (

{p.name} {toCurrency(p.total)}

{p.items.map((it, i) => (

{it.name}{toCurrency(it.price)}

))}

Subtotal {toCurrency(p.subtotal)}

Tax {toCurrency(p.tax)}

Tip {toCurrency(p.tip)}

Amount to Pay {toCurrency(p.total)}

))}

{/* Copy/Share Button */}

); }

Expense Split Calculator

Expense Split Calculator

reviews