function MainComponent({ transactions, onAddTransaction, onDeleteTransaction, onCalculateExchangeDifference, onConvertToCurrency, exchangeRate, onUpdateExchangeRate, onEditTransaction, onAutoBalanceCheck, onGenerateLedger, onBackup, onFetchExchangeRate }) { const currencyOptions = [ 'JPY', 'USD' ]; const accountOptions = [ 'tebex', 'paypal', 'bank', '-' ]; const debitAccounts = [ '売掛金', '売上', '現金預金', '雑収入', '事業外収入', 'ソフトウェア', '定期支払', '事業主借', '事業主貸' ]; const creditAccounts = [ '売掛金', '売上', '現金預金', '交際費', '地代家賃', '通信費', '水道光熱費', '支払手数料', '事業主貸', '立替金', 'ソフトウェア', '雑費', '元入金', '売上高', '賞与', '外注費' ]; const [editingIndex, setEditingIndex] = React.useState(null); const [selectedTransactions, setSelectedTransactions] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const transaction = Object.fromEntries(formData.entries()); transaction.debit = parseFloat(transaction.debit); transaction.credit = parseFloat(transaction.credit); transaction.fee = transaction.fee ? parseFloat(transaction.fee) : null; transaction.exchangeDifference = transaction.exchangeDifference ? parseFloat(transaction.exchangeDifference) : null; if (editingIndex !== null) { onEditTransaction(editingIndex, transaction); setEditingIndex(null); } else { onAddTransaction(transaction); } event.target.reset(); }; const handleTransactionSelect = (index, isChecked)=>{ if (isChecked) { setSelectedTransactions([ ...selectedTransactions, index ]); } else { setSelectedTransactions(selectedTransactions.filter((i)=>i !== index)); } if (selectedTransactions.length === 2) { onCalculateExchangeDifference(selectedTransactions[0], selectedTransactions[1]); setSelectedTransactions([]); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-sans", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "複式帳簿システム"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "新規取引入力"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", className: "border rounded px-2 py-1", required: true, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "収支"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center mr-4", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "transactionType", value: "income", className: "mr-1", required: true, __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "収入")), /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "transactionType", value: "expense", className: "mr-1", __source: { fileName: "", lineNumber: 74, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, "支出"))))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "借方"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "debit", step: "0.01", className: "border rounded px-2 py-1", required: true, __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "debitCurrency", className: "border rounded px-2 py-1 ml-2", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, currencyOptions.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency, value: currency, __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, currency))), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, debitAccounts.map((account)=>/*#__PURE__*/ React.createElement("label", { key: account, className: "inline-flex items-center mr-2", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "debitAccount", value: account, className: "mr-1", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }, account))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "貸方"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "credit", step: "0.01", className: "border rounded px-2 py-1", required: true, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "creditCurrency", className: "border rounded px-2 py-1 ml-2", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, currencyOptions.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency, value: currency, __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, currency))), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, creditAccounts.map((account)=>/*#__PURE__*/ React.createElement("label", { key: account, className: "inline-flex items-center mr-2", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "creditAccount", value: account, className: "mr-1", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, account)))))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "手数料"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fee", step: "0.01", className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "feeCurrency", className: "border rounded px-2 py-1 ml-2", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, currencyOptions.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency, value: currency, __source: { fileName: "", lineNumber: 122, columnNumber: 19 }, __self: this }, currency)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "為替差損益"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "exchangeDifference", step: "0.01", className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "exchangeDifferenceCurrency", className: "border rounded px-2 py-1 ml-2", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, currencyOptions.map((currency)=>/*#__PURE__*/ React.createElement("option", { key: currency, value: currency, __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, currency))))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, "借方口座"), /*#__PURE__*/ React.createElement("select", { name: "debitAccountType", className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, accountOptions.map((account)=>/*#__PURE__*/ React.createElement("option", { key: account, value: account, __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, account)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, "貸方口座"), /*#__PURE__*/ React.createElement("select", { name: "creditAccountType", className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }, accountOptions.map((account)=>/*#__PURE__*/ React.createElement("option", { key: account, value: account, __source: { fileName: "", lineNumber: 149, columnNumber: 19 }, __self: this }, account))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-1", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, "メモ"), /*#__PURE__*/ React.createElement("textarea", { name: "memo", className: "border rounded px-2 py-1 w-full", rows: "3", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, editingIndex !== null ? '更新' : '追加'))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, "為替レート (JPY/USD)"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: exchangeRate, onChange: (e)=>onUpdateExchangeRate(e.target.value), step: "0.0001", className: "border rounded px-2 py-1", __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: onFetchExchangeRate, className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "TTMレート取得"))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 180, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onAutoBalanceCheck, className: "bg-yellow-500 text-white px-4 py-2 rounded mr-2", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, "自動バランスチェック"), /*#__PURE__*/ React.createElement("button", { onClick: onGenerateLedger, className: "bg-purple-500 text-white px-4 py-2 rounded mr-2", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, "総勘定元帳生成"), /*#__PURE__*/ React.createElement("button", { onClick: onBackup, className: "bg-gray-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, "バックアップ")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, "取引履歴"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 194, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 198, columnNumber: 15 }, __self: this }, "収支"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "借方"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 200, columnNumber: 15 }, __self: this }, "貸方"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, "手数料"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, "為替差損益"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, "借方口座"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 204, columnNumber: 15 }, __self: this }, "貸方口座"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, "メモ"), /*#__PURE__*/ React.createElement("th", { className: "border p-2", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, "操作"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 209, columnNumber: 11 }, __self: this }, transactions.map((transaction, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: transaction.transactionType === 'income' ? 'text-blue-600' : 'text-red-600', __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, transaction.date), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, transaction.transactionType === 'income' ? '収入' : '支出'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, transaction.debit.toFixed(2), " ", transaction.debitCurrency), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 215, columnNumber: 17 }, __self: this }, transaction.credit.toFixed(2), " ", transaction.creditCurrency), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 216, columnNumber: 17 }, __self: this }, transaction.fee ? transaction.fee.toFixed(2) + ' ' + transaction.feeCurrency : '-'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 217, columnNumber: 17 }, __self: this }, transaction.exchangeDifference ? transaction.exchangeDifference.toFixed(2) + ' ' + transaction.exchangeDifferenceCurrency : '-'), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, transaction.debitAccountType), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, transaction.creditAccountType), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 220, columnNumber: 17 }, __self: this }, transaction.memo), /*#__PURE__*/ React.createElement("td", { className: "border p-2", __source: { fileName: "", lineNumber: 221, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onDeleteTransaction(index), className: "text-red-500 mr-2", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditingIndex(index), className: "text-blue-500 mr-2", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: selectedTransactions.includes(index), onChange: (e)=>handleTransactionSelect(index, e.target.checked), __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("button", { onClick: onConvertToCurrency, className: "mt-4 bg-purple-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 238, columnNumber: 9 }, __self: this }, "日本円に換算"))); } function StoryComponent() { const [transactions, setTransactions] = React.useState([ { date: '2023-05-01', transactionType: 'income', debit: 1000.00, debitCurrency: 'USD', credit: 110000.00, creditCurrency: 'JPY', fee: 10.00, feeCurrency: 'USD', exchangeDifference: 5.00, exchangeDifferenceCurrency: 'USD', debitAccountType: 'paypal', creditAccountType: 'bank', memo: 'テスト取引1' }, { date: '2023-05-02', transactionType: 'expense', debit: 500.00, debitCurrency: 'USD', credit: 60000.00, creditCurrency: 'JPY', fee: null, feeCurrency: null, exchangeDifference: null, exchangeDifferenceCurrency: null, debitAccountType: 'bank', creditAccountType: 'tebex', memo: 'テスト取引2' } ]); const [exchangeRate, setExchangeRate] = React.useState(110.5); const handleAddTransaction = (transaction)=>{ setTransactions([ ...transactions, transaction ]); }; const handleDeleteTransaction = (index)=>{ setTransactions(transactions.filter((_, i)=>i !== index)); }; const handleCalculateExchangeDifference = (index1, index2)=>{}; const handleConvertToCurrency = ()=>{}; const handleUpdateExchangeRate = (newRate)=>{ setExchangeRate(parseFloat(newRate)); }; const handleEditTransaction = (index, updatedTransaction)=>{ const newTransactions = [ ...transactions ]; newTransactions[index] = updatedTransaction; setTransactions(newTransactions); }; const handleAutoBalanceCheck = ()=>{}; const handleGenerateLedger = ()=>{}; const handleBackup = ()=>{}; const handleFetchExchangeRate = ()=>{}; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 319, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { transactions: transactions, onAddTransaction: handleAddTransaction, onDeleteTransaction: handleDeleteTransaction, onCalculateExchangeDifference: handleCalculateExchangeDifference, onConvertToCurrency: handleConvertToCurrency, exchangeRate: exchangeRate, onUpdateExchangeRate: handleUpdateExchangeRate, onEditTransaction: handleEditTransaction, onAutoBalanceCheck: handleAutoBalanceCheck, onGenerateLedger: handleGenerateLedger, onBackup: handleBackup, onFetchExchangeRate: handleFetchExchangeRate, __source: { fileName: "", lineNumber: 320, columnNumber: 7 }, __self: this })); }

日付	収支	借方	貸方	手数料	為替差損益	借方口座	貸方口座	メモ	操作
2023-05-01	収入	1000.00 USD	110000.00 JPY	10.00 USD	5.00 USD	paypal	bank	テスト取引1
2023-05-02	支出	500.00 USD	60000.00 JPY	-	-	bank	tebex	テスト取引2