import pageData from "~/data/split-mate-app.json"; export function NewGroupModal({ open, onClose, onSave }) { const [name, setName] = React.useState(''); const [members, setMembers] = React.useState(['']); const addMember = () => { setMembers([...members, '']); }; const updateMember = (index, value) => { const newMembers = [...members]; newMembers[index] = value; setMembers(newMembers); }; const removeMember = (index) => { if (members.length > 1) { setMembers(members.filter((_, i) => i !== index)); } }; const handleSave = () => { const validMembers = members.filter(m => m.trim()); if (name.trim() && validMembers.length >= 2) { onSave({ name: name.trim(), members: validMembers }); setName(''); setMembers(['']); } }; const handleClose = () => { setName(''); setMembers(['']); onClose(); }; return ( ); } export function AddExpenseModal({ open, onClose, onSave, group }) { const [name, setName] = React.useState(''); const [amount, setAmount] = React.useState(''); const [paidBy, setPaidBy] = React.useState(''); React.useEffect(() => { if (group && group.members.length > 0) { setPaidBy(group.members[0]); } }, [group]); const handleSave = () => { if (name.trim() && amount && paidBy) { onSave({ name: name.trim(), amount, paidBy }); setName(''); setAmount(''); } }; const handleClose = () => { setName(''); setAmount(''); onClose(); }; return ( ); } export function BalancesModal({ open, onClose, group, balances, owedList, onSettle }) { const [selectedDebt, setSelectedDebt] = React.useState(null); const [settleAmount, setSettleAmount] = React.useState(''); const handleSettleClick = (debt) => { setSelectedDebt(debt); setSettleAmount(debt.amount.toFixed(2)); }; const handleConfirmSettle = () => { const amount = parseFloat(settleAmount); if (amount > 0 && amount <= selectedDebt.amount && selectedDebt) { onSettle(selectedDebt.from, selectedDebt.to, amount); setSelectedDebt(null); setSettleAmount(''); } }; const handleCancelSettle = () => { setSelectedDebt(null); setSettleAmount(''); }; return ( ); } export function SplitMateApp() { const { data, updateData } = useData(pageData); const [currentView, setCurrentView] = React.useState('home'); const [selectedGroup, setSelectedGroup] = React.useState(null); const [showNewGroupModal, setShowNewGroupModal] = React.useState(false); const [showAddExpenseModal, setShowAddExpenseModal] = React.useState(false); const [showBalancesModal, setShowBalancesModal] = React.useState(false); const groups = data.groups || []; const createGroup = (groupData) => { const newGroup = { id: Date.now().toString(), name: groupData.name, members: groupData.members, expenses: [], createdAt: new Date().toISOString() }; updateData({ ...data, groups: [...groups, newGroup] }); setShowNewGroupModal(false); }; const addExpense = (expenseData) => { const updatedGroups = groups.map(group => { if (group.id === selectedGroup.id) { const newExpense = { id: Date.now().toString(), name: expenseData.name, amount: parseFloat(expenseData.amount), paidBy: expenseData.paidBy, splitAmong: selectedGroup.members, date: new Date().toISOString() }; return { ...group, expenses: [...group.expenses, newExpense] }; } return group; }); updateData({ ...data, groups: updatedGroups }); setSelectedGroup(updatedGroups.find(g => g.id === selectedGroup.id)); setShowAddExpenseModal(false); }; const calculateBalances = (group) => { const balances = {}; // Initialize all members with 0 balance group.members.forEach(member => { balances[member] = 0; }); // Calculate balances from regular expenses only const regularExpenses = group.expenses.filter(expense => !expense.isSettlement); // Calculate what each person paid vs their fair share const totalSpent = regularExpenses.reduce((sum, expense) => sum + expense.amount, 0); const fairShare = totalSpent / group.members.length; // Track what each person actually paid const amountPaid = {}; group.members.forEach(member => { amountPaid[member] = 0; }); regularExpenses.forEach(expense => { amountPaid[expense.paidBy] += expense.amount; }); // Calculate initial debt based on regular expenses group.members.forEach(member => { balances[member] = amountPaid[member] - fairShare; }); // Apply settlements to reduce debts const settlements = group.expenses.filter(expense => expense.isSettlement); settlements.forEach(settlement => { // Settlement reduces the debt between two people // The payer's debt decreases (or they become more in credit) // The receiver's credit decreases (or they become more in debt) balances[settlement.paidBy] += settlement.amount; balances[settlement.splitAmong[0]] -= settlement.amount; }); return balances; }; const getOwedList = (balances) => { const result = []; const members = Object.keys(balances); // Create a copy of balances to work with const workingBalances = { ...balances }; // Find who owes money (negative balance) and who is owed money (positive balance) const creditors = members.filter(m => workingBalances[m] > 0.01).sort((a, b) => workingBalances[b] - workingBalances[a]); const debtors = members.filter(m => workingBalances[m] < -0.01).sort((a, b) => workingBalances[a] - workingBalances[b]); let creditorIndex = 0; let debtorIndex = 0; while (creditorIndex < creditors.length && debtorIndex < debtors.length) { const creditor = creditors[creditorIndex]; const debtor = debtors[debtorIndex]; const creditAmount = workingBalances[creditor]; const debtAmount = Math.abs(workingBalances[debtor]); const settleAmount = Math.min(creditAmount, debtAmount); if (settleAmount > 0.01) { result.push({ from: debtor, to: creditor, amount: settleAmount }); workingBalances[creditor] -= settleAmount; workingBalances[debtor] += settleAmount; } if (Math.abs(workingBalances[creditor]) <= 0.01) creditorIndex++; if (Math.abs(workingBalances[debtor]) <= 0.01) debtorIndex++; } return result; }; const settleDebt = (from, to, amount) => { // Create a settlement transaction that directly transfers the debt const settlementExpense = { id: Date.now().toString(), name: `${from} paid ${to} $${amount.toFixed(2)}`, amount: amount, paidBy: from, // The debtor pays splitAmong: [to], // Only the creditor "owes" this payment (receives it) isSettlement: true, date: new Date().toISOString() }; const updatedGroups = groups.map(group => { if (group.id === selectedGroup.id) { return { ...group, expenses: [...group.expenses, settlementExpense] }; } return group; }); updateData({ ...data, groups: updatedGroups }); setSelectedGroup(updatedGroups.find(g => g.id === selectedGroup.id)); }; const getTotalSpent = (group) => { return group.expenses .filter(expense => !expense.isSettlement) .reduce((total, expense) => total + expense.amount, 0); }; if (currentView === 'home') { return (

SplitMate

Split expenses with friends

{groups.length === 0 ? (

No groups yet

Create your first group to start splitting expenses

) : (

{groups.map(group => { const totalSpent = getTotalSpent(group); const balances = calculateBalances(group); const owedList = getOwedList(balances); return ( { setSelectedGroup(group); setCurrentView('group'); }}>

{group.name}

${totalSpent.toFixed(2)}

{group.members.length} members - {group.expenses.filter(e => !e.isSettlement).length} expenses

{owedList.length > 0 && (

{owedList.length} pending settlement{owedList.length > 1 ? 's' : ''}

)} ); })}

)} setShowNewGroupModal(false)} onSave={createGroup} />

); } if (currentView === 'group' && selectedGroup) { const totalSpent = getTotalSpent(selectedGroup); const balances = calculateBalances(selectedGroup); const owedList = getOwedList(balances); return (

{selectedGroup.name}

Total spent: ${totalSpent.toFixed(2)}

{selectedGroup.expenses.length === 0 ? (

No expenses yet

Add your first expense below

) : ( selectedGroup.expenses .slice() .reverse() .map(expense => (

{expense.name}

Paid by {expense.paidBy} - {new Date(expense.date).toLocaleDateString()}

{expense.isSettlement && ( Settlement )}

${expense.amount.toFixed(2)}

)) )}

setShowAddExpenseModal(false)} onSave={addExpense} group={selectedGroup} /> setShowBalancesModal(false)} group={selectedGroup} balances={balances} owedList={owedList} onSettle={settleDebt} />

); } }