function MainComponent({ transactions, onAddTransaction, onDeleteTransaction, onCalculateExchangeGain, exchangeRate, onUpdateExchangeRate, onConvertToCurrency }) { const [transactionInput, setTransactionInput] = React.useState({ debit: '', credit: '', amount: '', currency: 'JPY', fee: '', debit_account: '', credit_account: '', memo: '', transaction_type: '' }); const handleInputChange = (e)=>{ const { name, value, type, checked } = e.target; setTransactionInput((prev)=>({ ...prev, [name]: type === 'checkbox' ? checked : value })); }; const handleSubmit = (e)=>{ e.preventDefault(); onAddTransaction(transactionInput); setTransactionInput({ debit: '', credit: '', amount: '', currency: 'JPY', fee: '', debit_account: '', credit_account: '', memo: '', transaction_type: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "複式帳簿システム"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "取引入力"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "借方勘定科目"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, [ '売掛金', '売上', '現金預金', '雑収入', '事業外収入', 'ソフトウェア', '定期支払', '事業主借', '事業主貸' ].map((item)=>/*#__PURE__*/ React.createElement("label", { key: item, className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "debit", value: item, checked: transactionInput.debit === item, onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 21 }, __self: this }), item)))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "貸方勘定科目"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, [ '売掛金', '売上', '現金預金', '交際費', '地代家賃', '通信費', '水道光熱費', '支払手数料', '事業主貸', '立替金', 'ソフトウェア', '雑費', '元入金', '売上高', '賞与', '外注費' ].map((item)=>/*#__PURE__*/ React.createElement("label", { key: item, className: "flex items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "credit", value: item, checked: transactionInput.credit === item, onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 21 }, __self: this }), item))))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "借方口座"), /*#__PURE__*/ React.createElement("select", { name: "debit_account", value: transactionInput.debit_account, onChange: handleInputChange, className: "border p-1", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "tebex", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, "tebex"), /*#__PURE__*/ React.createElement("option", { value: "paypal", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, "paypal"), /*#__PURE__*/ React.createElement("option", { value: "bank", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, "銀行"), /*#__PURE__*/ React.createElement("option", { value: "none", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, "×"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "貸方口座"), /*#__PURE__*/ React.createElement("select", { name: "credit_account", value: transactionInput.credit_account, onChange: handleInputChange, className: "border p-1", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "tebex", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, "tebex"), /*#__PURE__*/ React.createElement("option", { value: "paypal", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this }, "paypal"), /*#__PURE__*/ React.createElement("option", { value: "bank", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "銀行"), /*#__PURE__*/ React.createElement("option", { value: "none", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, "×")))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "金額"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "amount", step: "0.01", value: transactionInput.amount, onChange: handleInputChange, className: "border p-1", required: true, __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "通貨"), /*#__PURE__*/ React.createElement("select", { name: "currency", value: transactionInput.currency, onChange: handleInputChange, className: "border p-1", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "JPY", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "JPY"), /*#__PURE__*/ React.createElement("option", { value: "USD", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, "USD"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "手数料"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fee", step: "0.01", value: transactionInput.fee, onChange: handleInputChange, className: "border p-1", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "メモ"), /*#__PURE__*/ React.createElement("textarea", { name: "memo", value: transactionInput.memo, onChange: handleInputChange, className: "border p-1 w-full", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "transaction_type", value: "income", checked: transactionInput.transaction_type === 'income', onChange: handleInputChange, className: "mr-2", required: true, __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }), "収入"), /*#__PURE__*/ React.createElement("label", { className: "flex items-center", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "transaction_type", value: "expense", checked: transactionInput.transaction_type === 'expense', onChange: handleInputChange, className: "mr-2", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }), "支出")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, "取引を追加"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, "為替レート (TTM)"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: exchangeRate, onChange: (e)=>onUpdateExchangeRate(e.target.value), step: "0.0001", className: "border p-1", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, "更新"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, "取引履歴"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, "借方"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, "貸方"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 170, columnNumber: 15 }, __self: this }, "金額"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, "通貨"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }, "手数料"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "為替差損益"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, "借方口座"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, "貸方口座"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "メモ"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "収支"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: transaction.transaction_type === 'income' ? 'text-blue-600' : 'text-red-600', __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, transaction.date), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 185, columnNumber: 17 }, __self: this }, transaction.debit), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 186, columnNumber: 17 }, __self: this }, transaction.credit), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, transaction.amount.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, transaction.currency), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, transaction.fee ? transaction.fee.toFixed(2) : '-'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, transaction.exchangeGain ? transaction.exchangeGain.toFixed(2) : '-'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, transaction.debit_account), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 192, columnNumber: 17 }, __self: this }, transaction.credit_account), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, transaction.memo), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 194, columnNumber: 17 }, __self: this }, transaction.transaction_type === 'income' ? '収入' : '支出'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDeleteTransaction(index), className: "text-red-500", __source: { fileName: "", lineNumber: 196, columnNumber: 19 }, __self: this }, "削除"), /*#__PURE__*/ React.createElement("input", { type: "checkbox", onChange: (e)=>onCalculateExchangeGain(index, e.target.checked), className: "ml-2", __source: { fileName: "", lineNumber: 197, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onConvertToCurrency(index), className: "ml-2 text-green-500", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this }, "円換算")))))))); } function StoryComponent() { const [transactions, setTransactions] = React.useState([ { date: '2023-05-01', debit: '売掛金', credit: '売上', amount: 1000, currency: 'USD', fee: 10, exchangeGain: null, debit_account: 'paypal', credit_account: 'bank', memo: 'サービス提供', transaction_type: 'income' }, { date: '2023-05-02', debit: '現金預金', credit: '支払手数料', amount: 500, currency: 'JPY', fee: null, exchangeGain: null, debit_account: 'bank', credit_account: 'none', memo: '手数料支払い', transaction_type: 'expense' } ]); const [exchangeRate, setExchangeRate] = React.useState(110.5); const handleAddTransaction = (newTransaction)=>{ setTransactions([ ...transactions, { ...newTransaction, date: new Date().toISOString().split('T')[0], exchangeGain: null } ]); }; const handleDeleteTransaction = (index)=>{ setTransactions(transactions.filter((_, i)=>i !== index)); }; const handleCalculateExchangeGain = (index, isChecked)=>{ if (isChecked && transactions[index].currency === 'USD') { const updatedTransactions = [ ...transactions ]; updatedTransactions[index].exchangeGain = transactions[index].amount * exchangeRate - transactions[index].amount * 110; setTransactions(updatedTransactions); } }; const handleUpdateExchangeRate = (newRate)=>{ setExchangeRate(parseFloat(newRate)); }; const handleConvertToCurrency = (index)=>{ const updatedTransactions = [ ...transactions ]; if (updatedTransactions[index].currency === 'USD') { updatedTransactions[index].amount = updatedTransactions[index].amount * exchangeRate; updatedTransactions[index].currency = 'JPY'; } setTransactions(updatedTransactions); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 274, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { transactions: transactions, onAddTransaction: handleAddTransaction, onDeleteTransaction: handleDeleteTransaction, onCalculateExchangeGain: handleCalculateExchangeGain, exchangeRate: exchangeRate, onUpdateExchangeRate: handleUpdateExchangeRate, onConvertToCurrency: handleConvertToCurrency, __source: { fileName: "", lineNumber: 275, columnNumber: 7 }, __self: this })); }

日付	借方	貸方	金額	通貨	手数料	為替差損益	借方口座	貸方口座	メモ	収支	操作
2023-05-01	売掛金	売上	1000.00	USD	10.00	-	paypal	bank	サービス提供	収入
2023-05-02	現金預金	支払手数料	500.00	JPY	-	-	bank	none	手数料支払い	支出