📱

No Catalog Generated

\n Add some products and click \"Generate Catalog\" to see the WhatsApp preview.\n

💡 Quick Start:

1. Go to the Products tab
2. Add your products manually or use voice input
3. Click \"Generate Catalog\" button
4. Return here to preview your WhatsApp catalog

\n );\n }\n\n const totalValue = products.reduce((sum, product) => sum + parseFloat(product.price || '0'), 0);\n const inStockCount = products.filter(p => p.availability === 'in_stock').length;\n const categories = [...new Set(products.map(p => p.category).filter(Boolean))];\n\n return (\n

\n {/* Header with Stats */}\n

\n 📱\n WhatsApp Catalog Preview\n

\n \n

\n setViewMode('whatsapp')}\n className={`px-4 py-2 rounded-md transition-colors ${\n viewMode === 'whatsapp' \n ? 'bg-green-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n 📱 WhatsApp View\n \n setViewMode('table')}\n className={`px-4 py-2 rounded-md transition-colors ${\n viewMode === 'table' \n ? 'bg-green-600 text-white' \n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n >\n 📊 Table View\n \n

\n\n {/* Stats */}\n

{products.length}

Total Products

{inStockCount}

In Stock

{categories.length}

{businessName}

Business Catalog

\n\n {/* Catalog Grid */}\n

\n {products.map((product) => (\n setSelectedProduct(product)}\n className=\"border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer\"\n >\n {/* Product Image Placeholder */}\n

\n {product.image_url ? (\n {\n (e.target as HTMLImageElement).style.display = 'none';\n (e.target as HTMLImageElement).nextElementSibling!.classList.remove('hidden');\n }}\n />\n ) : null}\n

\n 📦\n

\n\n {/* Product Info */}\n

\n {product.name}\n

\n {product.description}\n

\n \n {product.currency} {parseFloat(product.price || '0').toFixed(2)}\n \n \n {product.availability === 'in_stock' ? 'Available' : 'Out of Stock'}\n \n

\n ))}\n

\n )}\n\n {/* Table View */}\n {viewMode === 'table' && (\n

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

\n Product\n	\n Category\n	\n Price\n	\n Availability\n	\n ID\n
\n \n {product.name} \n \n {product.description}\n \n \n	\n {product.category \|\| '-'}\n	\n {product.currency} {parseFloat(product.price \|\| '0').toFixed(2)}\n	\n \n {product.availability === 'in_stock' ? 'In Stock' : 'Out of Stock'}\n \n	\n {product.retailer_id}\n

\n )}\n\n {/* Product Detail Modal */}\n {selectedProduct && (\n

\n {/* Modal Header */}\n

Product Details

\n setSelectedProduct(null)}\n className=\"text-white hover:text-gray-200 text-xl\"\n >\n ✕\n \n

\n\n {/* Modal Content */}\n

\n {/* Product Image */}\n

\n {selectedProduct.image_url ? (\n {\n (e.target as HTMLImageElement).style.display = 'none';\n (e.target as HTMLImageElement).nextElementSibling!.classList.remove('hidden');\n }}\n />\n ) : null}\n

\n 📦\n

\n\n {/* Product Info */}\n

\n {selectedProduct.name}\n

\n \n

\n {selectedProduct.description}\n

\n\n

\n Price:\n \n {selectedProduct.currency} {parseFloat(selectedProduct.price || '0').toFixed(2)}\n \n

\n \n

\n Category:\n {selectedProduct.category || 'General'}\n

\n \n

\n Availability:\n \n {selectedProduct.availability === 'in_stock' ? 'In Stock' : 'Out of Stock'}\n \n

\n \n

\n Product ID:\n {selectedProduct.retailer_id}\n

\n\n {/* WhatsApp Message Preview */}\n

WhatsApp Message Preview:

\n {selectedProduct.name}
\n {selectedProduct.description}

\n 💰 {selectedProduct.currency} {parseFloat(selectedProduct.price || '0').toFixed(2)}
\n 📦 {selectedProduct.availability === 'in_stock' ? 'Available now!' : 'Currently out of stock'}\n

\n )}\n\n {/* Categories Summary */}\n {categories.length > 0 && (\n

\n 📂\n Categories ({categories.length})\n

\n \n

\n {categories.map((category) => {\n const categoryProducts = products.filter(p => p.category === category);\n return (\n

{category}

{categoryProducts.length} products

\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/CatalogPreview.tsx","extension","actionData","errors"]