95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Member, Payment } from '../types'
|
|
|
|
interface PaymentsTableProps {
|
|
members: Member[]
|
|
payments: Payment[]
|
|
loading: boolean
|
|
}
|
|
|
|
export const PaymentsTable: React.FC<PaymentsTableProps> = ({ members, payments, loading }) => {
|
|
const [filter, setFilter] = useState('')
|
|
|
|
const getMemberName = (memberId: number) => {
|
|
const member = members.find((m) => m.id === memberId)
|
|
return member ? `${member.member_firstname} ${member.member_surname}` : 'Unknown'
|
|
}
|
|
|
|
const filteredPayments = payments.filter((p) => {
|
|
const memberName = getMemberName(p.member_id).toLowerCase()
|
|
return memberName.includes(filter.toLowerCase())
|
|
})
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="text-center py-5">
|
|
<div className="spinner-border" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="mb-4">
|
|
<input
|
|
type="text"
|
|
className="form-control"
|
|
placeholder="🔍 Search by member name..."
|
|
value={filter}
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
style={{ fontSize: '0.95rem' }}
|
|
/>
|
|
</div>
|
|
|
|
{filteredPayments.length > 0 ? (
|
|
<>
|
|
<div className="table-responsive">
|
|
<table className="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Payment ID</th>
|
|
<th>Member Name</th>
|
|
<th>Member ID</th>
|
|
<th>Payment Date</th>
|
|
<th>Year</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filteredPayments.map((payment) => (
|
|
<tr key={payment.id}>
|
|
<td style={{ fontWeight: 600, color: '#27ae60' }}>{payment.id}</td>
|
|
<td>{getMemberName(payment.member_id)}</td>
|
|
<td>{payment.member_id}</td>
|
|
<td style={{ fontSize: '0.9rem' }}>
|
|
{new Date(payment.payment_date).toLocaleDateString()}
|
|
</td>
|
|
<td>{payment.payment_year}</td>
|
|
<td style={{ fontWeight: 600, color: '#3498db' }}>
|
|
€{payment.payment_amount ? payment.payment_amount.toFixed(2) : '0.00'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="mt-3 text-muted">
|
|
Showing <strong>{filteredPayments.length}</strong> of <strong>{payments.length}</strong> payments
|
|
{filteredPayments.length > 0 && (
|
|
<span className="ms-3">
|
|
• Total: <strong>€{filteredPayments.reduce((sum, p) => sum + (p.payment_amount || 0), 0).toFixed(2)}</strong>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center py-5 text-muted">
|
|
<p>No payments found matching your search</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|