function MainComponent() { const [products, setProducts] = React.useState([ { productCode: "P001", name: "Product 1", barcode: "123456789012", variants: [] }, { productCode: "P002", name: "Product 2", barcode: "987654321098", variants: [] } ]); const [showForm, setShowForm] = React.useState(false); const [showProductDetail, setShowProductDetail] = React.useState(false); const [selectedProduct, setSelectedProduct] = React.useState(null); const [productCode, setProductCode] = React.useState(''); const [productName, setProductName] = React.useState(''); const [formFields, setFormFields] = React.useState([ { colorName: "", barcode: "" } ]); const handleAddProduct = ()=>{ const newProduct = { productCode, name: productName, barcode: "", variants: formFields }; setProducts([ ...products, newProduct ]); setShowForm(false); resetForm(); }; const handleVariantAddition = ()=>{ setFormFields([ ...formFields, { colorName: "", barcode: "" } ]); }; const handleInputChange = (index, field, value)=>{ const updatedFields = formFields.map((item, i)=>index === i ? { ...item, [field]: value } : item); setFormFields(updatedFields); }; const resetForm = ()=>{ setProductCode(''); setProductName(''); setFormFields([ { colorName: "", barcode: "" } ]); }; const handleCancel = ()=>{ setShowForm(false); resetForm(); }; const showProductInfo = (product)=>{ setSelectedProduct(product); setShowProductDetail(true); }; const handleBack = ()=>{ setShowProductDetail(false); }; const productListView = products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>showProductInfo(product), className: "cursor-pointer p-2 hover:bg-gray-100", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, product.productCode, " - ", product.name), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "View"), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "Edit"), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Delete"))); const productDetailView = selectedProduct && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "Product Code: ", selectedProduct.productCode), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Name: ", selectedProduct.name), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Barcode: ", selectedProduct.barcode), selectedProduct.variants.map((variant, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, variant.colorName, " - ", variant.barcode)), /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Back")); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto w-full h-screen flex flex-col", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#f0f8ff]", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowForm(true), className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Add New Product")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 bg-white", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, showForm ? /*#__PURE__*/ React.createElement("form", { className: "space-y-3", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "productCode", type: "text", value: productCode, onChange: (e)=>setProductCode(e.target.value), placeholder: "Product Code", className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "productName", type: "text", value: productName, onChange: (e)=>setProductName(e.target.value), placeholder: "Product Name", className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }), formFields.map((field, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex space-x-3", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: `colorName-${index}`, type: "text", value: field.colorName, onChange: (e)=>handleInputChange(index, "colorName", e.target.value), placeholder: "Color Name", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: `barcode-${index}`, type: "number", value: field.barcode, onChange: (e)=>handleInputChange(index, "barcode", e.target.value), placeholder: "Barcode", className: "p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleVariantAddition, className: "py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, "Add Variant"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleCancel, className: "py-2 px-4 bg-red-500 hover:bg-red-700 text-white font-bold rounded", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleAddProduct, className: "py-2 px-4 bg-green-500 hover:bg-green-700 text-white font-bold rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Add"))) : showProductDetail ? productDetailView : productListView)); }