function ReceiptManagementTable({ receipts, handleAdd, handleEdit, modalOpen, handleChange, handleSave, setModalOpen, modalData }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: handleAdd, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "追加")), /*#__PURE__*/ React.createElement("table", { className: "w-full text-left border-collapse", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "チェック"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, "金額"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, "店名"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, "購入品目"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, "勘定科目"), /*#__PURE__*/ React.createElement("th", { className: "p-2 border-b font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "編集"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, receipts.map((entry, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "odd:bg-[#e2e8f0] even:bg-[#ccd5e1]", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `checkbox-${index}`, __source: { fileName: "", lineNumber: 22, columnNumber: 44 }, __self: this })), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, entry.date), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, entry.amount), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, entry.name), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, entry.item), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, entry.subject), /*#__PURE__*/ React.createElement("td", { className: "p-2 border-b", __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-500 hover:underline", onClick: ()=>handleEdit(index), __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this }, "編集")))))), modalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex justify-center items-center bg-gray-500 bg-opacity-75", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "日付"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "date", value: modalData.date || '', onChange: handleChange, className: "w-full p-2 border", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "金額"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "amount", value: modalData.amount || '', onChange: handleChange, className: "w-full p-2 border", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "店名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", value: modalData.name || '', onChange: handleChange, className: "w-full p-2 border", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "購入品目"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "item", value: modalData.item || '', onChange: handleChange, className: "w-full p-2 border", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-4 py-2 rounded mr-2", onClick: ()=>setModalOpen(false), __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "キャンセル"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: handleSave, __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "保存"))))); } function ReceiptManagementTableStory() { const [receipts, setReceipts] = React.useState([ { date: '2023-04-22', amount: '2000', name: 'Store A', item: 'Item 1', subject: 'Subject 1' }, { date: '2023-04-23', amount: '3000', name: 'Store B', item: 'Item 2', subject: 'Subject 2' } ]); const [modalOpen, setModalOpen] = React.useState(false); const [modalData, setModalData] = React.useState({}); const handleAdd = ()=>{ // Add logic here }; const handleEdit = (index)=>{ setModalData(receipts[index]); setModalOpen(true); }; const handleChange = (event)=>{ const { name, value } = event.target; setModalData((prevData)=>({ ...prevData, [name]: value })); }; const handleSave = ()=>{ // Save logic here setModalOpen(false); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 98, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReceiptManagementTable, { receipts: receipts, handleAdd: handleAdd, handleEdit: handleEdit, modalOpen: modalOpen, handleChange: handleChange, handleSave: handleSave, setModalOpen: setModalOpen, modalData: modalData, __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this })); } function MainComponent() { const randomDate = ()=>{ const start = new Date(2020, 0, 1); const end = new Date(); const date = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); return `${date.getFullYear()}/${('0' + (date.getMonth() + 1)).slice(-2)}/${('0' + date.getDate()).slice(-2)}`; }; const randomAmount = ()=>Math.floor(Math.random() * 9000 + 1000).toLocaleString() + '円'; const randomNames = [ 'コンビニ', 'スーパー', '書店', 'カフェ', '電気店' ]; const randomItems = [ 'サンドイッチ', 'ミネラルウォーター', '雑誌', 'コーヒー', 'イヤホン' ]; const getSubject = (item)=>{ const subjects = { 'サンドイッチ': '食費', 'ミネラルウォーター': '飲料費', '雑誌': '娯楽費', 'コーヒー': '飲み物', 'イヤホン': '雑費' }; return subjects[item] || 'その他'; }; const initialData = Array.from({ length: 5 }, ()=>{ const item = randomItems[Math.floor(Math.random() * randomItems.length)]; return { date: randomDate(), amount: randomAmount(), name: randomNames[Math.floor(Math.random() * randomNames.length)], item: item, subject: getSubject(item) }; }); const [receipts, setReceipts] = React.useState(initialData); const [modalOpen, setModalOpen] = React.useState(false); const [modalData, setModalData] = React.useState({}); const [editingIndex, setEditingIndex] = React.useState(null); const handleAdd = ()=>{ setModalData({}); setEditingIndex(null); setModalOpen(true); }; const handleEdit = (index)=>{ setModalData(receipts[index]); setEditingIndex(index); setModalOpen(true); }; const handleSave = ()=>{ const newReceipts = [ ...receipts ]; const newData = { ...modalData }; newData.subject = getSubject(modalData.item); if (editingIndex !== null) { newReceipts[editingIndex] = newData; } else { newData.date = randomDate(); newData.amount = randomAmount(); newReceipts.push(newData); } setReceipts(newReceipts); setModalOpen(false); }; const handleChange = (event)=>{ const { name, value } = event.target; setModalData({ ...modalData, [name]: value }); }; const resetReceipts = ()=>{ setReceipts([]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", onClick: handleAdd, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "追加"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white px-4 py-2 rounded ml-2", onClick: resetReceipts, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "リセット")), /*#__PURE__*/ React.createElement(ReceiptManagementTable, { receipts: receipts, handleAdd: handleAdd, handleEdit: handleEdit, modalOpen: modalOpen, handleChange: handleChange, handleSave: handleSave, setModalOpen: setModalOpen, modalData: modalData, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); }

日付	金額	店名	購入品目	勘定科目
2022/04/04	2,550円	書店	コーヒー	飲み物
2025/02/19	7,138円	書店	雑誌	娯楽費
2020/09/07	9,071円	カフェ	コーヒー	飲み物
2025/08/14	4,512円	スーパー	サンドイッチ	食費
2020/10/27	8,058円	書店	サンドイッチ	食費