Inventory Management

\n setShowAddModal(true)}\n className=\"btn btn-primary\"\n >\n ➕ Add Product\n \n

\n\n {/* Message */}\n {message && (\n

\n {message.text}\n setMessage(null)}\n className=\"float-right text-lg leading-none\"\n >\n ×\n \n

\n )}\n\n {/* Filters */}\n

\n Search Products\n setSearchTerm(e.target.value)}\n className=\"form-input\"\n />\n

\n Filter by Category\n setSelectedCategory(e.target.value)}\n className=\"form-input\"\n >\n \n {categories.map(category => (\n \n ))}\n \n

\n\n {/* Products Table */}\n

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

Product	Category	Price	Stock	Status	Actions
\n \n {product.name} \n {product.description && (\n {product.description} \n )}\n {product.sku && (\n SKU: {product.sku} \n )}\n \n	\n {product.category}\n	{formatCurrency(product.price)}	\n \n {product.stock_quantity}\n {\n const newQuantity = prompt('Enter new stock quantity:', product.stock_quantity.toString());\n if (newQuantity !== null && !isNaN(Number(newQuantity))) {\n handleUpdateStock(product.id, Number(newQuantity));\n }\n }}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n ✏️\n \n \n	\n {product.stock_quantity <= product.low_stock_threshold ? (\n Low Stock\n ) : product.stock_quantity <= product.low_stock_threshold * 2 ? (\n Medium Stock\n ) : (\n In Stock\n )}\n	\n \n setEditingProduct(product)}\n className=\"text-blue-600 hover:text-blue-800\"\n >\n ✏️\n \n \n

\n\n {filteredProducts.length === 0 && (\n

No products found matching your criteria.

\n )}\n\n {/* Add Product Modal */}\n {showAddModal && (\n setShowAddModal(false)}\n onSubmit={handleAddProduct}\n />\n )}\n\n {/* Edit Product Modal */}\n {editingProduct && (\n setEditingProduct(null)}\n onSubmit={async (data) => {\n try {\n const response = await fetch(`/api/inventory/${editingProduct.id}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data)\n });\n \n const result = await response.json();\n if (result.success) {\n setProducts(products.map(p => p.id === editingProduct.id ? result.data : p));\n setEditingProduct(null);\n setMessage({ type: 'success', text: 'Product updated successfully!' });\n onDataChange();\n } else {\n setMessage({ type: 'error', text: result.error || 'Failed to update product' });\n }\n } catch (error) {\n setMessage({ type: 'error', text: 'Failed to update product' });\n }\n }}\n />\n )}\n

\n );\n}\n\ninterface ProductModalProps {\n product?: Product;\n onClose: () => void;\n onSubmit: (data: CreateProductRequest) => void;\n}\n\nfunction ProductModal({ product, onClose, onSubmit }: ProductModalProps) {\n const [formData, setFormData] = useState({\n name: product?.name || '',\n description: product?.description || '',\n category: product?.category || '',\n price: product?.price || 0,\n stock_quantity: product?.stock_quantity || 0,\n low_stock_threshold: product?.low_stock_threshold || 5,\n sku: product?.sku || ''\n });\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSubmit(formData);\n };\n\n return (\n

\n {product ? 'Edit Product' : 'Add New Product'}\n

\n \n

\n\n

\n \n Product Name *\n \n setFormData({ ...formData, name: e.target.value })}\n className=\"form-input\"\n />\n

\n\n

\n \n Description\n \n setFormData({ ...formData, description: e.target.value })}\n className=\"form-input\"\n rows={3}\n />\n

\n\n

\n \n Category *\n \n setFormData({ ...formData, category: e.target.value })}\n className=\"form-input\"\n />\n

\n\n

\n \n SKU\n \n setFormData({ ...formData, sku: e.target.value })}\n className=\"form-input\"\n />\n

\n\n

\n \n Price *\n \n setFormData({ ...formData, price: Number(e.target.value) })}\n className=\"form-input\"\n />\n

\n\n

\n \n Stock Quantity *\n \n setFormData({ ...formData, stock_quantity: Number(e.target.value) })}\n className=\"form-input\"\n />\n

\n\n

\n \n Low Stock Alert\n \n setFormData({ ...formData, low_stock_threshold: Number(e.target.value) })}\n className=\"form-input\"\n />\n

\n\n

\n \n Cancel\n \n \n {product ? 'Update Product' : 'Add Product'}\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Deedeesworld/untitled-7517/code/frontend/components/Inventory.tsx","extension","actionData","errors"]