function MainComponent() { const [members, setMembers] = React.useState([]); const [expenses, setExpenses] = React.useState([]); const [name, setName] = React.useState(''); const [expense, setExpense] = React.useState(''); const [amount, setAmount] = React.useState(''); const [selectedMembers, setSelectedMembers] = React.useState([]); const [payer, setPayer] = React.useState(''); const addMember = ()=>{ if (name.trim() !== '') { setMembers([ ...members, name.trim() ]); setName(''); } }; const addExpense = ()=>{ if (payer.trim() !== '' && selectedMembers.length > 0) { setExpenses([ ...expenses, { expense, amount: parseFloat(amount), payer, involvedMembers: selectedMembers } ]); setExpense(''); setAmount(''); setPayer(''); setSelectedMembers([]); } }; const calculateSplit = ()=>{ const totalSpent = {}; members.forEach((member)=>{ totalSpent[member] = 0; }); expenses.forEach(({ amount, payer, involvedMembers })=>{ const splitAmount = amount / involvedMembers.length; involvedMembers.forEach((member)=>{ totalSpent[member] += splitAmount; }); totalSpent[payer] += amount; }); return totalSpent; }; const calculatePayments = ()=>{ const totalSpent = calculateSplit(); const averageSpent = Object.values(totalSpent).reduce((acc, val)=>acc + val, 0) / members.length; const payments = []; members.forEach((member)=>{ const difference = totalSpent[member] - averageSpent; if (difference < 0) { payments.push({ from: member, amount: Math.abs(difference) }); } }); const transactions = []; payments.forEach(({ from, amount })=>{ members.forEach((to)=>{ const payDifference = totalSpent[to] - averageSpent; if (payDifference > 0 && amount > 0) { const payAmount = Math.min(amount, payDifference); transactions.push({ from, to, amount: payAmount }); totalSpent[to] -= payAmount; amount -= payAmount; } }); }); return transactions; }; const deleteExpense = (index)=>{ const updatedExpenses = [ ...expenses ]; updatedExpenses.splice(index, 1); setExpenses(updatedExpenses); }; const totalSpent = calculateSplit(); const payments = calculatePayments(); const handleMemberSelect = (e)=>{ const value = Array.from(e.target.selectedOptions, (option)=>option.value); setSelectedMembers(value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-blue-50", __source: { fileName: "", lineNumber: 87, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto text-blue-700", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "わりかん｜旅行・飲み会の割り勘計算"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 w-full max-w-md", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "nameInput", className: "font-medium mb-1 font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "名前:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "nameInput", value: name, name: "nameInput", className: "border rounded p-2 font-roboto", onChange: (e)=>setName(e.target.value), __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addMember, className: "bg-blue-500 text-white p-2 rounded font-roboto mt-2", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "メンバー追加")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "expense", className: "font-medium mb-1 font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "出費項目:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "expense", value: expense, name: "expense", className: "border rounded p-2 font-roboto", onChange: (e)=>setExpense(e.target.value), __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "amountSpent", className: "font-medium mb-1 font-roboto", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "出費額 (¥):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "amountSpent", value: amount, name: "amountSpent", className: "border rounded p-2 font-roboto", onChange: (e)=>setAmount(e.target.value), __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "payer", className: "font-medium mb-1 font-roboto", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "支払った人:"), /*#__PURE__*/ React.createElement("select", { id: "payer", name: "payer", className: "border rounded p-2 font-roboto", value: payer, onChange: (e)=>setPayer(e.target.value), __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, "選択してください"), members.map((member, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: member, __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, member)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "membersInvolved", className: "font-medium mb-1 font-roboto", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "割り勘に参加するメンバー:"), /*#__PURE__*/ React.createElement("select", { id: "membersInvolved", name: "membersInvolved", className: "border rounded p-2 font-roboto", multiple: true, value: selectedMembers, onChange: handleMemberSelect, __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, members.map((member, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: member, __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, member))), /*#__PURE__*/ React.createElement("button", { onClick: addExpense, className: "bg-blue-500 text-white p-2 rounded font-roboto mt-2", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "出費項目追加"))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-4 font-roboto text-blue-700", __source: { fileName: "", lineNumber: 166, columnNumber: 7 }, __self: this }, "支払い情報:"), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, members.map((member)=>/*#__PURE__*/ React.createElement("li", { key: member, className: "flex justify-between border-b py-2 font-roboto", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, member), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "¥", totalSpent[member]?.toFixed(2))))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-4 font-roboto text-blue-700", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, "精算情報:"), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, payments.map(({ from, to, amount }, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between border-b py-2 font-roboto", __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, from, " ➡ ", to), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 181, columnNumber: 13 }, __self: this }, "¥", amount.toFixed(2))))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mt-4 font-roboto text-blue-700", __source: { fileName: "", lineNumber: 186, columnNumber: 7 }, __self: this }, "出費項目:"), /*#__PURE__*/ React.createElement("ul", { className: "w-full max-w-md bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, expenses.map((expense, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between border-b py-2 font-roboto", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, expense.expense, " - ¥", expense.amount.toFixed(2)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white p-1 rounded font-roboto ml-2", onClick: ()=>deleteExpense(index), __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, "削除")))))); }