Stock Movements

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

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

\n Filter by Product\n setSelectedProduct(e.target.value ? parseInt(e.target.value) : null)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n >\n \n {products.map(product => (\n \n ))}\n \n

\n {selectedProduct && (\n setSelectedProduct(null)}\n className=\"px-3 py-2 text-gray-600 hover:text-gray-800\"\n >\n Clear Filter\n \n )}\n

\n\n {/* Movements Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {filteredMovements.map((movement) => {\n const movementType = formatMovementType(movement.movement_type);\n const totalValue = movement.unit_price ? movement.quantity * movement.unit_price : null;\n \n return (\n \n \n \n \n \n \n \n \n \n \n );\n })}\n \n

Date	Product	Type	Quantity	Unit Price	Total Value	Reference	Supplier
\n {new Date(movement.created_at).toLocaleDateString()}\n \n {new Date(movement.created_at).toLocaleTimeString()}\n \n	\n {movement.product_name} \n SKU: {movement.product_sku} \n	\n \n {movementType.icon} {movementType.text}\n \n	\n \n {movement.movement_type === 'OUT' ? '-' : '+'}\n {movement.quantity}\n \n	\n {movement.unit_price ? `$${movement.unit_price.toFixed(2)}` : '-'}\n	\n {totalValue ? `$${totalValue.toFixed(2)}` : '-'}\n	\n {movement.reference_number \|\| '-'}\n {movement.notes && (\n {movement.notes} \n )}\n	\n {movement.supplier_name \|\| '-'}\n

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

No stock movements found

\n )}\n

\n\n {/* Add Movement Modal */}\n {showAddForm && (\n setShowAddForm(false)}\n />\n )}\n

\n );\n}\n\ninterface MovementFormProps {\n products: ProductWithDetails[];\n suppliers: Supplier[];\n onSubmit: (data: CreateMovementRequest) => void;\n onCancel: () => void;\n}\n\nfunction MovementForm({ products, suppliers, onSubmit, onCancel }: MovementFormProps) {\n const [formData, setFormData] = useState({\n product_id: 0,\n movement_type: 'IN',\n quantity: 0,\n unit_price: undefined,\n reference_number: '',\n notes: '',\n supplier_id: undefined\n });\n\n const selectedProduct = products.find(p => p.id === formData.product_id);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (formData.product_id === 0) {\n alert('Please select a product');\n return;\n }\n onSubmit(formData);\n };\n\n return (\n

Record Stock Movement

\n \n

\n Product *\n setFormData({ ...formData, product_id: parseInt(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 {products.map(product => (\n \n ))}\n \n

\n\n

\n Movement Type *\n setFormData({ ...formData, movement_type: e.target.value as 'IN' | 'OUT' | 'ADJUSTMENT' })}\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

\n\n

\n \n {formData.movement_type === 'ADJUSTMENT' ? 'New Stock Level *' : 'Quantity *'}\n \n setFormData({ ...formData, quantity: 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 {selectedProduct && formData.movement_type === 'OUT' && formData.quantity > selectedProduct.current_stock && (\n

\n ⚠️ Insufficient stock (Available: {selectedProduct.current_stock})\n

\n )}\n

\n\n

\n Unit Price\n setFormData({ ...formData, unit_price: e.target.value ? parseFloat(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 placeholder={selectedProduct ? `Default: $${selectedProduct.unit_price}` : 'Optional'}\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 Reference Number\n setFormData({ ...formData, reference_number: 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=\"PO#, Invoice#, etc.\"\n />\n

\n\n

\n Notes\n setFormData({ ...formData, notes: 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 placeholder=\"Additional notes...\"\n />\n

\n\n

\n \n Cancel\n \n \n Record Movement\n \n

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