function ProductInventoryManager({ products, categories, onAddProduct, onOpenCategoryDialog, onOpenProductDialog }) { const [isProductDialogOpen, setIsProductDialogOpen] = React.useState(false); const [isCategoryDialogOpen, setIsCategoryDialogOpen] = React.useState(false); const [newProductName, setNewProductName] = React.useState(''); const [newProductCategory, setNewProductCategory] = React.useState(''); const handleAddProductClick = ()=>{ setIsProductDialogOpen(true); onOpenProductDialog(); }; const handleProductCreate = ()=>{ onAddProduct({ name: newProductName, category: newProductCategory }); setIsProductDialogOpen(false); setNewProductName(''); setNewProductCategory(''); }; const handleCategorySelect = (category)=>{ setNewProductCategory(category); setIsCategoryDialogOpen(false); }; return /*#__PURE__*/ React.createElement("div", { className: "main-section", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded font-semibold", onClick: handleAddProductClick, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Add New Product"), /*#__PURE__*/ React.createElement("div", { className: "product-list mt-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, products.map((product, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "product-item p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, product.category)))), isProductDialogOpen && /*#__PURE__*/ React.createElement("div", { className: "dialog fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded w-[300px]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "New Product"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", className: "w-full p-2 border mb-2", placeholder: "Product Name", value: newProductName, onChange: (e)=>setNewProductName(e.target.value), __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productCategory", className: "w-full p-2 border mb-2", placeholder: "Category", value: newProductCategory, onClick: ()=>setIsCategoryDialogOpen(true), readOnly: true, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-green-500 text-white rounded", onClick: handleProductCreate, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Create"))), isCategoryDialogOpen && /*#__PURE__*/ React.createElement("div", { className: "dialog fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded w-[300px]", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Select Category"), categories.map((category, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "category-item p-2 border-b border-gray-200 cursor-pointer", onClick: ()=>handleCategorySelect(category), __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, category))), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white rounded mt-2", onClick: onOpenCategoryDialog, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Add New Category")))); } function ProductInventoryManagerStory() { const [products, setProducts] = React.useState([ { name: 'Product1', category: 'Category1' }, { name: 'Product2', category: 'Category2' } ]); const [categories, setCategories] = React.useState([ 'Category1', 'Category2' ]); const handleAddProduct = (product)=>{ setProducts([ ...products, product ]); }; const handleOpenProductDialog = ()=>{}; const handleOpenCategoryDialog = ()=>{ const newCategory = prompt('Enter new category:'); setCategories([ ...categories, newCategory ]); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductInventoryManager, { products: products, categories: categories, onAddProduct: handleAddProduct, onOpenProductDialog: handleOpenProductDialog, onOpenCategoryDialog: handleOpenCategoryDialog, __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this })); } function MainComponent() { const [products, setProducts] = React.useState([ { name: 'Product1', category: 'Category1' }, { name: 'Product2', category: 'Category2' } ]); const [categories, setCategories] = React.useState([ 'Category1', 'Category2' ]); const handleAddProduct = (product)=>{ setProducts([ ...products, product ]); }; const handleOpenProductDialog = ()=>{}; const handleOpenCategoryDialog = ()=>{ const newCategory = prompt('Enter new category:'); setCategories([ ...categories, newCategory ]); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductInventoryManager, { products: products, categories: categories, onAddProduct: handleAddProduct, onOpenProductDialog: handleOpenProductDialog, onOpenCategoryDialog: handleOpenCategoryDialog, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); }