function MainComponent() { const [categories, setCategories] = React.useState([ { name: "Electronics", subcategories: [] }, { name: "Apparel", subcategories: [] }, { name: "Furniture", subcategories: [] }, { name: "Toys", subcategories: [] } ]); const [selectedCategory, setSelectedCategory] = React.useState(null); const [searchTerm, setSearchTerm] = React.useState(""); const [filteredProducts, setFilteredProducts] = React.useState([]); const [selectedSubcategory, setSelectedSubcategory] = React.useState(null); const [allProducts, setAllProducts] = React.useState({ Electronics: [ { name: "Laptop", stock: 10, description: "", image: "" }, { name: "Smartphone", stock: 15, description: "", image: "" } ], Apparel: [ { name: "T-Shirt", stock: 30, description: "", image: "" }, { name: "Jeans", stock: 20, description: "", image: "" } ], Furniture: [ { name: "Sofa", stock: 5, description: "", image: "" }, { name: "Table", stock: 8, description: "", image: "" } ], Toys: [ { name: "Action Figure", stock: 25, description: "", image: "" }, { name: "Board Game", stock: 12, description: "", image: "" } ] }); const [mode, setMode] = React.useState("view"); const [logData, setLogData] = React.useState([]); const handleCategoryClick = (category)=>{ setSelectedCategory(category); setFilteredProducts(allProducts[category.name]); setMode("view"); }; const handleSubcategoryClick = (subcategory)=>{ setSelectedSubcategory(subcategory); if (selectedCategory) { setFilteredProducts(allProducts[subcategory.name]); setMode("view"); } }; const handleSearch = (event)=>{ const term = event.target.value.toLowerCase(); setSearchTerm(term); if (selectedCategory || selectedSubcategory) { const filtered = allProducts[selectedCategory?.name || selectedSubcategory?.name]?.filter((product)=>product.name.toLowerCase().includes(term)); setFilteredProducts(filtered); } }; const handleAddStock = (productName)=>{ const updatedProducts = { ...allProducts }; const categoryKey = selectedCategory?.name || selectedSubcategory?.name; updatedProducts[categoryKey] = updatedProducts[categoryKey].map((product)=>product.name === productName ? { ...product, stock: product.stock + 1 } : product); setAllProducts(updatedProducts); setFilteredProducts(updatedProducts[categoryKey].filter((product)=>product.name.toLowerCase().includes(searchTerm))); setLogData([ ...logData, { product: productName, action: "add", timestamp: new Date().toLocaleString() } ]); }; const handleSubtractStock = (productName)=>{ const updatedProducts = { ...allProducts }; const categoryKey = selectedCategory?.name || selectedSubcategory?.name; updatedProducts[categoryKey] = updatedProducts[categoryKey].map((product)=>product.name === productName ? { ...product, stock: Math.max(product.stock - 1, 0) } : product); setAllProducts(updatedProducts); setFilteredProducts(updatedProducts[categoryKey].filter((product)=>product.name.toLowerCase().includes(searchTerm))); setLogData([ ...logData, { product: productName, action: "subtract", timestamp: new Date().toLocaleString() } ]); }; const handleAddProduct = ()=>{ if (selectedCategory || selectedSubcategory) { const newProduct = { name: "New Product", stock: 1, description: "", image: "" }; const categoryKey = selectedCategory?.name || selectedSubcategory?.name; const updatedProducts = { ...allProducts, [categoryKey]: [ ...allProducts[categoryKey], newProduct ] }; setAllProducts(updatedProducts); setFilteredProducts(updatedProducts[categoryKey].filter((product)=>product.name.toLowerCase().includes(searchTerm))); } }; const handleUpdateProduct = (productName, key, value)=>{ const updatedProducts = { ...allProducts }; const categoryKey = selectedCategory?.name || selectedSubcategory?.name; updatedProducts[categoryKey] = updatedProducts[categoryKey].map((product)=>product.name === productName ? { ...product, [key]: value } : product); setAllProducts(updatedProducts); setFilteredProducts(updatedProducts[categoryKey].filter((product)=>product.name.toLowerCase().includes(searchTerm))); }; const handleFileInputChange = (productName, event)=>{ const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = ()=>{ handleUpdateProduct(productName, 'image', reader.result); }; reader.readAsDataURL(file); }; const handleAddCategory = ()=>{ const newCategory = { name: "New Category", subcategories: [] }; setCategories([ ...categories, newCategory ]); }; const handleAddSubcategory = (category)=>{ const newSubcategory = { name: "New Subcategory" }; const updatedCategories = categories.map((cat)=>cat.name === category.name ? { ...cat, subcategories: [ ...cat.subcategories, newSubcategory ] } : cat); setCategories(updatedCategories); }; const handleLogView = ()=>{ setMode("log"); }; const renderLog = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 5 }, __self: this }, logData.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-400 rounded shadow mb-2", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, entry.timestamp), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, entry.product, ": ", entry.action))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("view"), className: "px-4 py-2 bg-gray-500 text-white rounded", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, "Back")); const categoryItems = categories.map((category)=>/*#__PURE__*/ React.createElement("div", { key: category.name, className: "p-4 border border-gray-400 rounded shadow hover:bg-gray-100 cursor-pointer", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { onClick: ()=>handleCategoryClick(category), className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, category.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddSubcategory(category), className: "px-2 py-1 bg-blue-500 text-white rounded mt-2", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, "Add Subcategory"), category.subcategories.map((subcategory)=>/*#__PURE__*/ React.createElement("div", { key: subcategory.name, className: "ml-4 mt-2", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { onClick: ()=>handleSubcategoryClick(subcategory), className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, subcategory.name))))); const productItems = filteredProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.name, className: "p-4 border border-gray-400 rounded shadow mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-crimson-text", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-crimson-text", __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }, "Stock: ", product.stock), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { disabled: mode !== "edit", onClick: ()=>handleAddStock(product.name), className: "px-2 py-1 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, "+"), /*#__PURE__*/ React.createElement("button", { disabled: mode !== "edit", onClick: ()=>handleSubtractStock(product.name), className: "px-2 py-1 bg-red-500 text-white rounded", __source: { fileName: "", lineNumber: 164, columnNumber: 9 }, __self: this }, "-")), mode === "edit" && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "rename", placeholder: "Rename Product", value: product.name, onChange: (e)=>handleUpdateProduct(product.name, 'name', e.target.value), className: "w-full p-2 border border-gray-400 rounded mb-2", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "Add Description", value: product.description, onChange: (e)=>handleUpdateProduct(product.name, 'description', e.target.value), className: "w-full p-2 border border-gray-400 rounded mb-2", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", onChange: (e)=>handleFileInputChange(product.name, e), className: "w-full p-2 mb-2", __source: { fileName: "", lineNumber: 183, columnNumber: 11 }, __self: this }), product.image && /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Image of ${product.name}`, className: "w-[100px] h-[100px] object-cover", __source: { fileName: "", lineNumber: 189, columnNumber: 29 }, __self: this })))); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 196, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between", __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search products...", value: searchTerm, onChange: handleSearch, className: "w-full p-2 border border-gray-400 rounded mr-2", __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }), selectedCategory && mode === "edit" && /*#__PURE__*/ React.createElement("button", { onClick: handleAddProduct, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 207, columnNumber: 11 }, __self: this }, "Add Product"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode(mode === "view" ? "edit" : "view"), className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 209, columnNumber: 9 }, __self: this }, mode === "view" ? "Edit Mode" : "View Mode"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogView, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 212, columnNumber: 9 }, __self: this }, "View Log"), /*#__PURE__*/ React.createElement("button", { onClick: handleAddCategory, className: "px-4 py-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 213, columnNumber: 9 }, __self: this }, "Add Category")), mode !== 'log' && selectedCategory && /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedCategory(null); setSelectedSubcategory(null); }, className: "mb-4 px-4 py-2 bg-gray-500 text-white rounded", __source: { fileName: "", lineNumber: 216, columnNumber: 9 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("div", { className: `grid ${selectedCategory ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'} gap-4`, __source: { fileName: "", lineNumber: 218, columnNumber: 7 }, __self: this }, mode === "log" ? renderLog : selectedCategory ? productItems : categoryItems)); }