function MainComponent() { const [products, setProducts] = React.useState([]); const [salesHistory, setSalesHistory] = React.useState([]); const [selectedProducts, setSelectedProducts] = React.useState([]); const [receivedAmount, setReceivedAmount] = React.useState(''); const handleRegisterProduct = (e)=>{ e.preventDefault(); const { name, price, quantity } = e.target.elements; const newProduct = { name: name.value, price: parseFloat(price.value), quantity: parseInt(quantity.value, 10) }; setProducts((prevProducts)=>[ ...prevProducts, newProduct ].sort((a, b)=>a.name.localeCompare(b.name))); e.target.reset(); }; const handleProductRightClick = (productName)=>(e)=>{ e.preventDefault(); setProducts((prevProducts)=>prevProducts.filter((product)=>product.name !== productName)); }; const handleRegisterPurchase = (e)=>{ e.preventDefault(); const inCart = []; selectedProducts.forEach((selectedProduct)=>{ const quantity = parseInt(e.target.elements[`quantity-${selectedProduct.name}`].value, 10); if (quantity && quantity > 0) { inCart.push({ ...selectedProduct, purchaseQuantity: quantity }); setProducts((prevProducts)=>prevProducts.map((product)=>product.name === selectedProduct.name ? { ...product, quantity: product.quantity - quantity } : product)); } }); const totalAmount = inCart.reduce((acc, { price, purchaseQuantity })=>acc + price * purchaseQuantity, 0); const received = parseFloat(receivedAmount); const change = received - totalAmount; const now = new Date().toLocaleString(); setSalesHistory((prevHistory)=>[ ...prevHistory, { time: now, items: inCart, total: totalAmount } ]); setReceivedAmount(''); }; const handleSalesRightClick = (saleTime)=>(e)=>{ e.preventDefault(); const saleToRemove = salesHistory.find((sale)=>sale.time === saleTime); if (saleToRemove) { setSalesHistory((prevHistory)=>prevHistory.filter((sale)=>sale.time !== saleTime)); saleToRemove.items.forEach(({ name, purchaseQuantity })=>{ setProducts((prevProducts)=>prevProducts.map((product)=>product.name === name ? { ...product, quantity: product.quantity + purchaseQuantity } : product)); }); } }; const totalSalesAmount = salesHistory.reduce((acc, { total })=>acc + total, 0); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between bg-gray-800 text-white p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "POS System"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Save"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Reset"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("li", { className: "bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Checkout"), /*#__PURE__*/ React.createElement("li", { className: "bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "History"), /*#__PURE__*/ React.createElement("li", { className: "bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Inventory"))), /*#__PURE__*/ React.createElement("section", { id: "register", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Register"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleRegisterProduct, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "price", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Register")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Registered Products"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "Price"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, "Quantity"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("tr", { key: product.name, onContextMenu: handleProductRightClick(product.name), __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, product.price), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, product.quantity))))))), /*#__PURE__*/ React.createElement("section", { id: "checkout", className: "mt-8", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, "Checkout"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleRegisterPurchase, __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.name, className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `product-${product.name}`, onClick: ()=>setSelectedProducts([ ...selectedProducts, product ]), __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 128, columnNumber: 19 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("input", { type: "number", name: `quantity-${product.name}`, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Register Purchase")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Purchase Summary"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 137, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 139, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 141, columnNumber: 19 }, __self: this }, "Quantity"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, "Total Price"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, selectedProducts.map((product, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, product.purchaseQuantity), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 150, columnNumber: 21 }, __self: this }, product.price * product.purchaseQuantity))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block", __source: { fileName: "", lineNumber: 156, columnNumber: 15 }, __self: this }, "Received Amount"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "receivedAmount", value: receivedAmount, onChange: (e)=>setReceivedAmount(e.target.value), className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4", onClick: handleRegisterPurchase, __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, "Complete")))), /*#__PURE__*/ React.createElement("section", { id: "history", className: "mt-8", __source: { fileName: "", lineNumber: 162, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, "History"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, "Time"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, "Sold Items"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 169, columnNumber: 17 }, __self: this }, "Total Sales"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, salesHistory.map((sale)=>/*#__PURE__*/ React.createElement("tr", { key: sale.time, onContextMenu: handleSalesRightClick(sale.time), __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, sale.time), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 176, columnNumber: 19 }, __self: this }, sale.items.map((item)=>`${item.name} x${item.purchaseQuantity}`).join(", ")), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, sale.total))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "Total Sales"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-2 rounded text-lg", __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, totalSalesAmount), /*#__PURE__*/ React.createElement("button", { type: "button", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, "Export CSV"))), /*#__PURE__*/ React.createElement("section", { id: "inventory", className: "mt-8", __source: { fileName: "", lineNumber: 190, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, "Inventory"), /*#__PURE__*/ React.createElement("table", { className: "w-full border-collapse", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-200", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, "Remaining Stock"), /*#__PURE__*/ React.createElement("th", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "Sold Quantity"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("tr", { key: product.name, __source: { fileName: "", lineNumber: 202, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 204, columnNumber: 19 }, __self: this }, product.quantity), /*#__PURE__*/ React.createElement("td", { className: "border border-gray-300 p-2", __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, salesHistory.reduce((acc, sale)=>acc + sale.items.filter((item)=>item.name === product.name).reduce((sum, item)=>sum + item.purchaseQuantity, 0), 0)))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 213, columnNumber: 13 }, __self: this }, "Total Sales"), /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 p-2 rounded text-lg", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, totalSalesAmount))))); }