function MainComponent({ transactions, exchangeRate, onTransactionSubmit, onExchangeRateUpdate }) { const [multipleEntries, setMultipleEntries] = React.useState([ { id: 0 } ]); const addEntry = ()=>{ setMultipleEntries([ ...multipleEntries, { id: multipleEntries.length } ]); }; const removeEntry = (id)=>{ setMultipleEntries(multipleEntries.filter((entry)=>entry.id !== id)); }; const accountOptions = [ { value: "売掛金", label: "売掛金" }, { value: "現金預金", label: "現金預金" }, { value: "支払手数料", label: "支払手数料" }, { value: "為替差損益", label: "為替差損益" }, { value: "売上", label: "売上" } ]; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "複式帳簿システム"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "為替レート (TTM)"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", className: "border rounded p-2 mr-2", value: exchangeRate, onChange: (e)=>onExchangeRateUpdate(e.target.value), __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "更新"))), /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const entries = multipleEntries.map((entry)=>({ date: formData.get(`date-${entry.id}`), transactionNumber: formData.get(`transactionNumber-${entry.id}`), debitAccount: formData.get(`debitAccount-${entry.id}`), debitAmount: formData.get(`debitAmount-${entry.id}`), creditAccount: formData.get(`creditAccount-${entry.id}`), creditAmount: formData.get(`creditAmount-${entry.id}`), useExchangeRate: formData.get(`useExchangeRate-${entry.id}`) === 'on', fees: formData.get(`fees-${entry.id}`), exchangeGainLoss: formData.get(`exchangeGainLoss-${entry.id}`) })); onTransactionSubmit(entries); }, className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "トランザクション入力"), multipleEntries.map((entry)=>/*#__PURE__*/ React.createElement("div", { key: entry.id, className: "mb-4 p-4 border rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { type: "date", name: `date-${entry.id}`, className: "border rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "取引番号"), /*#__PURE__*/ React.createElement("input", { type: "text", name: `transactionNumber-${entry.id}`, className: "border rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, "借方科目"), /*#__PURE__*/ React.createElement("select", { name: `debitAccount-${entry.id}`, className: "border rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "選択してください"), accountOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, option.label)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, "借方金額"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `debitAmount-${entry.id}`, className: "border rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "貸方科目"), /*#__PURE__*/ React.createElement("select", { name: `creditAccount-${entry.id}`, className: "border rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, "選択してください"), accountOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, option.label)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, "貸方金額"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `creditAmount-${entry.id}`, className: "border rounded p-2 w-full", required: true, __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `useExchangeRate-${entry.id}`, className: "mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }), "為替レートを適用")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "手数料"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `fees-${entry.id}`, className: "border rounded p-2 w-full", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "為替差損益"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `exchangeGainLoss-${entry.id}`, className: "border rounded p-2 w-full", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this })), multipleEntries.length > 1 && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>removeEntry(entry.id), className: "bg-red-500 text-white px-4 py-2 rounded mt-4", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "削除"))), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: addEntry, className: "bg-blue-500 text-white px-4 py-2 rounded mt-4 mr-4", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, "エントリー追加"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 text-white px-4 py-2 rounded mt-4", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "トランザクション一覧"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "取引番号"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "借方科目"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "借方金額"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, "貸方科目"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "貸方金額"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, "手数料"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "為替差損益"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, transaction.date), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, transaction.transactionNumber), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, transaction.debitAccount), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, transaction.debitAmount), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, transaction.creditAccount), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, transaction.creditAmount), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, transaction.fees || '-'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 148, columnNumber: 17 }, __self: this }, transaction.exchangeGainLoss || '-'))))))); } function StoryComponent() { const sampleTransactions = [ { date: '2023-07-10', transactionNumber: '①', debitAccount: '売掛金', debitAmount: 100000, creditAccount: '売上', creditAmount: 100000, fees: 0, exchangeGainLoss: 0 }, { date: '2023-07-10', transactionNumber: '②', debitAccount: '現金預金', debitAmount: 100000, creditAccount: '売掛金', creditAmount: 100000, fees: 0, exchangeGainLoss: 0 }, { date: '2023-07-11', transactionNumber: '③', debitAccount: '現金預金', debitAmount: 98000, creditAccount: '現金預金', creditAmount: 100000, fees: 2000, exchangeGainLoss: 0 }, { date: '2023-07-11', transactionNumber: '④', debitAccount: '支払手数料', debitAmount: 2000, creditAccount: '現金預金', creditAmount: 2000, fees: 0, exchangeGainLoss: 0 } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { transactions: sampleTransactions, exchangeRate: 110.5, onTransactionSubmit: (entries)=>console.log('Submitted entries:', entries), onExchangeRateUpdate: (rate)=>console.log('Updated exchange rate:', rate), __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this })); }

日付	取引番号	借方科目	借方金額	貸方科目	貸方金額	手数料	為替差損益
2023-07-10	①	売掛金	100000	売上	100000	-	-
2023-07-10	②	現金預金	100000	売掛金	100000	-	-
2023-07-11	③	現金預金	98000	現金預金	100000	2000	-
2023-07-11	④	支払手数料	2000	現金預金	2000	-	-