function FileUpload({ onUpload, error, loading }) { const [dragActive, setDragActive] = useState(false); const [selectedFile, setSelectedFile] = useState(null); const handleDrag = (e)=>{ e.preventDefault(); e.stopPropagation(); if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true); } else if (e.type === "dragleave") { setDragActive(false); } }; const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); setDragActive(false); const file = e.dataTransfer.files[0]; if (file && file.type === "text/csv") { setSelectedFile(file); onUpload?.(file); } }; const handleChange = (e)=>{ const file = e.target.files[0]; if (file && file.type === "text/csv") { setSelectedFile(file); onUpload?.(file); } }; return /*#__PURE__*/ React.createElement("div", { className: `w-full p-8 border-2 border-dashed rounded-lg ${dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300"} transition-colors duration-200 flex flex-col items-center justify-center`, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-csv text-4xl mb-4 text-gray-400", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "cursor-pointer font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Choose CSV File"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", accept: ".csv", onChange: handleChange, name: "csvFile", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this })), selectedFile && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Selected: ", selectedFile.name), error && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-red-500 font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-blue-500 font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Uploading...")); } function FileUploadStory() { const [upload, { loading }] = useUpload(); const [error, setError] = useState(null); const handleUpload = async (file)=>{ const { url, error } = await upload({ file }); if (error) { setError(error); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto p-4", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FileUpload, { onUpload: handleUpload, error: error, loading: loading, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this })); } function ExportButton({ data = [], filename = "export" }) { const [selectedMarketplace, setSelectedMarketplace] = useState("default"); const [isOpen, setIsOpen] = useState(false); const marketplaceTemplates = { default: (row)=>({ headers: Object.keys(row), format: (row)=>Object.values(row).join(",") }), amazon: (row)=>({ headers: [ "sku", "product-id", "product-id-type", "price", "quantity" ], format: (row)=>[ row.id, row.name.replace(/[^a-zA-Z0-9]/g, ""), "ASIN", row.price, row.stock ].join(",") }), ebay: (row)=>({ headers: [ "Action", "Title", "Price", "Quantity", "Product:EAN" ], format: (row)=>[ "Add", row.name, row.price, row.stock, `EAN${row.id}` ].join(",") }), shopify: (row)=>({ headers: [ "Handle", "Title", "Variant Price", "Variant Inventory Qty" ], format: (row)=>[ row.name.toLowerCase().replace(/\s+/g, "-"), row.name, row.price, row.stock ].join(",") }) }; const exportToCSV = ()=>{ if (!data.length) return; const template = marketplaceTemplates[selectedMarketplace](data[0]); const csvContent = [ template.headers.join(","), ...data.map((row)=>template.format(row)) ].join("\n"); const blob = new Blob([ csvContent ], { type: "text/csv" }); const url = window.URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${filename}-${selectedMarketplace}.csv`; link.click(); window.URL.revokeObjectURL(url); setIsOpen(false); }; return /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }), "Export"), isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedMarketplace("default"); exportToCSV(); }, className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-csv mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }), "Standard CSV"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedMarketplace("amazon"); exportToCSV(); }, className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-amazon mr-2", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }), "Amazon Format"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedMarketplace("ebay"); exportToCSV(); }, className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-ebay mr-2", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }), "eBay Format"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedMarketplace("shopify"); exportToCSV(); }, className: "w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-shopping-bag mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), "Shopify Format")))); } function ExportButtonStory() { const sampleData = [ { id: 1, name: "Item 1", price: 100, stock: 50 }, { id: 2, name: "Item 2", price: 200, stock: 30 }, { id: 3, name: "Item 3", price: 300, stock: 20 } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ExportButton, { data: sampleData, filename: "sample-export", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this })); } function ProductTable() { const [products, setProducts] = useState([ { id: 1, name: "Laptop", price: 999.99, stock: 50, marketplace: "Amazon", msrp: 1299.99, shippingCost: 15.99, stateRestrictions: "CA, NY" }, { id: 2, name: "Smartphone", price: 599.99, stock: 100, marketplace: "eBay", msrp: 699.99, shippingCost: 9.99, stateRestrictions: "" }, { id: 3, name: "Headphones", price: 99.99, stock: 200, marketplace: "Walmart", msrp: 129.99, shippingCost: 5.99, stateRestrictions: "AK, HI" } ]); const [editingCell, setEditingCell] = useState({ row: null, col: null }); const [errors, setErrors] = useState({}); const [sortConfig, setSortConfig] = useState({ key: null, direction: "ascending" }); const sortedProducts = React.useMemo(()=>{ let sortableProducts = [ ...products ]; if (sortConfig.key !== null) { sortableProducts.sort((a, b)=>{ if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === "ascending" ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === "ascending" ? 1 : -1; } return 0; }); } return sortableProducts; }, [ products, sortConfig ]); const requestSort = (key)=>{ let direction = "ascending"; if (sortConfig.key === key && sortConfig.direction === "ascending") { direction = "descending"; } setSortConfig({ key, direction }); }; const validateField = (field, value)=>{ switch(field){ case "name": return value.trim() ? null : "Name is required"; case "price": case "msrp": case "shippingCost": const numValue = Number(value); return numValue >= 0 ? null : "Must be a positive number"; case "stock": const stockValue = Number(value); return Number.isInteger(stockValue) && stockValue >= 0 ? null : "Must be a positive whole number"; default: return null; } }; const handleEdit = (id, field, value)=>{ const error = validateField(field, value); if (error) { setErrors((prev)=>({ ...prev, [id]: { ...prev[id], [field]: error } })); return; } setErrors((prev)=>{ const newErrors = { ...prev }; if (newErrors[id]) { delete newErrors[id][field]; if (Object.keys(newErrors[id]).length === 0) { delete newErrors[id]; } } return newErrors; }); setProducts(products.map((product)=>product.id === id ? { ...product, [field]: [ "price", "stock", "msrp", "shippingCost" ].includes(field) ? Number(value) : value } : product)); }; const marketplaces = [ "Amazon", "eBay", "Walmart" ]; const renderCell = (product, field, type = "text")=>{ const isEditing = editingCell.row === product.id && editingCell.col === field; const error = errors[product.id]?.[field]; const value = product[field]; if (isEditing) { return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, type === "select" ? /*#__PURE__*/ React.createElement("select", { className: `w-full px-2 py-1 border rounded ${error ? "border-red-500" : ""}`, defaultValue: value, onBlur: (e)=>{ handleEdit(product.id, field, e.target.value); setEditingCell({ row: null, col: null }); }, autoFocus: true, __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, marketplaces.map((m)=>/*#__PURE__*/ React.createElement("option", { key: m, value: m, __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, m))) : /*#__PURE__*/ React.createElement("input", { type: type, step: type === "number" ? "0.01" : undefined, className: `w-full px-2 py-1 border rounded ${error ? "border-red-500" : ""}`, defaultValue: value, onBlur: (e)=>{ handleEdit(product.id, field, e.target.value); setEditingCell({ row: null, col: null }); }, autoFocus: true, __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "absolute text-xs text-red-500 mt-1", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, error)); } return /*#__PURE__*/ React.createElement("div", { onClick: ()=>setEditingCell({ row: product.id, col: field }), className: `cursor-pointer ${error ? "text-red-500" : ""}`, __source: { fileName: "", lineNumber: 167, columnNumber: 7 }, __self: this }, field === "price" || field === "msrp" || field === "shippingCost" ? `$${value.toFixed(2)}` : field === "stateRestrictions" ? value || "None" : value); }; const renderSortIcon = (field)=>{ if (sortConfig.key !== field) { return /*#__PURE__*/ React.createElement("i", { className: "fas fa-sort ml-1 text-gray-400", __source: { fileName: "", lineNumber: 182, columnNumber: 14 }, __self: this }); } return sortConfig.direction === "ascending" ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-sort-up ml-1 text-blue-500", __source: { fileName: "", lineNumber: 185, columnNumber: 7 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-sort-down ml-1 text-blue-500", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto", __source: { fileName: "", lineNumber: 192, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-200", __source: { fileName: "", lineNumber: 193, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 194, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 195, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("name"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, "Product Name ", renderSortIcon("name")), /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("marketplace"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, "Marketplace ", renderSortIcon("marketplace")), /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("price"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, "Price ($) ", renderSortIcon("price")), /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("msrp"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 214, columnNumber: 13 }, __self: this }, "MSRP ($) ", renderSortIcon("msrp")), /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("shippingCost"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, "Shipping ($) ", renderSortIcon("shippingCost")), /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("stock"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 226, columnNumber: 13 }, __self: this }, "Stock ", renderSortIcon("stock")), /*#__PURE__*/ React.createElement("th", { onClick: ()=>requestSort("stateRestrictions"), className: "px-6 py-3 border-b border-gray-200 text-left text-sm font-semibold text-gray-600 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, "State Restrictions ", renderSortIcon("stateRestrictions")))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, sortedProducts.map((product)=>/*#__PURE__*/ React.createElement("tr", { key: product.id, className: "hover:bg-gray-50", __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 243, columnNumber: 15 }, __self: this }, renderCell(product, "name")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, renderCell(product, "marketplace", "select")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 249, columnNumber: 15 }, __self: this }, renderCell(product, "price", "number")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }, renderCell(product, "msrp", "number")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, renderCell(product, "shippingCost", "number")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 258, columnNumber: 15 }, __self: this }, renderCell(product, "stock", "number")), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, renderCell(product, "stateRestrictions"))))))); } function ProductTableStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 274, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductTable, { __source: { fileName: "", lineNumber: 275, columnNumber: 7 }, __self: this })); } function AiControls({ onGenerateTitle, onGenerateDescription, onGenerateBoth, isGenerating }) { return /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 p-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onGenerateTitle, disabled: isGenerating, className: "inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, isGenerating ? "Generating Title..." : "✨ Generate Title"), /*#__PURE__*/ React.createElement("button", { onClick: onGenerateDescription, disabled: isGenerating, className: "inline-block px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, isGenerating ? "Generating Description..." : "✨ Generate Description"), /*#__PURE__*/ React.createElement("button", { onClick: onGenerateBoth, disabled: isGenerating, className: "inline-block px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, isGenerating ? "Generating..." : "✨ Generate Both")); } function AiControlsStory() { const [isGenerating, setIsGenerating] = useState(false); const handleGenerateTitle = ()=>{ setIsGenerating(true); setTimeout(()=>setIsGenerating(false), 2000); }; const handleGenerateDescription = ()=>{ setIsGenerating(true); setTimeout(()=>setIsGenerating(false), 2000); }; const handleGenerateBoth = ()=>{ setIsGenerating(true); setTimeout(()=>{ handleGenerateTitle(); handleGenerateDescription(); setIsGenerating(false); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiControls, { onGenerateTitle: handleGenerateTitle, onGenerateDescription: handleGenerateDescription, onGenerateBoth: handleGenerateBoth, isGenerating: isGenerating, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); } function MainComponent() { const [products, setProducts] = useState([]); const [isGenerating, setIsGenerating] = useState(false); const [isSaving, setIsSaving] = useState(false); const [saveMessage, setSaveMessage] = useState(""); const [upload, { loading: isUploading }] = useUpload(); const [error, setError] = useState(null); const [activeTab, setActiveTab] = useState("products"); const [isLoading, setIsLoading] = useState(true); const [selectedProduct, setSelectedProduct] = useState(null); const [searchTerm, setSearchTerm] = useState(""); useEffect(()=>{ const fetchProducts = async ()=>{ try { setIsLoading(true); setError(null); const products = await db["28847f0b-a60d-494d-b9de-e51e57e2e7c2"].findMany(); setProducts(products); } catch (err) { setError(err.message); } finally{ setIsLoading(false); } }; fetchProducts(); }, []); const handleUpload = async (file)=>{ try { setError(null); const { url, error: uploadError } = await upload({ file }); if (uploadError) { throw new Error(uploadError); } const response = await fetch(url); if (!response.ok) { throw new Error("Failed to process file"); } const data = await response.text(); const rows = data.split("\n").slice(1); const newProducts = rows.map((row)=>{ const [name, price, stock] = row.split(","); if (!name || isNaN(price) || isNaN(stock)) { throw new Error("Invalid CSV format"); } return { name, price: Number(price), stock: Number(stock) }; }); setProducts((prev)=>[ ...prev, ...newProducts ]); } catch (err) { setError(err.message); } }; const handleGenerateTitle = async (product)=>{ if (!product) { setError("Please select a product first"); return; } try { setError(null); setIsGenerating(true); const response = await chatgpt.complete({ messages: [ { role: "user", content: `Generate a compelling product title for: ${product.name}. Price: ${product.price}. Keep it under 100 characters.` } ] }); if (response.error) throw new Error(response.error); setProducts(products.map((p)=>p.id === product.id ? { ...p, name: response.message.content.trim() } : p)); } catch (err) { setError(err.message); } finally{ setIsGenerating(false); } }; const handleGenerateDescription = async (product)=>{ if (!product) { setError("Please select a product first"); return; } try { setError(null); setIsGenerating(true); const response = await chatgpt.complete({ messages: [ { role: "user", content: `Generate a compelling product description for: ${product.name}. Price: ${product.price}. Include key features and benefits.` } ] }); if (response.error) throw new Error(response.error); setProducts(products.map((p)=>p.id === product.id ? { ...p, description: response.message.content.trim() } : p)); } catch (err) { setError(err.message); } finally{ setIsGenerating(false); } }; const handleSave = async ()=>{ try { setError(null); setIsSaving(true); setSaveMessage(""); await db["28847f0b-a60d-494d-b9de-e51e57e2e7c2"].insertMany(products); setSaveMessage("Products saved successfully!"); } catch (err) { setError(err.message); } finally{ setIsSaving(false); } }; const filteredProducts = products.filter((product)=>product.name.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 bg-gray-50", __source: { fileName: "", lineNumber: 139, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 140, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 mb-8 text-center font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, "Product Management System"), /*#__PURE__*/ React.createElement("div", { className: "mb-6 flex border-b", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("products"), className: `px-4 py-2 font-roboto ${activeTab === "products" ? "border-b-2 border-blue-500" : ""}`, __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, "Products"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("guidelines"), className: `px-4 py-2 font-roboto ${activeTab === "guidelines" ? "border-b-2 border-blue-500" : ""}`, __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, "Guidelines"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("training"), className: `px-4 py-2 font-roboto ${activeTab === "training" ? "border-b-2 border-blue-500" : ""}`, __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "Training")), activeTab === "products" && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(AiControls, { onGenerateTitle: ()=>handleGenerateTitle(selectedProduct), onGenerateDescription: ()=>handleGenerateDescription(selectedProduct), isGenerating: isGenerating, __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this })), activeTab === "products" && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search products...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-roboto", __source: { fileName: "", lineNumber: 181, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement(ProductTable, { products: filteredProducts, setProducts: setProducts, onSelectProduct: setSelectedProduct, selectedProduct: selectedProduct, __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4 space-y-4", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, "Import Products"), /*#__PURE__*/ React.createElement(FileUpload, { onUpload: handleUpload, error: error, loading: isUploading, __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 207, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, "Export Products"), /*#__PURE__*/ React.createElement(ExportButton, { data: filteredProducts, filename: "products", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSave, disabled: isSaving || !products.length, className: "w-full py-2 px-4 bg-green-500 text-white rounded hover:bg-green-600 disabled:opacity-50 font-roboto", __source: { fileName: "", lineNumber: 213, columnNumber: 15 }, __self: this }, isSaving ? "Saving..." : "Save to Database"), saveMessage && /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-green-100 text-green-700 rounded", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }, saveMessage), error && /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-red-100 text-red-700 rounded", __source: { fileName: "", lineNumber: 228, columnNumber: 17 }, __self: this }, error))), activeTab === "guidelines" && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, "US Pricing Guidelines"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b pb-4", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "General Rules"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2 font-roboto", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, "All prices must be displayed in USD"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, "Include all applicable taxes and fees"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 249, columnNumber: 19 }, __self: this }, "Bulk pricing must be clearly marked"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this }, "Sale prices require original price display"))), /*#__PURE__*/ React.createElement("div", { className: "border-b pb-4", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 254, columnNumber: 17 }, __self: this }, "State-Specific Rules"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 257, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 259, columnNumber: 21 }, __self: this }, "California"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 260, columnNumber: 21 }, __self: this }, "Additional environmental fees must be listed")), /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-gray-50 rounded", __source: { fileName: "", lineNumber: 264, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 265, columnNumber: 21 }, __self: this }, "New York"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 266, columnNumber: 21 }, __self: this }, "Shipping costs must be disclosed pre-purchase")))))), activeTab === "training" && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, "Marketplace Training"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 281, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b pb-4", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-3 font-roboto", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, "Product Listing Best Practices"), /*#__PURE__*/ React.createElement("div", { className: "grid md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 286, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-blue-50 rounded", __source: { fileName: "", lineNumber: 287, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 288, columnNumber: 21 }, __self: this }, "Title Optimization"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 text-sm space-y-1 font-roboto", __source: { fileName: "", lineNumber: 291, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 292, columnNumber: 23 }, __self: this }, "Include brand name first"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 293, columnNumber: 23 }, __self: this }, "Add key product features"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 294, columnNumber: 23 }, __self: this }, "Keep under 200 characters"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-green-50 rounded", __source: { fileName: "", lineNumber: 297, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-2 font-roboto", __source: { fileName: "", lineNumber: 298, columnNumber: 21 }, __self: this }, "Description Guidelines"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 text-sm space-y-1 font-roboto", __source: { fileName: "", lineNumber: 301, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 302, columnNumber: 23 }, __self: this }, "Start with key benefits"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 303, columnNumber: 23 }, __self: this }, "Use bullet points for features"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 304, columnNumber: 23 }, __self: this }, "Include dimensions and specs"))))))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 314, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-2xl text-blue-500", __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }))))); }

Product Name	Marketplace	Price ($)	MSRP ($)	Shipping ($)	Stock	State Restrictions
Laptop	Amazon	$999.99	$1299.99	$15.99	50	CA, NY
Smartphone	eBay	$599.99	$699.99	$9.99	100	None
Headphones	Walmart	$99.99	$129.99	$5.99	200	AK, HI