Make Payment

\n \n ✕\n \n

\n\n

\n {/* Bill Summary */}\n

Bill Summary

\n Bill Number:\n {bill.bill_number}\n

\n Total Amount:\n ${bill.total_amount.toFixed(2)}\n

\n Paid Amount:\n ${bill.paid_amount.toFixed(2)}\n

\n Remaining Balance:\n ${bill.remaining_amount.toFixed(2)}\n

\n\n

\n {error && (\n

\n {error}\n

\n )}\n\n {/* Payment Amount */}\n

\n \n Payment Amount ($)\n \n \n \n {/* Quick Amount Buttons */}\n

\n \n Full Amount (${bill.remaining_amount.toFixed(2)})\n \n setPartialAmount(50)}\n className=\"bg-blue-100 text-blue-800 px-3 py-1 rounded-md hover:bg-blue-200 transition-colors text-sm\"\n >\n 50% (${(bill.remaining_amount * 0.5).toFixed(2)})\n \n setPartialAmount(25)}\n className=\"bg-yellow-100 text-yellow-800 px-3 py-1 rounded-md hover:bg-yellow-200 transition-colors text-sm\"\n >\n 25% (${(bill.remaining_amount * 0.25).toFixed(2)})\n \n

\n\n {/* Payment Method */}\n

\n \n Payment Method\n \n

\n {paymentMethods.map((method) => (\n \n setPaymentData(prev => ({ ...prev, payment_method: e.target.value }))}\n className=\"sr-only\"\n />\n {method.label.split(' ')[0]}\n {method.label.substring(2)}\n {paymentData.payment_method === method.value && (\n ✓\n )}\n \n ))}\n

\n\n {/* Payment Notes */}\n

\n \n Notes (Optional)\n \n setPaymentData(prev => ({ ...prev, notes: 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=\"Add any notes about this payment...\"\n />\n

\n\n {/* Payment Summary */}\n

Payment Summary

\n Payment Amount:\n ${paymentData.amount.toFixed(2)}\n

\n Remaining After Payment:\n \n ${Math.max(0, bill.remaining_amount - paymentData.amount).toFixed(2)}\n \n

\n Payment Method:\n \n {paymentMethods.find(m => m.value === paymentData.payment_method)?.label.substring(2)}\n \n

\n\n {/* Submit Buttons */}\n

\n \n Cancel\n \n \n {loading ? (\n

\n Processing...\n

\n ) : (\n `Process Payment ($${paymentData.amount.toFixed(2)})`\n )}\n \n

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