\n {editingBill ? 'Edit Bill' : 'Create New Bill'}\n

\n {editingBill && onCancelEdit && (\n \n ← Back to Bills\n \n )}\n

\n\n {/* Customer Selection */}\n

Customer Information

\n setShowCustomerForm(!showCustomerForm)}\n className=\"text-blue-600 hover:text-blue-700 text-sm transition-colors\"\n >\n {showCustomerForm ? 'Cancel' : '+ Add New Customer'}\n \n

\n\n {showCustomerForm ? (\n

\n Name\n setCustomerFormData(prev => ({ ...prev, name: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Email\n setCustomerFormData(prev => ({ ...prev, email: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Phone\n setCustomerFormData(prev => ({ ...prev, phone: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Address\n setCustomerFormData(prev => ({ ...prev, address: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n {loading ? 'Creating...' : 'Create Customer'}\n \n

\n ) : (\n

\n Select Customer\n setBillFormData(prev => ({ ...prev, customer_id: parseInt(e.target.value) }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {customers.map(customer => (\n \n ))}\n \n

\n )}\n

\n\n {/* Bill Form */}\n

\n {/* Bill Details */}\n

Bill Details

\n Description\n setBillFormData(prev => ({ ...prev, description: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Describe the fabrication work...\"\n />\n

\n Tax Rate (%)\n setBillFormData(prev => ({ ...prev, tax_rate: parseFloat(e.target.value) || 0 }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Due Date\n setBillFormData(prev => ({ ...prev, due_date: e.target.value }))}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

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

Bill Items

\n \n + Add Item\n \n

\n\n

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

\n Description\n handleItemChange(index, 'description', e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n placeholder=\"Item description...\"\n />\n

\n Quantity\n handleItemChange(index, 'quantity', parseFloat(e.target.value) || 1)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Unit Price ($)\n handleItemChange(index, 'unit_price', parseFloat(e.target.value) || 0)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n Total\n

\n ${item.total.toFixed(2)}\n

\n {items.length > 1 && (\n removeItem(index)}\n className=\"ml-2 text-red-600 hover:text-red-700 transition-colors\"\n >\n 🗑️\n \n )}\n

\n ))}\n

\n\n {/* Totals */}\n

\n Subtotal:\n ${calculateSubtotal().toFixed(2)}\n

\n Tax ({billFormData.tax_rate}%):\n ${calculateTax().toFixed(2)}\n

\n Total:\n ${calculateTotal().toFixed(2)}\n

\n\n {/* Submit Button */}\n

\n {editingBill && onCancelEdit && (\n \n Cancel\n \n )}\n \n {loading ? 'Saving...' : editingBill ? 'Update Bill' : 'Create Bill'}\n \n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Sujal5/c/code/frontend/components/BillForm.tsx","extension","actionData","errors"]