\n Rent Payments\n

\n Manage tenant payments and track rent collection\n

\n setShowAddTenant(true)}\n className=\"btn-secondary\"\n >\n 👤 Add Tenant\n \n setShowAddPayment(true)}\n className=\"btn-primary\"\n >\n 💳 Record Payment\n \n

\n\n {/* Tenants Summary */}\n

{tenants.length}

Total Tenants

\n {payments.filter(p => p.status === 'paid').length}\n

Payments Received

\n {payments.filter(p => p.status === 'pending' || p.status === 'late').length}\n

Pending Payments

\n\n {/* Payments Table */}\n

Recent Payments

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

\n Tenant\n	\n Amount\n	\n Due Date\n	\n Paid Date\n	\n Status\n	\n Actions\n
\n {payment.tenant_name}\n	\n {formatCurrency(payment.amount)}\n	\n {formatDate(payment.due_date)}\n	\n {payment.paid_date ? formatDate(payment.paid_date) : '-'}\n	\n \n {payment.status}\n \n	\n {payment.status !== 'paid' && (\n updatePaymentStatus(payment.id, 'paid', new Date().toISOString().split('T')[0])}\n className=\"text-green-600 hover:text-green-900 mr-3\"\n >\n Mark Paid\n \n )}\n

\n\n {/* Add Payment Modal */}\n {showAddPayment && (\n

Record New Payment

\n Tenant\n \n

\n Amount\n \n

\n Due Date\n \n

\n Paid Date (optional)\n \n

\n Payment Method\n \n

\n Status\n \n

\n Notes\n \n

\n setShowAddPayment(false)}\n className=\"btn-secondary\"\n >\n Cancel\n \n \n

\n )}\n\n {/* Add Tenant Modal */}\n {showAddTenant && (\n

Add New Tenant

\n Name\n \n

\n Email\n \n

\n Phone\n \n

\n Unit\n \n

\n Lease Start\n \n

\n Lease End\n \n

\n Monthly Rent\n \n

\n Security Deposit\n \n

\n setShowAddTenant(false)}\n className=\"btn-secondary\"\n >\n Cancel\n \n \n

\n )}\n

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