Products

\n setShowAddForm(true)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n ➕ Add Product\n \n

\n\n {/* Search */}\n

\n setSearchTerm(e.target.value)}\n className=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

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

\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 \n

Product	Category	Stock	Price	Value	Supplier	Actions
\n \n {product.name} \n SKU: {product.sku} \n \n	\n {product.category_name \|\| 'Uncategorized'}\n	\n \n {product.current_stock} {product.unit_of_measure}\n {product.is_low_stock && (\n ⚠️ Low\n )}\n \n \n Min: {product.min_stock_level} \| Max: {product.max_stock_level}\n \n	\n ${product.unit_price.toFixed(2)}\n	\n ${product.total_value.toLocaleString()}\n	\n {product.supplier_name \|\| 'No supplier'}\n	\n setEditingProduct(product)}\n className=\"text-blue-600 hover:text-blue-900\"\n >\n Edit\n \n handleDelete(product.id)}\n className=\"text-red-600 hover:text-red-900\"\n >\n Delete\n \n

\n\n {/* Add/Edit Product Modal */}\n {(showAddForm || editingProduct) && (\n {\n setShowAddForm(false);\n setEditingProduct(null);\n }}\n />\n )}\n

\n );\n}\n\ninterface ProductFormProps {\n product: ProductWithDetails | null;\n suppliers: Supplier[];\n categories: Category[];\n onSubmit: (data: CreateProductRequest) => void;\n onCancel: () => void;\n}\n\nfunction ProductForm({ product, suppliers, categories, onSubmit, onCancel }: ProductFormProps) {\n const [formData, setFormData] = useState({\n name: product?.name || '',\n sku: product?.sku || '',\n description: product?.description || '',\n category_id: product?.category_id || undefined,\n supplier_id: product?.supplier_id || undefined,\n unit_price: product?.unit_price || 0,\n current_stock: product?.current_stock || 0,\n min_stock_level: product?.min_stock_level || 0,\n max_stock_level: product?.max_stock_level || 100,\n unit_of_measure: product?.unit_of_measure || 'units'\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 Name *\n setFormData({ ...formData, name: e.target.value })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n SKU *\n setFormData({ ...formData, sku: e.target.value })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n Description\n setFormData({ ...formData, description: e.target.value })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n rows={2}\n />\n

\n\n

\n Category\n setFormData({ ...formData, category_id: e.target.value ? parseInt(e.target.value) : undefined })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {categories.map(cat => (\n \n ))}\n \n

\n\n

\n Supplier\n setFormData({ ...formData, supplier_id: e.target.value ? parseInt(e.target.value) : undefined })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {suppliers.map(supplier => (\n \n ))}\n \n

\n\n

\n Unit Price *\n setFormData({ ...formData, unit_price: parseFloat(e.target.value) || 0 })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n Unit of Measure\n setFormData({ ...formData, unit_of_measure: e.target.value })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"units, kg, liters, etc.\"\n />\n

\n\n

\n Current Stock\n setFormData({ ...formData, current_stock: parseInt(e.target.value) || 0 })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n Min Stock\n setFormData({ ...formData, min_stock_level: parseInt(e.target.value) || 0 })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

\n Max Stock\n setFormData({ ...formData, max_stock_level: parseInt(e.target.value) || 0 })}\n className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n\n

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

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/helton_munee/helton/code/frontend/components/ProductList.tsx","extension","actionData","errors"]