function MainComponent() { const [transactions, setTransactions] = React.useState([]); const [assetTypes, setAssetTypes] = React.useState([ "銀行", "現金", "証券" ]); const [newAssetType, setNewAssetType] = React.useState(""); const [formData, setFormData] = React.useState({ date: '', amount: '', type: '', transferFrom: '', transferTo: '' }); const handleChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setTransactions([ ...transactions, formData ]); setFormData({ date: '', amount: '', type: '', transferFrom: '', transferTo: '' }); }; const handleAssetTypeChange = (e)=>{ setNewAssetType(e.target.value); }; const handleAddAssetType = ()=>{ if (newAssetType && !assetTypes.includes(newAssetType)) { setAssetTypes([ ...assetTypes, newAssetType ]); setNewAssetType(""); } }; const handleDeleteAssetType = (typeToDelete)=>{ setAssetTypes(assetTypes.filter((type)=>type !== typeToDelete)); }; const calculateBalance = (type)=>{ let balance = 0; transactions.forEach((transaction)=>{ if (transaction.type === type) { balance += parseFloat(transaction.amount); } else if (transaction.transferTo === type) { balance += parseFloat(transaction.amount); } else if (transaction.transferFrom === type) { balance -= parseFloat(transaction.amount); } }); return balance; }; const calculateTotalBalance = ()=>{ let totalBalance = 0; transactions.forEach((transaction)=>{ totalBalance += parseFloat(transaction.amount); }); return totalBalance; }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-5xl mx-auto p-6 bg-white shadow-md", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "金融資産管理アプリ"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", htmlFor: "date", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "入出金日"), /*#__PURE__*/ React.createElement("input", { name: "date", type: "date", className: "w-full p-2 border border-gray-300 rounded", value: formData.date, onChange: handleChange, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", htmlFor: "amount", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "金額"), /*#__PURE__*/ React.createElement("input", { name: "amount", type: "number", className: "w-full p-2 border border-gray-300 rounded", value: formData.amount, onChange: handleChange, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", htmlFor: "type", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "種別"), /*#__PURE__*/ React.createElement("select", { name: "type", className: "w-full p-2 border border-gray-300 rounded", value: formData.type, onChange: handleChange, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "選択してください"), assetTypes.map((assetType)=>/*#__PURE__*/ React.createElement("option", { key: assetType, value: assetType, __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, assetType)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", htmlFor: "transferFrom", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "振替元"), /*#__PURE__*/ React.createElement("select", { name: "transferFrom", className: "w-full p-2 border border-gray-300 rounded", value: formData.transferFrom, onChange: handleChange, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "選択してください"), assetTypes.map((assetType)=>/*#__PURE__*/ React.createElement("option", { key: assetType, value: assetType, __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, assetType)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", htmlFor: "transferTo", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "振替先"), /*#__PURE__*/ React.createElement("select", { name: "transferTo", className: "w-full p-2 border border-gray-300 rounded", value: formData.transferTo, onChange: handleChange, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, "選択してください"), assetTypes.map((assetType)=>/*#__PURE__*/ React.createElement("option", { key: assetType, value: assetType, __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, assetType))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-blue-600 text-white rounded", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "金融資産の種類管理"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "newAssetType", type: "text", className: "w-full p-2 border border-gray-300 rounded mr-2", value: newAssetType, onChange: handleAssetTypeChange, placeholder: "新しい資産の種類", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "py-2 px-4 bg-green-600 text-white rounded", onClick: handleAddAssetType, __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, assetTypes.map((assetType, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex-1", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, assetType), /*#__PURE__*/ React.createElement("button", { type: "button", className: "py-1 px-3 bg-red-600 text-white rounded", onClick: ()=>handleDeleteAssetType(assetType), __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "削除"))))), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse bg-white text-left text-sm", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border-b p-4 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "入出金日"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-4 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "金額"), assetTypes.map((assetType)=>/*#__PURE__*/ React.createElement("th", { key: assetType, className: "border-b p-4 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, assetType)), /*#__PURE__*/ React.createElement("th", { className: "border-b p-4 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "残高"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b p-4", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, transaction.date), /*#__PURE__*/ React.createElement("td", { className: "border-b p-4", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, transaction.amount), assetTypes.map((assetType)=>/*#__PURE__*/ React.createElement("td", { key: assetType, className: "border-b p-4", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this }, transaction.type === assetType || transaction.transferTo === assetType ? transaction.amount : "")), /*#__PURE__*/ React.createElement("td", { className: "border-b p-4", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, calculateBalance(transaction.type)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-xl font-bold", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, "総残高: ", calculateTotalBalance())); }