\n {/* Add Product Form */}\n

\n ➕\n Add New Product\n

\n \n

\n \n Product Name *\n \n setFormData(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n placeholder=\"e.g., Premium Wireless Headphones\"\n required\n />\n

\n \n

\n \n Category\n \n setFormData(prev => ({ ...prev, category: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n >\n \n {categories.map(cat => (\n \n ))}\n \n

\n\n

\n \n Description *\n \n setFormData(prev => ({ ...prev, description: e.target.value }))}\n rows={3}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n placeholder=\"Describe your product features, benefits, and what makes it special...\"\n required\n />\n

\n\n

\n \n Price\n \n setFormData(prev => ({ ...prev, price: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n placeholder=\"0.00\"\n />\n

\n \n

\n \n Currency\n \n setFormData(prev => ({ ...prev, currency: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n >\n {currencies.map(curr => (\n \n ))}\n \n

\n \n

\n \n Availability\n \n setFormData(prev => ({ ...prev, availability: e.target.value as 'in_stock' | 'out_of_stock' }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n >\n \n \n \n

\n\n

\n \n Image URL (optional)\n \n setFormData(prev => ({ ...prev, imageUrl: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n placeholder=\"https://example.com/image.jpg\"\n />\n

\n \n

\n \n SKU (optional)\n \n setFormData(prev => ({ ...prev, sku: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500\"\n placeholder=\"e.g., WH-001\"\n />\n

\n\n

\n \n Add Product\n \n

\n\n {/* Products List */}\n

\n 📦\n Products ({products.length})\n

\n \n {products.length === 0 ? (\n

📦

No products yet

Add your first product using the form above or try voice input!

\n ) : (\n

\n {products.map((product) => (\n

{product.name}

\n \n {product.availability === 'in_stock' ? '✅ In Stock' : '❌ Out of Stock'}\n \n {product.category && (\n \n {product.category}\n \n )}\n

\n \n

{product.description}

\n \n

\n {product.price > 0 && (\n \n {product.currency} {product.price.toFixed(2)}\n \n )}\n {product.sku && SKU: {product.sku}}\n {product.imageUrl && 🖼️ Has Image}\n

\n \n

\n enhanceDescription(product.id, product)}\n disabled={isEnhancing === product.id}\n className=\"px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 transition-colors\"\n >\n {isEnhancing === product.id ? '✨...' : '✨ Enhance'}\n \n onRemoveProduct(product.id)}\n className=\"px-3 py-1 text-sm bg-red-600 text-white rounded hover:bg-red-700 transition-colors\"\n >\n 🗑️ Remove\n \n

\n ))}\n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Iregladtechaiworld/my-first-val/code/frontend/components/ProductForm.tsx","extension","actionData","errors"]