Sales Management

\n setShowSaleModal(true)}\n className=\"btn btn-primary\"\n >\n 💰 Record Sale\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 {/* Sales Summary */}\n

Today's Sales

\n {formatCurrency(\n sales\n .filter(sale => new Date(sale.created_at).toDateString() === new Date().toDateString())\n .reduce((sum, sale) => sum + sale.total_amount, 0)\n )}\n

📈

\n\n

Total Sales

{sales.length}

🛒

\n\n

Average Sale

\n {formatCurrency(\n sales.length > 0 \n ? sales.reduce((sum, sale) => sum + sale.total_amount, 0) / sales.length\n : 0\n )}\n

📊

\n\n {/* Sales Table */}\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {sales.map((sale) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

Sale ID	Customer	Amount	Payment Method	Status	Date	Notes
#{sale.id}	{getCustomerName(sale.customer_id)}	\n {formatCurrency(sale.total_amount)}\n	\n \n {sale.payment_method}\n \n	\n \n {sale.status}\n \n	{formatDate(sale.created_at)}	\n {sale.notes \|\| '-'}\n

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

No sales recorded yet. Record your first sale!

\n )}\n\n {/* Sale Modal */}\n {showSaleModal && (\n setShowSaleModal(false)}\n onSubmit={handleCreateSale}\n />\n )}\n

\n );\n}\n\ninterface SaleModalProps {\n products: Product[];\n customers: Customer[];\n onClose: () => void;\n onSubmit: (data: CreateSaleRequest) => void;\n}\n\nfunction SaleModal({ products, customers, onClose, onSubmit }: SaleModalProps) {\n const [selectedCustomer, setSelectedCustomer] = useState();\n const [paymentMethod, setPaymentMethod] = useState<'cash' | 'card' | 'digital' | 'other'>('cash');\n const [notes, setNotes] = useState('');\n const [items, setItems] = useState>([]);\n\n const addItem = () => {\n setItems([...items, { product_id: 0, quantity: 1, unit_price: 0 }]);\n };\n\n const updateItem = (index: number, field: string, value: number) => {\n const newItems = [...items];\n newItems[index] = { ...newItems[index], [field]: value };\n \n // Auto-fill price when product is selected\n if (field === 'product_id') {\n const product = products.find(p => p.id === value);\n if (product) {\n newItems[index].unit_price = product.price;\n }\n }\n \n setItems(newItems);\n };\n\n const removeItem = (index: number) => {\n setItems(items.filter((_, i) => i !== index));\n };\n\n const calculateTotal = () => {\n return items.reduce((sum, item) => sum + (item.quantity * item.unit_price), 0);\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n if (items.length === 0) {\n alert('Please add at least one item to the sale');\n return;\n }\n\n const validItems = items.filter(item => \n item.product_id > 0 && item.quantity > 0 && item.unit_price > 0\n );\n\n if (validItems.length !== items.length) {\n alert('Please fill in all item details correctly');\n return;\n }\n\n onSubmit({\n customer_id: selectedCustomer,\n items: validItems,\n payment_method: paymentMethod,\n notes: notes || undefined\n });\n };\n\n const formatCurrency = (amount: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(amount);\n };\n\n return (\n

Record New Sale

\n \n

\n\n

\n {/* Customer and Payment */}\n

\n \n Customer (Optional)\n \n setSelectedCustomer(e.target.value ? Number(e.target.value) : undefined)}\n className=\"form-input\"\n >\n \n {customers.map(customer => (\n \n ))}\n \n

\n\n

\n \n Payment Method *\n \n setPaymentMethod(e.target.value as any)}\n className=\"form-input\"\n required\n >\n \n \n \n \n \n

\n\n {/* Items */}\n

\n \n Sale Items *\n \n \n ➕ Add Item\n \n

\n\n

\n {items.map((item, index) => (\n

\n updateItem(index, 'product_id', Number(e.target.value))}\n className=\"form-input\"\n required\n >\n \n {products\n .filter(p => p.stock_quantity > 0)\n .map(product => (\n \n ))}\n \n

\n \n

\n p.id === item.product_id)?.stock_quantity || 999}\n value={item.quantity}\n onChange={(e) => updateItem(index, 'quantity', Number(e.target.value))}\n className=\"form-input\"\n placeholder=\"Qty\"\n required\n />\n

\n \n

\n updateItem(index, 'unit_price', Number(e.target.value))}\n className=\"form-input\"\n placeholder=\"Price\"\n required\n />\n

\n \n

\n {formatCurrency(item.quantity * item.unit_price)}\n

\n \n

\n removeItem(index)}\n className=\"text-red-600 hover:text-red-800\"\n >\n 🗑️\n \n

\n ))}\n

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

\n No items added. Click \"Add Item\" to start.\n

\n )}\n

\n\n {/* Total */}\n {items.length > 0 && (\n

\n Total:\n {formatCurrency(calculateTotal())}\n

\n )}\n\n {/* Notes */}\n

\n \n Notes (Optional)\n \n setNotes(e.target.value)}\n className=\"form-input\"\n rows={3}\n placeholder=\"Any additional notes about this sale...\"\n />\n

\n\n

\n \n Cancel\n \n \n Record Sale\n \n

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