function MainComponent() { const [records, setRecords] = React.useState([]); const [newProduct, setNewProduct] = React.useState(""); const [quantity, setQuantity] = React.useState(0); const [price, setPrice] = React.useState(0); const [updateIndex, setUpdateIndex] = React.useState(null); const [search, setSearch] = React.useState(""); const handleAddRecord = ()=>{ const totalPriceWithoutTax = price * quantity; const record = { product: newProduct, quantity, price, totalPriceWithoutTax, tax: totalPriceWithoutTax * 0.1, totalPriceWithTax: totalPriceWithoutTax * 1.1 }; if (updateIndex !== null) { const updatedRecords = records.map((rec, index)=>index === updateIndex ? record : rec); setRecords(updatedRecords); setUpdateIndex(null); } else { setRecords([ ...records, record ]); } setNewProduct(""); setQuantity(0); setPrice(0); }; const handleDeleteRecord = (index)=>{ setRecords(records.filter((_, i)=>i !== index)); }; const handleInquiryRecord = ()=>{ alert("Record and payment details have been saved."); }; const handleUpdateRecord = (index)=>{ const record = records[index]; setUpdateIndex(index); setNewProduct(record.product); setQuantity(record.quantity); setPrice(record.price); }; const handleSearch = ()=>{ if (search === "") { return records; } return records.filter((record)=>record.product.toLowerCase().includes(search.toLowerCase())); }; const filteredRecords = handleSearch(); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow w-[400px]", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 mr-2 border border-gray-300 rounded font-roboto", name: "product", value: newProduct, onChange: (e)=>setNewProduct(e.target.value), placeholder: "Product", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded font-roboto", onClick: ()=>setSearch(newProduct), __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 mb-4 border border-gray-300 rounded font-roboto", name: "quantity", value: quantity, onChange: (e)=>setQuantity(Number(e.target.value)), placeholder: "Quantity", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 mb-4 border border-gray-300 rounded font-roboto", name: "price", value: price, onChange: (e)=>setPrice(Number(e.target.value)), placeholder: "Price", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4 font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mr-2 w-full", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Tax: ", (price * quantity * 0.1).toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "ml-2 w-full", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Total (with tax): ", (price * quantity * 1.1).toFixed(2)))), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 mb-2 bg-green-500 text-white rounded font-roboto", onClick: handleAddRecord, __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, updateIndex !== null ? "Update Record" : "Add Record"), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 mb-4 bg-yellow-500 text-white rounded font-roboto", onClick: handleInquiryRecord, __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "Inquiry"), /*#__PURE__*/ React.createElement("ul", { className: "mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, filteredRecords.map((record, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex flex-col p-2 border-b border-gray-300", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, "Product: ", record.product), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Quantity: ", record.quantity), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }, "Price: ", record.price), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Total Price (w/o Tax): ", record.totalPriceWithoutTax), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "Tax Amount: ", record.tax), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "Total Price (w/ Tax): ", record.totalPriceWithTax), /*#__PURE__*/ React.createElement("div", { className: "flex mt-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 mr-2 text-white bg-blue-500 rounded font-roboto", onClick: ()=>handleUpdateRecord(index), __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, "Update"), /*#__PURE__*/ React.createElement("button", { className: "p-2 mr-2 text-white bg-red-500 rounded font-roboto", onClick: ()=>handleDeleteRecord(index), __source: { fileName: "", lineNumber: 135, columnNumber: 17 }, __self: this }, "Delete"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/battle-with-slime.png", alt: "戦闘中のスライム", className: "w-[400px] h-[400px] object-cover", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/sex-scene.png", alt: "セックスシーン", className: "w-[400px] h-[400px] object-cover", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this })))); }