function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [products, setProducts] = React.useState([ { productName: "", productQuantity: "" } ]); const [orders, setOrders] = React.useState([]); const [supplier, setSupplier] = React.useState(""); const [estimatedArrivalDate, setEstimatedArrivalDate] = React.useState(""); const addProduct = ()=>setProducts([ ...products, { productName: "", productQuantity: "" } ]); const handleCreateOrder = (e)=>{ e.preventDefault(); const newOrder = { supplier, estimatedArrivalDate, products: products.map((p)=>`${p.productName} (${p.productQuantity})`).join(', '), id: orders.length + 1, status: "Pending" }; setOrders([ ...orders, newOrder ]); setProducts([ { productName: "", productQuantity: "" } ]); setSupplier(""); setEstimatedArrivalDate(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f9f9f9]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#ffffff] shadow-md py-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#333]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Purchase Order Manager"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "username", value: username, onChange: (e)=>setUsername(e.target.value), placeholder: "Username", className: "p-2 border rounded-md col-span-1", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Password", className: "p-2 border rounded-md col-span-1", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Create Purchase Order"), /*#__PURE__*/ React.createElement("form", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", onSubmit: handleCreateOrder, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "supplier", placeholder: "Supplier Name", value: supplier, onChange: (e)=>setSupplier(e.target.value), className: "p-2 border rounded-md", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "estimatedArrivalDate", placeholder: "Estimated Arrival Date", value: estimatedArrivalDate, onChange: (e)=>setEstimatedArrivalDate(e.target.value), className: "p-2 border rounded-md", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "col-span-1 md:col-span-2 lg:col-span-3 grid grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: `productName${index}`, value: product.productName, onChange: (e)=>{ const updatedProducts = [ ...products ]; updatedProducts[index].productName = e.target.value; setProducts(updatedProducts); }, placeholder: "Product Name", className: "p-2 border rounded-md col-span-2", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: `productQuantity${index}`, value: product.productQuantity, onChange: (e)=>{ const updatedProducts = [ ...products ]; updatedProducts[index].productQuantity = e.target.value; setProducts(updatedProducts); }, placeholder: "Quantity", className: "p-2 border rounded-md", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }), index === products.length - 1 && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: (e)=>{ e.preventDefault(); addProduct(); }, className: "bg-[#007bff] text-white p-2 rounded-md col-span-1", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, "Add Product"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4CAF50] text-white p-2 rounded-md col-span-1 md:col-span-2 lg:col-span-3", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Create Order"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-[#333] mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "List of Purchase Orders"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "text-left p-2 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, "ID"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, "Supplier"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }, "Estimated Arrival Date"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "text-left p-2 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, "Products"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, orders.map((order)=>/*#__PURE__*/ React.createElement("tr", { key: order.id, __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 108, columnNumber: 21 }, __self: this }, order.id), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 109, columnNumber: 21 }, __self: this }, order.supplier), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 110, columnNumber: 21 }, __self: this }, order.estimatedArrivalDate), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, order.status), /*#__PURE__*/ React.createElement("td", { className: "p-2", __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, order.products))))))))); }