// Side drawer that lists every upcoming booking grouped by month. function PipelineDrawer({ onClose, pipeline, houses, totalPaid, totalPending, total }) { // Group by month const byMonth = {}; pipeline.forEach(b => { const key = b.checkInDate.slice(0, 7); (byMonth[key] = byMonth[key] || []).push(b); }); const monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December']; return ( <>
Pipeline — excluded from revenue
{fmt$(total)} in {pipeline.length} upcoming bookings
Paid in advance
{fmt$(totalPaid)}
Pending payment
{fmt$(totalPending)}
These become revenue automatically the day each guest checks in — provided payment has cleared by then.
{Object.keys(byMonth).sort().map(key => { const [y, m] = key.split('-'); const monthTotal = byMonth[key].reduce((s, b) => s + b.amount, 0); return (
{monthNames[Number(m) - 1]} {y}
{byMonth[key].length} bookings · {fmt$(monthTotal, { compact: true })}
{byMonth[key].map(b => { const house = houses.find(h => h.id === b.houseId); return (
{b.description}
{house?.name} · {fmtDate(b.checkInDate)} → {fmtDate(b.checkOutDate)} · {b.channel}
{fmt$(b.amount)}
{b.paymentStatus === 'Paid' ? '✓ Paid' : '○ Pending'}
); })}
); })}
); } Object.assign(window, { PipelineDrawer });