📋

No bills found

\n {isAdmin ? \"Create your first bill to get started.\" : \"No bills have been assigned to you yet.\"}\n

\n );\n }\n\n return (\n <>\n

\n {bills.map((bill) => (\n

\n {bill.bill_number}\n

\n \n {bill.status.charAt(0).toUpperCase() + bill.status.slice(1)}\n \n

\n \n

\n Customer:\n

{bill.customer_name}

\n {bill.customer_phone &&

📞 {bill.customer_phone}

}\n

\n Total Amount:\n

${bill.total_amount.toFixed(2)}

\n Paid:\n

${bill.paid_amount.toFixed(2)}

\n Remaining:\n

${bill.remaining_amount.toFixed(2)}

\n \n

Due Date: {formatDate(bill.due_date)}

{bill.description}

\n\n

\n handleViewBill(bill)}\n className=\"bg-blue-600 text-white px-3 py-2 rounded-md hover:bg-blue-700 transition-colors text-sm\"\n >\n 📄 View Details\n \n \n {bill.remaining_amount > 0 && (\n handlePayBill(bill)}\n className=\"bg-green-600 text-white px-3 py-2 rounded-md hover:bg-green-700 transition-colors text-sm\"\n >\n 💳 Pay Bill\n \n )}\n \n {isAdmin && onEditBill && (\n onEditBill(bill)}\n className=\"bg-yellow-600 text-white px-3 py-2 rounded-md hover:bg-yellow-700 transition-colors text-sm\"\n >\n ✏️ Edit\n \n )}\n \n {isAdmin && bill.remaining_amount === 0 && (\n handleDeleteBill(bill)}\n className=\"bg-red-600 text-white px-3 py-2 rounded-md hover:bg-red-700 transition-colors text-sm\"\n >\n 🗑️ Delete\n \n )}\n

\n ))}\n

\n\n {/* Bill Details Modal */}\n {showBillDetails && (\n

Bill Details - {showBillDetails.bill_number}

\n setShowBillDetails(null)}\n className=\"text-gray-400 hover:text-gray-600 transition-colors\"\n >\n ✕\n \n

\n\n

\n {/* Bill Information */}\n

Customer Information

Name: {showBillDetails.customer_name}

Email: {showBillDetails.customer_email}

Phone: {showBillDetails.customer_phone}

\n \n

Bill Information

Status: \n \n {showBillDetails.status.charAt(0).toUpperCase() + showBillDetails.status.slice(1)}\n \n

Created: {formatDate(showBillDetails.created_at)}

Due Date: {formatDate(showBillDetails.due_date)}

\n\n {/* Description */}\n

Description

{showBillDetails.description}

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

Items

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

Description	Quantity	Unit Price	Total
{item.description}	{item.quantity}	${item.unit_price.toFixed(2)}	${item.total.toFixed(2)}

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

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

\n Tax ({showBillDetails.tax_rate}%):\n ${showBillDetails.tax_amount.toFixed(2)}\n

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

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

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

\n\n {/* Payment History */}\n

Payment History

\n {loadingPayments ? (\n

Loading payments...

\n ) : payments.length === 0 ? (\n

No payments recorded yet.

\n ) : (\n

\n {payments.map((payment) => (\n

${payment.amount.toFixed(2)}

\n {payment.payment_method} • {formatDate(payment.payment_date)}\n

\n {payment.notes && (\n

{payment.notes}

\n )}\n

\n ))}\n

\n )}\n

\n\n {/* Actions */}\n

\n \n \n {showBillDetails.remaining_amount > 0 && (\n {\n setSelectedBill(showBillDetails);\n setShowPaymentModal(true);\n }}\n className=\"bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors\"\n >\n 💳 Make Payment\n \n )}\n \n {isAdmin && onEditBill && (\n {\n onEditBill(showBillDetails);\n setShowBillDetails(null);\n }}\n className=\"bg-yellow-600 text-white px-4 py-2 rounded-md hover:bg-yellow-700 transition-colors\"\n >\n ✏️ Edit Bill\n \n )}\n

\n )}\n\n {/* Payment Modal */}\n {showPaymentModal && selectedBill && (\n setShowPaymentModal(false)}\n onPaymentSuccess={handlePaymentSuccess}\n />\n )}\n \n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/Sujal5/c/code/frontend/components/BillList.tsx","extension","actionData","errors"]