>(initialDenomCounts);
const [closeNotes, setCloseNotes] = useState("");
const [reopenNotes, setReopenNotes] = useState("");
+ // Cash no longer has its own manual entry — it's the live sum of every staff member's
+ // per-person count, reported up from CashByUserSection below.
+ const [cashSummary, setCashSummary] = useState<{ actualTotal: number | null; denominations: PersonDenom[] }>({ actualTotal: null, denominations: [] });
- useEffect(() => { setLines(initialLines); setDenomCounts(initialDenomCounts); }, [initialLines, initialDenomCounts]);
+ useEffect(() => { setLines(initialLines); }, [initialLines]);
const setLine = (method: CashupMethod, field: keyof LineInput, value: string) => {
setLines(prev => ({ ...prev, [method]: { ...prev[method], [field]: value } }));
};
- const cashDenominationsPayload = () => ZAR_DENOMINATIONS
- .map(value => ({ value, count: parseInt(denomCounts[value] || "0", 10) || 0 }))
- .filter(d => d.count > 0);
-
- const cashActualFromDenoms = cashDenominationsPayload().reduce((sum, d) => sum + d.value * d.count, 0);
-
+ // Cash is included with notes only — its actual/denominations are always sourced server-side
+ // from per-person counts (see cashupController.closeEvent), never from this payload.
const buildLinesPayload = () => METHODS.map(m => m === "cash"
- ? { method: "cash", denominations: cashDenominationsPayload(), notes: lines.cash.notes || null }
+ ? { method: "cash", notes: lines.cash.notes || null }
: { method: m, actualAmount: lines[m].actualAmount === "" ? null : parseFloat(lines[m].actualAmount), notes: lines[m].notes || null });
const saveDraft = async () => {
@@ -327,6 +664,7 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
try {
await apiFetch(`/api/cashups/event/${eventId}/close`, { method: "POST", authToken: token, body: { lines: buildLinesPayload(), notes: closeNotes || null } });
onChanged();
+ onClosed();
} catch (e: any) {
setError(e?.message || "Failed to close event");
} finally {
@@ -340,6 +678,7 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
try {
await apiFetch(`/api/cashups/event/${eventId}/close`, { method: "POST", authToken: token, body: { notes: closeNotes || null } });
onChanged();
+ onClosed();
} catch (e: any) {
setError(e?.message || "Failed to close event");
} finally {
@@ -391,7 +730,7 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
{isClosed ? (
money(r?.actual ?? null)
) : m === "cash" ? (
- money(cashActualFromDenoms)
+ cashSummary.actualTotal != null ? money(cashSummary.actualTotal) : not counted
) : (
not reconciled )
: (m === "cash"
- ? (cashActualFromDenoms > 0 ? money(cashActualFromDenoms - data.expectedCashByMethod[m]) : "—")
+ ? (cashSummary.actualTotal != null ? money(cashSummary.actualTotal - data.expectedCashByMethod[m]) : "—")
: (lines[m].actualAmount !== "" ? money(parseFloat(lines[m].actualAmount) - data.expectedCashByMethod[m]) : "—"))}
@@ -413,38 +752,31 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
})}
+ {!isClosed && (
+ Cash actual is the live sum of per-staff-member counts entered below — there's no separate event-wide entry.
+ )}
+
Cash denomination count
- {isClosed ? (
- reconciled?.byMethod?.cash?.denominations?.length ? (
+ {(() => {
+ const denoms = isClosed ? (reconciled?.byMethod?.cash?.denominations || []) : cashSummary.denominations;
+ return denoms.length > 0 ? (
- {reconciled.byMethod.cash.denominations.map(d => (
- {denomLabel(d.value)} × {d.count} {money(d.value * d.count)} {denomLabel(d.value)} × {d.count} {money(d.value * d.count)}
- ) :
No denomination breakdown recorded for this cashup.
- ) : (
-
- {ZAR_DENOMINATIONS.map(v => (
-
- {denomLabel(v)}
- ×
-
- ))}
-
- )}
+ ) : (
+
+ {isClosed ? "No denomination breakdown recorded for this cashup." : "No per-staff-member cash counts entered yet — see “Payment accountability by staff member” above."}
+
+ );
+ })()}
diff --git a/frontend/src/app/dashboard/admin/registrations/page.tsx b/frontend/src/app/dashboard/admin/registrations/page.tsx
index f9abc0c..118d938 100644
--- a/frontend/src/app/dashboard/admin/registrations/page.tsx
+++ b/frontend/src/app/dashboard/admin/registrations/page.tsx
@@ -157,6 +157,32 @@ export default function AdminRegistrationsPage() {
return "text-gray-700 bg-gray-50";
};
+ const totalDueFor = (r: any) => (r.registrationOptions || []).reduce((sum: number, opt: any) => {
+ const unit = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
+ ? Number(opt.priceSnapshot)
+ : (opt.eventOption?.price || 0);
+ return sum + unit * (opt.quantity || 0);
+ }, 0);
+ const totalPaidFor = (r: any) => (r.payments || []).reduce((sum: number, p: any) => sum + (p.amount || 0), 0);
+
+ // Aggregate stats across the currently filtered registrations — counts by status, plus
+ // revenue/outstanding totals (cancelled registrations are excluded from the money totals
+ // since they're not expected to be paid).
+ const stats = useMemo(() => {
+ const counts: Record
= {};
+ let totalRevenue = 0;
+ let totalOutstanding = 0;
+ filtered.forEach((r: any) => {
+ counts[r.status] = (counts[r.status] || 0) + 1;
+ if (r.status === "cancelled") return;
+ const due = totalDueFor(r);
+ const paid = totalPaidFor(r);
+ totalRevenue += paid;
+ totalOutstanding += Math.max(due - paid, 0);
+ });
+ return { counts, totalRevenue, totalOutstanding };
+ }, [filtered]);
+
return (
@@ -173,6 +199,24 @@ export default function AdminRegistrationsPage() {
{error &&
{error}
}
{info &&
{info}
}
+ {/* Aggregate stats */}
+
+ {STATUS_OPTIONS.map(s => (
+
+
{s.replace("_", " ")}
+
{stats.counts[s] || 0}
+
+ ))}
+
+
Total revenue
+
R {stats.totalRevenue.toFixed(2)}
+
+
+
Total outstanding
+
R {stats.totalOutstanding.toFixed(2)}
+
+
+
{/* Filters */}
@@ -221,12 +265,9 @@ export default function AdminRegistrationsPage() {
{filtered.map((r: any) => {
- const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => {
- const unit = (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined)
- ? Number(opt.priceSnapshot)
- : (opt.eventOption?.price || 0);
- return sum + unit * (opt.quantity || 0);
- }, 0);
+ const totalDue = totalDueFor(r);
+ const totalPaid = totalPaidFor(r);
+ const outstanding = Math.max(totalDue - totalPaid, 0);
const isExpanded = expanded.has(r.id);
const responses = formResponses[r.id];
const loadingResponse = loadingForms.has(r.id);
@@ -245,7 +286,9 @@ export default function AdminRegistrationsPage() {
{r.user?.email && {r.user.email} }
{r.user?.phoneNumber && {r.user.phoneNumber} }
- R {totalDue.toFixed(2)}
+ R {totalPaid.toFixed(2)} paid
+ {outstanding > 0.000001 && R {outstanding.toFixed(2)} owing }
+ (R {totalDue.toFixed(2)} total)
#{String(r.id).slice(0, 8)}
@@ -306,6 +349,31 @@ export default function AdminRegistrationsPage() {
)}
+ {/* Payments */}
+
+
Payments
+ {(r.payments || []).length === 0 ? (
+
No payments recorded.
+ ) : (
+
+ {r.payments.map((p: any) => (
+
+
+ {p.amount < 0 ? '-' : ''}R {Math.abs(p.amount).toFixed(2)} · {p.method || 'payment'}
+
+
{new Date(p.createdAt).toLocaleString()}
+ {p.recordedBy?.name && String(p.recordedBy.id) !== String(p.userId) && (
+
Recorded by: {p.recordedBy.name}
+ )}
+
+ ))}
+
+ )}
+
+ Paid: R {totalPaid.toFixed(2)}{outstanding > 0.000001 && · Owing: R {outstanding.toFixed(2)} }
+
+
+
{/* Form responses */}
Form responses
diff --git a/frontend/src/app/dashboard/admin/users/page.tsx b/frontend/src/app/dashboard/admin/users/page.tsx
index 2744a0c..06873a3 100644
--- a/frontend/src/app/dashboard/admin/users/page.tsx
+++ b/frontend/src/app/dashboard/admin/users/page.tsx
@@ -12,6 +12,7 @@ interface UserItem {
email: string;
role: string;
phoneNumber?: string | null;
+ notificationPreference?: string;
isActive: boolean;
createdAt: string;
updatedAt: string;
@@ -20,6 +21,8 @@ interface UserItem {
const roleOptions = ["user", "staff", "supervisor", "admin"] as const;
type Role = typeof roleOptions[number];
+const notificationPreferenceOptions = ["email", "whatsapp", "both"] as const;
+
// Simple fuzzy: tolerate one missing/swapped char by checking if query chars appear in order
function fuzzyMatch(query: string, target: string): boolean {
const q = query.toLowerCase();
@@ -71,10 +74,11 @@ export default function AdminUsersPage() {
const [cRole, setCRole] = useState
("user");
const [creating, setCreating] = useState(false);
- // Inline edit state
+ // Edit modal state
const [editingId, setEditingId] = useState(null);
const [editData, setEditData] = useState & { password?: string }>({});
const [saving, setSaving] = useState(false);
+ const editingUser = useMemo(() => users.find(u => u.id === editingId) || null, [users, editingId]);
const buildQuery = useCallback((p: number, ps = pageSize) => {
const qs = new URLSearchParams({ page: String(p), limit: String(ps) });
@@ -152,6 +156,7 @@ export default function AdminUsersPage() {
email: editData.email,
role: editData.role,
phoneNumber: editData.phoneNumber || null,
+ notificationPreference: editData.notificationPreference,
isActive: editData.isActive,
};
if (editData.password && editData.password.trim().length > 0) {
@@ -305,8 +310,8 @@ export default function AdminUsersPage() {
Email
Role
Phone
+ Notify
Active
- Password
Actions
@@ -314,63 +319,30 @@ export default function AdminUsersPage() {
{users.map(u => (
- {editingId === u.id ? (
- {u.name}
- )}
+ {u.name}
- {editingId === u.id ? (
- {u.email}
- )}
+ {u.email}
- {editingId === u.id ? (
- setEditData(d => ({ ...d, role: e.target.value }))}>
- {roleOptions.map(r => {r} )}
-
- ) : (
- {u.role}
- )}
+ {u.role}
- {editingId === u.id ? (
- {u.phoneNumber || ""}
- )}
+ {u.phoneNumber || ""}
- {editingId === u.id ? (
- {u.isActive ? "Yes" : "No"}
- )}
+ {u.notificationPreference || "email"}
- {editingId === u.id ? (
- —
- )}
+ {u.isActive ? "Yes" : "No"}
- {editingId === u.id ? (
-
- Cancel
- {saving ? "Saving…" : "Save"}
-
- ) : (
-
- startEdit(u)}>Edit
- revokeUserSessions(u.id, u.name)} title="Sign out all devices">Sessions
- deactivate(u.id)} title="Deactivate account">Deactivate
- deleteUserData(u.id, u.name)} title="Erase personal data">Delete data
-
- )}
+
+ startEdit(u)}>Edit
+ revokeUserSessions(u.id, u.name)} title="Force this user to sign in again on every device where they're currently logged in">Sign out everywhere
+ deactivate(u.id)} title="Deactivate account">Deactivate
+ deleteUserData(u.id, u.name)} title="Erase personal data">Delete data
+
))}
@@ -431,6 +403,70 @@ export default function AdminUsersPage() {
)}
+
+ {editingUser && (
+
+
!saving && cancelEdit()} />
+
+
+
+
Edit user
+ Close
+
+
+
+ Name
+
+
+ Email
+
+
+
+ Role
+ setEditData(d => ({ ...d, role: e.target.value }))}>
+ {roleOptions.map(r => {r} )}
+
+
+
+ Phone
+
+
+
+
+ Notification preference
+ setEditData(d => ({ ...d, notificationPreference: e.target.value }))}
+ >
+ {notificationPreferenceOptions.map(p => (
+ {p}
+ ))}
+
+
+
+
+
+
+
+
+ New password (leave blank to keep current)
+
+
+
+ Cancel
+ {saving ? "Saving…" : "Save"}
+
+
+
+
+ )}
);
}
\ No newline at end of file
diff --git a/frontend/src/app/dashboard/layout.tsx b/frontend/src/app/dashboard/layout.tsx
index bd60444..ba18e65 100644
--- a/frontend/src/app/dashboard/layout.tsx
+++ b/frontend/src/app/dashboard/layout.tsx
@@ -63,16 +63,25 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
);
}
+ // The Reports page is a full-width, self-contained workspace (its own header, filters, and
+ // navigation) — the dashboard sidebar's section links (My Events, Profile, Admin, etc.) would
+ // just crowd it, so it's hidden there specifically, not app-wide.
+ const hideSidebar = pathname === "/dashboard/supervisor/reports";
+
return (
- {/* Mobile dropdown navigation */}
-
- {/* Desktop sidebar */}
-
-
+ {!hideSidebar && (
+ <>
+ {/* Mobile dropdown navigation */}
+
+ {/* Desktop sidebar */}
+
+
+
+ )}
{children}
diff --git a/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx b/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx
index defc9e7..e092cf5 100644
--- a/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx
+++ b/frontend/src/app/dashboard/supervisor/email-attendees/page.tsx
@@ -466,8 +466,8 @@ function EmailAttendeesPageInner() {
if (body.trim().startsWith('<')) payload.html = body; else payload.text = body.replace(/\n/g, '\n');
}
const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/email-attendees`, { method: 'POST', authToken: token, body: payload });
- const sent = res?.sent ?? 0; const matched = res?.matched ?? 0;
- setInfo(`Sent ${sent} out of ${matched} recipient(s).`);
+ const queued = res?.queued ?? res?.matched ?? 0;
+ setInfo(`Queued ${queued} recipient(s) for sending.`);
// Reset form to default state
resetAttendeesForm();
} catch (e: any) {
@@ -552,7 +552,7 @@ function EmailAttendeesPageInner() {
-
Available placeholders: {'{{name}}'}, {'{{event.title}}'}, {'{{event.start}}'}, {'{{balance}}'} setShowInfo(true)}>Learn more
+
Available placeholders: {'{{name}}'}, {'{{event.title}}'}, {'{{event.start}}'}, {'{{balance}}'}, {'{{payment.link}}'} setShowInfo(true)}>Learn more
@@ -572,9 +572,10 @@ function EmailAttendeesPageInner() {
{'{{event.title}}'} — the event title.{'{{event.start}}'} — the event start date/time (local).{'{{balance}}'} — outstanding amount across the attendee’s registrations for the selected event.
+
{'{{payment.link}}'} — a direct Yoco payment link for the attendee's outstanding balance (generated per recipient when sending).
-
Example: Hi {'{{name}}'}, your balance is {'{{balance}}'}.
-
To add new placeholders, extend the replacement logic in eventController.emailEventAttendees (replacePlaceholders function) and update this help.
+
Example: Hi {'{{name}}'}, your balance is {'{{balance}}'}. Pay here: {'{{payment.link}}'}
+
To add new placeholders, extend backend/src/utils/placeholders.js and update this help.
;
@@ -439,7 +448,8 @@ function PaymentsContent() {
// Stats
const todayTotals = useMemo(() => {
const start = new Date(); start.setHours(0,0,0,0);
- const today = payments.filter(p => new Date(p.createdAt).getTime() >= start.getTime());
+ // Exclude donation-application legs — that money was already counted once, as the donation.
+ const today = payments.filter(p => new Date(p.createdAt).getTime() >= start.getTime() && !isDonationLeg(p));
const revenue = today.reduce((s,p)=> s + (p.amount||0), 0);
const donations = today.filter(p => p.isDonation).length;
return { revenue, donations, count: today.length };
@@ -805,7 +815,7 @@ function PaymentsContent() {
{loadingList && Loading… }
- {payments.slice(0, 25).map(p => {
+ {payments.filter(p => !isDonationLeg(p)).slice(0, 25).map(p => {
const amt = p.amount || 0;
const isRefund = amt < 0;
return (
@@ -818,6 +828,9 @@ function PaymentsContent() {
{(p.registration?.user?.name || p.user?.name) && Name: {p.registration?.user?.name || p.user?.name}
}
{p.registrationId && Registration: #{String(p.registrationId).slice(0,8)}
}
{p.eventId && Event: {p.event?.title || p.eventId}
}
+ {p.recordedBy?.name && String(p.recordedBy.id) !== String(p.userId) && (
+ Recorded by: {p.recordedBy.name}
+ )}
);
})}
@@ -1025,27 +1038,50 @@ function DonationAssignSection({ payments, allUsers, registrations, regOutstandi
[registrations, registrationId]
);
- // Donations "relevant to that event" — unassigned donations logged against the same event
- // as the chosen registration.
+ // A donation is never mutated once assigned — each assignment creates a separate "leg"
+ // Payment row (isDonation:false, originalPaymentId -> the donation). A donation's remaining
+ // balance is its original amount minus every leg that references it, so it stays offerable
+ // (and its registrationId stays null forever) until fully used up.
+ const legsById = useMemo(() => {
+ const m = new Map();
+ payments.forEach((p: any) => {
+ if (p.originalPaymentId && !p.isDonation) {
+ m.set(p.originalPaymentId, (m.get(p.originalPaymentId) || 0) + (p.amount || 0));
+ }
+ });
+ return m;
+ }, [payments]);
+
+ // Donations "relevant to that event" — donations logged against the same event as the
+ // chosen registration that still have a remaining, unused balance.
const donationsForEvent = useMemo(() => {
if (!selectedRegistration) return [] as any[];
const eventId = selectedRegistration.eventId || selectedRegistration.event?.id;
- return payments.filter((p: any) => p.isDonation && !p.registrationId && String(p.eventId) === String(eventId));
- }, [payments, selectedRegistration]);
+ return payments.filter((p: any) => {
+ if (!p.isDonation || p.registrationId) return false;
+ if (String(p.eventId) !== String(eventId)) return false;
+ const remaining = (p.amount || 0) - (legsById.get(p.id) || 0);
+ return remaining > 0.000001;
+ });
+ }, [payments, selectedRegistration, legsById]);
const selectedDonation = useMemo(
() => payments.find((p: any) => String(p.id) === String(paymentId)),
[payments, paymentId]
);
+ const donationRemaining = selectedDonation
+ ? (selectedDonation.amount || 0) - (legsById.get(selectedDonation.id) || 0)
+ : 0;
+
const outstanding = registrationId ? (regOutstanding[registrationId]?.outstanding ?? 0) : 0;
- // The most that can be allocated: never more than the donation itself, never more than
- // what's actually owed. Staff can type a smaller amount to leave a balance outstanding.
+ // The most that can be allocated: never more than the donation's remaining balance, never
+ // more than what's actually owed. Staff can type a smaller amount to leave a balance owing.
const maxAllocatable = useMemo(() => {
if (!selectedDonation) return 0;
- return Math.min(selectedDonation.amount || 0, outstanding);
- }, [selectedDonation, outstanding]);
+ return Math.min(donationRemaining, outstanding);
+ }, [selectedDonation, donationRemaining, outstanding]);
// Default to "apply as much as needed" whenever a new donation is picked — the common
// case needs no typing, but the field stays editable for a deliberate partial allocation.
@@ -1055,7 +1091,7 @@ function DonationAssignSection({ payments, allUsers, registrations, regOutstandi
}, [paymentId]);
const amountNum = parseFloat(amountStr || "0");
- const leftover = selectedDonation ? Math.max(0, (selectedDonation.amount || 0) - amountNum) : 0;
+ const leftover = selectedDonation ? Math.max(0, donationRemaining - amountNum) : 0;
const assign = async () => {
if (!token) return;
@@ -1110,12 +1146,13 @@ function DonationAssignSection({ payments, allUsers, registrations, regOutstandi
>
Select donation…
{donationsForEvent.map((p: any) => {
- const label = `R ${(p.amount || 0).toFixed(2)} — ${p.user?.name || p.userId || 'Donor'} — #${String(p.id).slice(0,8)}`;
+ const remaining = (p.amount || 0) - (legsById.get(p.id) || 0);
+ const label = `R ${remaining.toFixed(2)} of R ${(p.amount || 0).toFixed(2)} left — ${p.user?.name || p.userId || 'Donor'} — #${String(p.id).slice(0,8)}`;
return {label} ;
})}
{registrationId && donationsForEvent.length === 0 && (
- No unassigned donations for this event.
+ No donations with a remaining balance for this event.
)}
{selectedDonation && (
@@ -1131,8 +1168,8 @@ function DonationAssignSection({ payments, allUsers, registrations, regOutstandi
onChange={e => setAmountStr(e.target.value)}
/>
- Donation is R {(selectedDonation.amount || 0).toFixed(2)}; outstanding balance is R {outstanding.toFixed(2)}.
- {leftover > 0.000001 && <> The remaining R {leftover.toFixed(2)} will stay unassigned as a donation.}
+ Donation has R {donationRemaining.toFixed(2)} remaining (of R {(selectedDonation.amount || 0).toFixed(2)} total); outstanding balance is R {outstanding.toFixed(2)}.
+ {leftover > 0.000001 && <> The remaining R {leftover.toFixed(2)} will stay available on this donation for future assignments.}
)}
diff --git a/frontend/src/app/dashboard/supervisor/reports/page.tsx b/frontend/src/app/dashboard/supervisor/reports/page.tsx
index b4d5082..0984015 100644
--- a/frontend/src/app/dashboard/supervisor/reports/page.tsx
+++ b/frontend/src/app/dashboard/supervisor/reports/page.tsx
@@ -7,13 +7,8 @@ import ReportsV2 from "@/components/reports/ReportsV2";
export default function SupervisorReportsPage() {
const router = useRouter();
return (
-
-
-
Reports
- router.push('/dashboard')}>Back
-
-
View, export, or email operational reports for events.
-
+
+ router.push('/dashboard')} />
);
}
diff --git a/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx b/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx
index ef02d1d..cbf0890 100644
--- a/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx
+++ b/frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx
@@ -476,7 +476,7 @@ function WhatsAppAttendeesPageInner() {
if (templateKey !== "tickets" && !message.trim()) { setError("Message is required"); return; }
setSending(true);
const res = await apiFetch(`/api/events/${encodeURIComponent(eventId)}/whatsapp-attendees`, { method: "POST", authToken: token, body: buildPayload() });
- setInfo(`Sent ${res?.sent ?? 0} out of ${res?.matched ?? 0} recipient(s).`);
+ setInfo(`Queued ${res?.queued ?? res?.matched ?? 0} recipient(s) for sending.`);
resetAttendeesForm();
} catch (e: any) { setError(e?.message || "Failed to send"); } finally { setSending(false); }
};
@@ -655,7 +655,7 @@ function WhatsAppAttendeesPageInner() {
- Placeholders: {"{{name}}"}, {"{{event.title}}"}, {"{{event.start}}"}, {"{{balance}}"}
+ Placeholders: {"{{name}}"}, {"{{event.title}}"}, {"{{event.start}}"}, {"{{balance}}"}, {"{{payment.link}}"}
@@ -676,6 +676,7 @@ function WhatsAppAttendeesPageInner() {
{"{{event.title}}"} — the event title.{"{{event.start}}"} — the event start date/time.{"{{balance}}"} — outstanding balance for the event.{"{{payment.link}}"} — a direct Yoco payment link for the attendee's outstanding balance (generated per recipient when sending).
Preference indicators: WA = WhatsApp only,{" "}
diff --git a/frontend/src/components/reports/EventsDropdown.tsx b/frontend/src/components/reports/EventsDropdown.tsx
new file mode 100644
index 0000000..971445e
--- /dev/null
+++ b/frontend/src/components/reports/EventsDropdown.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+export default function EventsDropdown({ options, value, onChange }: {
+ options: { value: string; label: string }[];
+ value: string[];
+ onChange: (v: string[]) => void;
+}) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const onClick = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+ };
+ document.addEventListener("mousedown", onClick);
+ return () => document.removeEventListener("mousedown", onClick);
+ }, []);
+
+ const toggle = (v: string) => {
+ onChange(value.includes(v) ? value.filter(x => x !== v) : [...value, v]);
+ };
+
+ const summary = value.length === 0
+ ? "No events selected"
+ : options.length > 0 && value.length === options.length
+ ? "All events"
+ : value.length === 1
+ ? (options.find(o => o.value === value[0])?.label || "1 event selected")
+ : `${value.length} events selected`;
+
+ return (
+
+
setOpen(o => !o)}
+ className="w-full flex items-center justify-between gap-2 border rounded-lg px-3 py-2 text-sm bg-white hover:bg-gray-50"
+ >
+ {summary}
+
+ {open && (
+
+
+ onChange(options.map(o => o.value))}>Select all
+ onChange([])}>Clear
+
+ {options.map(opt => (
+
+ {opt.label}
+
+ ))}
+ {options.length === 0 &&
No events available.
}
+
+ )}
+
+
+
+
e.stopPropagation()}>
+
+
+ {Icon && (
+
+
+ )}
+
+
{title}
+ {description &&
{description}
}
+
+
+
+ {actions}
+
+
+
+
+
+
+
+ This report has no extra filters beyond Events and Date range in the sidebar. }
+
+ {onRefresh && (
+
+
+ )}
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/reports/ReportingGuideModal.tsx b/frontend/src/components/reports/ReportingGuideModal.tsx
new file mode 100644
index 0000000..58f1b00
--- /dev/null
+++ b/frontend/src/components/reports/ReportingGuideModal.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+ X, Home, Filter, ListFilter, Download, BarChart2, MessageCircleQuestion,
+ Calendar, CalendarClock, EyeOff, Printer, Mail, FileSpreadsheet, MessageCircle,
+ CreditCard, Gift, Clock, HandHeart, RefreshCw, type LucideIcon,
+} from "lucide-react";
+
+type GuideTab = "overview" | "universal" | "specific" | "exporting" | "fields" | "help";
+
+const TABS: { key: GuideTab; label: string; icon: LucideIcon }[] = [
+ { key: "overview", label: "Overview", icon: Home },
+ { key: "universal", label: "Universal filters", icon: Filter },
+ { key: "specific", label: "Report-specific filters", icon: ListFilter },
+ { key: "exporting", label: "Exporting reports", icon: Download },
+ { key: "fields", label: "Fields & metrics", icon: BarChart2 },
+ { key: "help", label: "Need more help?", icon: MessageCircleQuestion },
+];
+
+const TONES = {
+ indigo: { bg: "bg-indigo-50", icon: "text-indigo-600" },
+ emerald: { bg: "bg-emerald-50", icon: "text-emerald-600" },
+ amber: { bg: "bg-amber-50", icon: "text-amber-600" },
+ blue: { bg: "bg-blue-50", icon: "text-blue-600" },
+ violet: { bg: "bg-violet-50", icon: "text-violet-600" },
+ rose: { bg: "bg-rose-50", icon: "text-rose-600" },
+ gray: { bg: "bg-gray-100", icon: "text-gray-600" },
+} as const;
+type Tone = keyof typeof TONES;
+
+function GuideItem({ icon: Icon, title, children, tone = "gray" }: { icon: LucideIcon; title: string; children: React.ReactNode; tone?: Tone }) {
+ const t = TONES[tone] || TONES.gray;
+ return (
+
+ );
+}
+
+export const GUIDE_DISMISSED_KEY = "hope_events_reports_guide_dismissed";
+const ADMIN_EMAIL = "admin@crosscode.co.za";
+
+export default function ReportingGuideModal({ onClose }: { onClose: (dontShowAgain: boolean) => void }) {
+ const [tab, setTab] = useState("overview");
+ const [dontShowAgain, setDontShowAgain] = useState(false);
+
+ return (
+ // Above the site header (Navbar is `sticky top-0 z-50`) and above the report popup
+ // (z-[60]), since the guide can be opened while a report is showing.
+
+
onClose(dontShowAgain)} />
+
+
e.stopPropagation()}>
+
+
+
+
+
+
Reporting guide
+
This guide explains how reports work and how to use the available filters.
+
+
+
onClose(dontShowAgain)} aria-label="Close">
+
+
+
+
+
+ {TABS.map(t => {
+ const Icon = t.icon;
+ const active = tab === t.key;
+ return (
+ setTab(t.key)}
+ className={"w-full flex items-center gap-2 text-left text-sm px-3 py-2 rounded-lg " + (active ? "bg-indigo-50 text-indigo-700 font-medium" : "text-gray-600 hover:bg-gray-50")}
+ >
+
+ );
+ })}
+
+
+
+ {tab === "overview" && (
+
+
Reports help you view key data about your events. You can filter the data, preview it on screen, and export or email it.
+
+
+ Apply universal filters (like events and date range) that affect all reports, and report-specific filters for more detailed results.
+
+
+ Preview your report, adjust filters, and choose how you want the data to appear.
+
+
+ Export your report to Excel, PDF, or send it by email or WhatsApp.
+
+
+
+ )}
+
+ {tab === "universal" && (
+
+
Universal filters live in the sidebar on the left and apply to whichever report you open — you only set them once, not per report.
+
+
+ Pick one or more events. Every report loads data for exactly these events.
+
+
+ Controls which events even appear in the Events list to pick from.
+
+
+ A preset (This month, Last month, This year) or a custom range. Only applies to reports that are inherently date-based (e.g. Payments between dates, Revenue reports, Cashup audit trail) — reports like Attendees or Ticket usage show a live snapshot and ignore the date range.
+
+
+
+ )}
+
+ {tab === "specific" && (
+
+
Some reports have extra options that only make sense for that report — these appear at the top of the report popup once it's open, separate from the universal filters.
+
+
+ Which single event to show (defaults to the first selected event) and whether to include cancelled registrations.
+
+
+ Whether to include cancelled registrations in the counts, and whether to count by number of registrations or by ticket quantity (so someone with 3 tickets counts as 3).
+
+
+ Adjust a report-specific filter, then use the "Refresh" button inside the popup to re-run the report without closing it.
+
+
+
+ )}
+
+ {tab === "exporting" && (
+
+
Every report can be exported straight from its popup:
+
+
+ Opens a print-ready PDF in a new tab; use your browser's print button from there.
+
+
+ Sends the PDF to your own account email.
+
+
+ Downloads a styled .xlsx workbook — colored header, key totals, and a chart section where available — matching the on-screen report.
+
+
+ Sends the PDF to your own account's WhatsApp number (needs a valid phone number on file).
+
+
+
+ )}
+
+ {tab === "fields" && (
+
+
A few terms come up across several financial reports and are easy to misread — here's what each one actually means:
+
+
+ Money the person paid themselves directly (cash/card/eft/online). Never includes money that reached their order via someone else's donation.
+
+
+ The portion of an order that was covered by an assigned donation. This is part of what's "settled" on the order, but it's the donor's money, not the registrant's — so it's broken out separately and attributed to the donor elsewhere in the report.
+
+
+ What's still owed on an order, after direct payments and any donation cover.
+
+
+ Real money already received as a donation that hasn't been applied to any order yet.
+
+
+ How much of a given donation has been assigned to orders (Used) versus what's still available to assign (Unused). A donation is never overwritten when assigned — the original donation record always keeps its full original amount.
+
+
+
+ )}
+
+ {tab === "help" && (
+
+
Still stuck? Reach out to the site administrator — they can check the underlying data with you or flag anything that looks wrong.
+
+
Financial figures matter — if a number in a report doesn't look right, it's always worth asking rather than assuming.
+
+ )}
+
+
+
+
+
+
+ onClose(dontShowAgain)}>
+ Got it
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/reports/ReportsShell.tsx b/frontend/src/components/reports/ReportsShell.tsx
new file mode 100644
index 0000000..36aab9c
--- /dev/null
+++ b/frontend/src/components/reports/ReportsShell.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { ArrowLeft, HelpCircle, Search } from "lucide-react";
+import { REPORTS, REPORT_CATEGORIES, type ReportKey, type ReportCategory } from "./ReportCatalog";
+import EventsDropdown from "./EventsDropdown";
+
+type EventLite = { id: string; title: string };
+type DatePreset = "all_time" | "this_month" | "last_month" | "this_year" | "custom";
+
+export default function ReportsShell({
+ events, isAdmin,
+ showPastEvents, setShowPastEvents,
+ showInactiveEvents, setShowInactiveEvents,
+ showClosedEvents, setShowClosedEvents,
+ selectedEventIds, setSelectedEventIds,
+ dateFrom, setDateFrom, dateTo, setDateTo,
+ report, setReport,
+ onViewReport, busy,
+ onOpenGuide,
+ onBack,
+}: {
+ events: EventLite[]; isAdmin: boolean;
+ showPastEvents: boolean; setShowPastEvents: (v: boolean) => void;
+ showInactiveEvents: boolean; setShowInactiveEvents: (v: boolean) => void;
+ showClosedEvents: boolean; setShowClosedEvents: (v: boolean) => void;
+ selectedEventIds: string[]; setSelectedEventIds: (v: string[]) => void;
+ dateFrom: string; setDateFrom: (v: string) => void; dateTo: string; setDateTo: (v: string) => void;
+ report: ReportKey; setReport: (r: ReportKey) => void;
+ onViewReport: () => void; busy: boolean;
+ onOpenGuide: () => void;
+ onBack?: () => void;
+}) {
+ const [search, setSearch] = useState("");
+ const [category, setCategory] = useState<"All" | ReportCategory>("All");
+ const [datePreset, setDatePreset] = useState
("all_time");
+
+ const iso = (d: Date) => d.toISOString().slice(0, 10);
+ const applyPreset = (preset: DatePreset) => {
+ setDatePreset(preset);
+ const now = new Date();
+ if (preset === "this_month") {
+ setDateFrom(iso(new Date(now.getFullYear(), now.getMonth(), 1)));
+ setDateTo(iso(new Date(now.getFullYear(), now.getMonth() + 1, 0)));
+ } else if (preset === "last_month") {
+ setDateFrom(iso(new Date(now.getFullYear(), now.getMonth() - 1, 1)));
+ setDateTo(iso(new Date(now.getFullYear(), now.getMonth(), 0)));
+ } else if (preset === "this_year") {
+ setDateFrom(iso(new Date(now.getFullYear(), 0, 1)));
+ setDateTo(iso(new Date(now.getFullYear(), 11, 31)));
+ } else if (preset === "all_time") {
+ setDateFrom(""); setDateTo("");
+ }
+ // 'custom' leaves dateFrom/dateTo as whatever's typed in the fields below
+ };
+
+ const filteredReports = useMemo(() => {
+ return REPORTS.filter(r => {
+ if (category !== "All" && r.category !== category) return false;
+ if (search.trim()) {
+ const q = search.trim().toLowerCase();
+ if (!r.label.toLowerCase().includes(q) && !r.description.toLowerCase().includes(q)) return false;
+ }
+ return true;
+ });
+ }, [search, category]);
+
+ return (
+
+
+
+
Reports
+
View, export, or email operational reports for events.
+
+
+
+
+ {onBack && (
+
+
+ )}
+
+
+
+
+ {/* Sidebar: universal filters */}
+
+
+ {/* Main: categories, report grid */}
+
+
+ {(["All", ...REPORT_CATEGORIES] as const).map(c => (
+ setCategory(c)}
+ >
+ {c}
+
+ ))}
+
+
+
+ {filteredReports.map(r => {
+ const Icon = r.icon;
+ const selected = report === r.key;
+ return (
+
setReport(r.key)}
+ className={"text-left border rounded-xl p-4 transition " + (selected ? "border-indigo-500 ring-2 ring-indigo-100 bg-indigo-50/40" : "border-gray-200 hover:border-gray-300 bg-white")}
+ >
+
+
+ {r.label}
+ {r.description}
+
+ {r.category}
+ {r.fields} fields
+
+
+ );
+ })}
+ {filteredReports.length === 0 && (
+
No reports match your search.
+ )}
+
+
+
+
Filters will be applied to the selected report where relevant.
+
+ {busy ? "Loading…" : "View report"}
+
+
+
+
+
= { cash: "Cash", card: "Card", eft: "EFT", other: "Other" };
@@ -32,6 +20,15 @@ function denomLabel(v: number): string {
function money2(n: number | null | undefined): string {
return `R${Number(n || 0).toFixed(2)}`;
}
+// A donation is never mutated once created — assigning it to a registration creates a separate
+// "leg" Payment row (isDonation:false, originalPaymentId -> the donation, amount > 0) instead.
+// That leg is not new money: it just re-labels part of an already-counted donation as applied
+// to a registration. Aggregate revenue/received totals must count each real inflow exactly
+// once, so legs are excluded — the money was already counted via the original donation row.
+// (Refunds also set originalPaymentId, but always with a negative amount, so they're unaffected.)
+function isDonationLeg(p: any): boolean {
+ return !p?.isDonation && !!p?.originalPaymentId && (p?.amount || 0) > 0;
+}
function actionLabel(action: string): string {
return action === "closed" ? "Closed (full cashup)" : action === "quick_closed" ? "Quick closed" : "Reopened";
}
@@ -90,25 +87,7 @@ function optionUnitPrice(ro: any, referenceTime: any, atTime: Date): number {
}
// Simple MultiSelect control used in filters
-function MultiSelect({ options, value, onChange }: { options: { value: string; label: string }[]; value: string[]; onChange: (v: string[]) => void }) {
- const toggle = (v: string) => {
- const set = new Set(value);
- if (set.has(v)) set.delete(v); else set.add(v);
- onChange(Array.from(set));
- };
- return (
-
- {options.map(opt => (
-
-
- ))}
-
- );
-}
-
-export default function ReportsV2() {
+export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
const { token, user } = useAuth();
const role = user?.role || "user";
const canView = role === "admin" || role === "supervisor";
@@ -155,47 +134,54 @@ export default function ReportsV2() {
const [report, setReport] = useState("payments");
const [ready, setReady] = useState(false); // toggled by View button
const [busy, setBusy] = useState(false);
+ const [popupOpen, setPopupOpen] = useState(false);
+ const [guideOpen, setGuideOpen] = useState(false);
- // Filters per report
- // Payments
- const [payFrom, setPayFrom] = useState("");
- const [payTo, setPayTo] = useState("");
- const [payEvents, setPayEvents] = useState([]);
+ // Show the reporting guide automatically on first visit, unless the user dismissed it for good.
+ useEffect(() => {
+ try {
+ if (typeof window !== "undefined" && window.localStorage.getItem(GUIDE_DISMISSED_KEY) !== "1") {
+ setGuideOpen(true);
+ }
+ } catch {}
+ }, []);
- // Attendees
+ const closeGuide = (dontShowAgain: boolean) => {
+ setGuideOpen(false);
+ if (dontShowAgain) {
+ try { window.localStorage.setItem(GUIDE_DISMISSED_KEY, "1"); } catch {}
+ }
+ };
+
+ // Universal filters — apply to every report's onView loader (per-report filters below stay
+ // report-specific). A single events selection replaces what used to be ~10 separate
+ // per-report "Events" multi-selects, and a single date range replaces payFrom/payTo and
+ // auditFrom/auditTo — both now live in the sidebar (ReportsShell) instead of being re-picked
+ // per report.
+ const [selectedEventIds, setSelectedEventIds] = useState([]);
+ const [dateFrom, setDateFrom] = useState("");
+ const [dateTo, setDateTo] = useState("");
+ // Back-compat aliases so the many existing date-filtered useMemo/CSV/PDF/email blocks below
+ // (written against payFrom/payTo/auditFrom/auditTo) don't all need renaming.
+ const payFrom = dateFrom, payTo = dateTo, auditFrom = dateFrom, auditTo = dateTo;
+
+ // Attendees (single-event report — defaults to the first universally-selected event, with
+ // its own picker in the popup if more than one event is selected)
const [attEventId, setAttEventId] = useState("");
const [attIncludeCancelled, setAttIncludeCancelled] = useState(false);
- // Registration type counts
- const [regTypeEvents, setRegTypeEvents] = useState([]);
-
- // Ticket usage summary
- const [usageEvents, setUsageEvents] = useState([]);
-
- // Revenue summary
- const [revEvents, setRevEvents] = useState([]);
- // Revenue detailed
- const [revDetEvents, setRevDetEvents] = useState([]);
-
- //Master Events
- const [masterEvents, setMasterEvents] = useState([]);
+ // Master orders breakdown — in-popup search boxes for the Orders / Donations made tables
+ const [masterOrderSearch, setMasterOrderSearch] = useState("");
+ const [masterDonationSearch, setMasterDonationSearch] = useState("");
// Registration status breakdown
- const [statusEvents, setStatusEvents] = useState([]);
const [statusIncludeCancelled, setStatusIncludeCancelled] = useState(true);
-
- // Donations breakdown
- const [donationEvents, setDonationEvents] = useState([]);
-
- // Cashup / Finance / Profit (all driven by the same per-event financials endpoint)
- const [cashupEvents, setCashupEvents] = useState([]);
- const [financeEvents, setFinanceEvents] = useState([]);
- const [profitEvents, setProfitEvents] = useState([]);
-
- // Cashup audit trail
- const [auditEvents, setAuditEvents] = useState([]);
- const [auditFrom, setAuditFrom] = useState("");
- const [auditTo, setAuditTo] = useState("");
+ const [statusCountMode, setStatusCountMode] = useState<'registrations' | 'tickets'>('registrations');
+ // 'registrations' mode: one count per registration row. 'tickets' mode: sum of ticket
+ // quantity across the registration's options, so someone with 3 tickets counts as 3.
+ const countForStatus = (r: any) => statusCountMode === 'tickets'
+ ? (r.registrationOptions || []).reduce((s: number, ro: any) => s + (ro.quantity || 0), 0)
+ : 1;
// Data stores
const [paymentsByEvent, setPaymentsByEvent] = useState>({});
@@ -204,24 +190,20 @@ export default function ReportsV2() {
const [financialsByEvent, setFinancialsByEvent] = useState>({});
const [auditRows, setAuditRows] = useState([]);
- // Initialize default selections when events load
+ // Initialize default selection when events load
useEffect(() => {
if (filteredEvents.length === 0) return;
- const first1 = filteredEvents.slice(0, 1).map((e: any) => e.id);
- if (payEvents.length === 0) setPayEvents(first1);
- if (regTypeEvents.length === 0) setRegTypeEvents(first1);
- if (usageEvents.length === 0) setUsageEvents(first1);
- if (revEvents.length === 0) setRevEvents(first1);
- if (revDetEvents.length === 0) setRevDetEvents(first1);
- if (statusEvents.length === 0) setStatusEvents(first1);
+ if (selectedEventIds.length === 0) setSelectedEventIds(filteredEvents.slice(0, 1).map((e: any) => e.id));
if (!attEventId) setAttEventId(filteredEvents[0].id);
- if (masterEvents.length === 0) setMasterEvents(first1);
- if (donationEvents.length === 0) setDonationEvents(first1);
- if (cashupEvents.length === 0) setCashupEvents(first1);
- if (financeEvents.length === 0) setFinanceEvents(first1);
- if (profitEvents.length === 0) setProfitEvents(first1);
}, [filteredEvents]);
+ // Attendees' single-event picker defaults to (and stays within) the universal selection.
+ useEffect(() => {
+ if (selectedEventIds.length > 0 && !selectedEventIds.includes(attEventId)) {
+ setAttEventId(selectedEventIds[0]);
+ }
+ }, [selectedEventIds]);
+
// Loaders
const loadPayments = async (eventIds: string[]) => {
if (!token || !eventIds.length) return {} as Record;
@@ -300,52 +282,52 @@ export default function ReportsV2() {
setReady(false);
try {
if (report === "payments") {
- const byEv = await loadPayments(payEvents);
+ const byEv = await loadPayments(selectedEventIds);
setPaymentsByEvent(byEv);
} else if (report === "attendees") {
- const byEv = await loadRegistrations([attEventId]);
+ const byEv = await loadRegistrations([attEventId || selectedEventIds[0]].filter(Boolean));
setRegistrationsByEvent(byEv);
} else if (report === "regTypes") {
- const byEv = await loadRegistrations(regTypeEvents);
+ const byEv = await loadRegistrations(selectedEventIds);
setRegistrationsByEvent(byEv);
} else if (report === "usage") {
- const usage = await loadTicketUsage(usageEvents);
+ const usage = await loadTicketUsage(selectedEventIds);
setTicketUsage(usage);
} else if (report === "revenue") {
- const byEv = await loadPayments(revEvents);
+ const byEv = await loadPayments(selectedEventIds);
setPaymentsByEvent(byEv);
} else if (report === "revenueDetailed") {
const [byEvP, byEvR] = await Promise.all([
- loadPayments(revDetEvents),
- loadRegistrations(revDetEvents)
+ loadPayments(selectedEventIds),
+ loadRegistrations(selectedEventIds)
]);
setPaymentsByEvent(byEvP);
setRegistrationsByEvent(byEvR);
} else if (report === "regStatus") {
- const byEv = await loadRegistrations(statusEvents);
+ const byEv = await loadRegistrations(selectedEventIds);
setRegistrationsByEvent(byEv);
} else if (report === "masterOrders") {
const [byEvP, byEvR] = await Promise.all([
- loadPayments(masterEvents),
- loadRegistrations(masterEvents)
+ loadPayments(selectedEventIds),
+ loadRegistrations(selectedEventIds)
]);
setPaymentsByEvent(byEvP);
setRegistrationsByEvent(byEvR);
} else if (report === "donations") {
- const byEv = await loadPayments(donationEvents);
+ const byEv = await loadPayments(selectedEventIds);
setPaymentsByEvent(byEv);
} else if (report === "cashup") {
- const byEv = await loadFinancials(cashupEvents);
+ const byEv = await loadFinancials(selectedEventIds);
setFinancialsByEvent(byEv);
} else if (report === "financeReport") {
- const byEv = await loadFinancials(financeEvents);
+ const byEv = await loadFinancials(selectedEventIds);
setFinancialsByEvent(byEv);
} else if (report === "profitReport") {
- const byEv = await loadFinancials(profitEvents);
+ const byEv = await loadFinancials(selectedEventIds);
setFinancialsByEvent(byEv);
} else if (report === "cashupAudit") {
- const rows = await loadCashupAudit(auditEvents);
+ const rows = await loadCashupAudit(selectedEventIds);
setAuditRows(rows);
}
setReady(true);
@@ -367,15 +349,23 @@ export default function ReportsV2() {
if (report !== "payments") return [] as any[];
const df = payFrom ? new Date(payFrom).getTime() : null;
const dt = payTo ? new Date(payTo).getTime() : null;
- const rows: { eventId: string; eventTitle: string; userName: string; userEmail?: string; amount: number; method: string; isDonation?: boolean; createdAt: string }[] = [];
+ const rows: { eventId: string; eventTitle: string; userName: string; userEmail?: string; amount: number; method: string; isDonation?: boolean; createdAt: string; recordedByName: string }[] = [];
for (const evId of Object.keys(paymentsByEvent)) {
const ev = filteredEvents.find(e => e.id === evId);
const evTitle = ev?.title || evId;
for (const p of paymentsByEvent[evId] || []) {
+ // Exclude donation-application legs — that money was already counted once, as the
+ // donation itself. Only real inflows (payments and donations) belong here.
+ if (isDonationLeg(p)) continue;
const t = new Date(p.createdAt).getTime();
if ((df && t < df) || (dt && t > dt)) continue;
// Reporting rule: if donation, attribute to payer; otherwise attribute to the registration's assigned user
const u = p.isDonation ? (p.user || {}) : ((p.registration?.user || p.user) || {});
+ // Self-service (webhook) payments record the payer as recordedBy too — only call it
+ // out when a different staff member actually recorded it, to avoid noise.
+ const recordedByName = (p.recordedBy && String(p.recordedBy.id) !== String(p.userId))
+ ? (p.recordedBy.name || p.recordedBy.email || "")
+ : "";
rows.push({
eventId: evId,
eventTitle: evTitle,
@@ -385,6 +375,7 @@ export default function ReportsV2() {
method: getPaymentMethod(p),
isDonation: p.isDonation,
createdAt: p.createdAt,
+ recordedByName,
});
}
}
@@ -443,23 +434,6 @@ export default function ReportsV2() {
return map;
}, [paymentsByEvent]);
- const donationsByUser = useMemo(() => {
- const map = new Map();
-
- Object.values(paymentsByEvent).forEach((payments: any) => {
- (payments || []).forEach((p: any) => {
- if (!p.isDonation) return;
-
- const userId = p.user?.id || p.userId;
- if (!userId) return;
-
- map.set(userId, (map.get(userId) || 0) + (p.amount || 0));
- });
- });
-
- return map;
- }, [paymentsByEvent]);
-
// Build payment totals per registration (all payments, no date filter)
const paidByReg = useMemo(() => {
const map = new Map();
@@ -473,13 +447,63 @@ export default function ReportsV2() {
return map;
}, [paymentsByEvent]);
+ // How much of each registration's Total paid (above) came from an assigned donation leg,
+ // rather than a direct cash/card/eft/online payment — this is a subset of paidByReg, not
+ // additional money, and is unambiguous per-registration (unlike "this donor's total
+ // donations", which isn't specific to this order and shouldn't be repeated per row).
+ const paidViaDonationByReg = useMemo(() => {
+ const map = new Map();
+ Object.keys(paymentsByEvent).forEach(evId => {
+ (paymentsByEvent[evId] || []).forEach((p: any) => {
+ if (p.registrationId && isDonationLeg(p)) {
+ map.set(p.registrationId, (map.get(p.registrationId) || 0) + (p.amount || 0));
+ }
+ });
+ });
+ return map;
+ }, [paymentsByEvent]);
+
+ // Donations made (as donor), with used/unused split — independent of any single registration,
+ // shown as its own breakdown so "who gave what" is never conflated with "what this order cost".
+ // Shared by Master Orders and Revenue Detailed — both need to attribute the full donation
+ // amount to the donor, never to whichever registration a portion of it happened to fund.
+ const donationsMadeRows = useMemo(() => {
+ const rows: { eventId: string; eventTitle: string; donor: string; email?: string; amount: number; used: number; unused: number; createdAt: string }[] = [];
+ Object.keys(paymentsByEvent).forEach(evId => {
+ const ev = filteredEvents.find(e => e.id === evId);
+ const evTitle = ev?.title || evId;
+ const evPayments = paymentsByEvent[evId] || [];
+ evPayments.filter((p: any) => p.isDonation).forEach((donation: any) => {
+ const used = evPayments
+ .filter((leg: any) => !leg.isDonation && leg.originalPaymentId === donation.id)
+ .reduce((s: number, leg: any) => s + (leg.amount || 0), 0);
+ rows.push({
+ eventId: evId,
+ eventTitle: evTitle,
+ donor: donation.user?.name || donation.userId || "Donor",
+ email: donation.user?.email,
+ amount: donation.amount || 0,
+ used,
+ unused: Math.max((donation.amount || 0) - used, 0),
+ createdAt: donation.createdAt,
+ });
+ });
+ });
+ rows.sort((a, b) => a.eventTitle.localeCompare(b.eventTitle) || a.donor.localeCompare(b.donor));
+ return rows;
+ }, [paymentsByEvent, filteredEvents]);
+
const revDetRows = useMemo(() => {
if (report !== "revenueDetailed") return [] as any[];
const df = payFrom ? new Date(payFrom).getTime() : null;
const dt = payTo ? new Date(payTo).getTime() : null;
type Row = { eventId: string; eventTitle: string; userName: string; userEmail?: string; totalPaid: number; status?: string; registrationId: string; outstanding: number };
const rows: Row[] = [];
- // Iterate registrations to include those with zero payments and show each once
+ // Iterate registrations to include those with zero payments and show each once. "Total paid"
+ // is what THIS person actually paid directly — money that reached them via an assigned
+ // donation is not their payment, so it's excluded here and attributed to the donor instead
+ // (below). Outstanding still reflects the full picture (direct + donation-funded), since
+ // that's genuinely how much of the order remains unsettled.
Object.keys(registrationsByEvent).forEach(evId => {
const ev = filteredEvents.find(e => e.id === evId);
const evTitle = ev?.title || evId;
@@ -487,23 +511,43 @@ export default function ReportsV2() {
const created = r.createdAt ? new Date(r.createdAt).getTime() : null;
if (df && created && created < df) return;
if (dt && created && created > dt) return;
- const totalPaid = paidByReg.get(r.id) || 0;
+ const directPaid = Math.max((paidByReg.get(r.id) || 0) - (paidViaDonationByReg.get(r.id) || 0), 0);
const outstanding = outstandingByReg.get(r.id) || 0;
rows.push({
eventId: evId,
eventTitle: evTitle,
userName: r.user?.name || r.userId || "User",
userEmail: r.user?.email,
- totalPaid,
+ totalPaid: directPaid,
status: r.status,
registrationId: r.id,
outstanding,
});
});
});
+
+ // Every donation is real money received from the donor, whether or not (or how much of) it
+ // has since been assigned to fund someone else's registration — so it's attributed here in
+ // full, under the donor, never under whichever registration it happened to fund.
+ donationsMadeRows.forEach(d => {
+ const created = d.createdAt ? new Date(d.createdAt).getTime() : null;
+ if (df && created && created < df) return;
+ if (dt && created && created > dt) return;
+ rows.push({
+ eventId: d.eventId,
+ eventTitle: d.eventTitle,
+ userName: d.donor,
+ userEmail: d.email,
+ totalPaid: d.amount,
+ status: d.used <= 0.000001 ? "donation (unassigned)" : (d.unused > 0.000001 ? "donation (partly assigned)" : "donation (fully assigned)"),
+ registrationId: "",
+ outstanding: 0,
+ });
+ });
+
rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '')));
return rows;
- }, [report, registrationsByEvent, filteredEvents, payFrom, payTo, paidByReg, outstandingByReg]);
+ }, [report, registrationsByEvent, filteredEvents, payFrom, payTo, paidByReg, paidViaDonationByReg, outstandingByReg, donationsMadeRows]);
// Derived for attendees (layered) for a single event
const attendeesLayer = useMemo(() => {
@@ -623,14 +667,19 @@ export default function ReportsV2() {
}
});
+ // "Paid" is what this person actually paid directly — money that reached this
+ // registration via an assigned donation is the donor's money, not theirs, so it's
+ // excluded here and shown separately in "Paid via donation" instead.
+ const paidViaDonation = paidViaDonationByReg.get(r.id) || 0;
+ const directPaid = Math.max((paidByReg.get(r.id) || 0) - paidViaDonation, 0);
const baseRow: any = {
eventTitle,
name: r.user?.name || "User",
email: r.user?.email,
orderTotal: 0,
- totalPaid: paidByReg.get(r.id) || 0,
+ totalPaid: directPaid,
outstanding: outstandingByReg.get(r.id) || 0,
- donations: donationsByUser.get(r.user?.id || r.userId) || 0,
+ paidViaDonation,
__prices: {} as Record // 👈 hidden helper
};
@@ -660,7 +709,7 @@ export default function ReportsV2() {
return rows;
- }, [report, registrationsByEvent, filteredEvents, masterOptions, paidByReg, outstandingByReg]);
+ }, [report, registrationsByEvent, filteredEvents, masterOptions, paidByReg, outstandingByReg, paidViaDonationByReg]);
//Master Report Totals
const masterTotals = useMemo(() => {
@@ -670,7 +719,7 @@ export default function ReportsV2() {
orderTotal: 0,
totalPaid: 0,
outstanding: 0,
- donations: 0,
+ paidViaDonation: 0,
};
// 👇 initialise dynamic option totals
@@ -683,6 +732,7 @@ export default function ReportsV2() {
totals.orderTotal += row.orderTotal;
totals.totalPaid += row.totalPaid;
totals.outstanding += row.outstanding;
+ totals.paidViaDonation += row.paidViaDonation || 0;
masterOptions.forEach(opt => {
const qty = row[opt.name] || 0;
@@ -699,102 +749,145 @@ export default function ReportsV2() {
});
});
- totals.donations = Array.from(donationsByUser.values())
- .reduce((s, v) => s + v, 0);
+ // Donations logged for these events that haven't (fully) been applied to any order yet —
+ // real money already received, sitting unused, distinct from what orders actually cost.
+ totals.unassignedDonations = donationsMadeRows.reduce((s, d) => s + d.unused, 0);
return totals;
- }, [masterRows, masterOptions, report]);
+ }, [masterRows, masterOptions, report, donationsMadeRows]);
// Export/print/email handlers per report
- const doExportCsv = () => {
+ // Builds the export payload for the current report — one shared builder consumed by Print,
+ // Email, WhatsApp, and Excel, so all four channels always show identical data/styling instead
+ // of four independently-maintained copies drifting apart. Stats/chart data (when present)
+ // mirror exactly what the on-screen report shows above its table, computed the same way.
+ const buildReportPayload = (): ReportPdfPayload | null => {
+ const subtitle = `Generated ${new Date().toLocaleString()}`;
if (report === "payments") {
- return downloadCsv(`payments_${new Date().toISOString().slice(0,10)}`, paymentRows.map(r => ({
- Event: r.eventTitle,
- User: r.userName,
- Email: r.userEmail || "",
- Amount: r.amount,
- Method: r.method,
- Donation: r.isDonation ? "Yes" : "No",
- Date: new Date(r.createdAt).toLocaleString(),
- })));
+ return {
+ title: 'Payments Report', subtitle, kind: 'table', orientation: 'portrait',
+ table: {
+ columns: ["Event","User","Email","Amount","Method","Donation","Recorded by","Date"],
+ rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", r.recordedByName || "", new Date(r.createdAt).toLocaleString()])
+ }
+ };
}
if (report === "attendees") {
- const rows: any[] = [];
- attendeesLayer.options.forEach(opt => {
- opt.users.forEach((u: any) => rows.push({ Event: attendeesLayer.eventTitle, Option: opt.optionName, Name: u.name, Email: u.email || "", Status: u.status, Qty: u.Qty }));
- });
- return downloadCsv(`attendees_${attEventId}_${new Date().toISOString().slice(0,10)}`, rows);
+ const sections = attendeesLayer.options.map(opt => ({
+ title: opt.optionName,
+ items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`)
+ }));
+ return { title: 'Attendees Report', subtitle, kind: 'layered', orientation: 'portrait', layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections } };
}
if (report === "regTypes") {
- return downloadCsv(`registration_types_${new Date().toISOString().slice(0,10)}`, regTypeRows.map(r => ({ Event: r.eventTitle, Type: r.type, Quantity: r.qty })));
+ const byType = new Map();
+ regTypeRows.forEach(r => byType.set(r.type, (byType.get(r.type) || 0) + r.qty));
+ return {
+ title: 'Registration Types Report', subtitle, kind: 'table', orientation: 'portrait',
+ chart: { title: 'Across all selected events', data: Array.from(byType.entries()).map(([label, value]) => ({ label, value })) },
+ table: { columns: ["Event","Type","Quantity"], rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)]) }
+ };
}
if (report === "usage") {
- const rows: any[] = [];
+ const rows: (string|number)[][] = [];
+ let totalUsed = 0, totalUnused = 0;
Object.keys(ticketUsage).forEach(evId => {
const ev = filteredEvents.find(e => e.id === evId);
- rows.push({ Event: ev?.title || evId, Used: ticketUsage[evId].used, Unused: ticketUsage[evId].unused });
+ const tu = ticketUsage[evId];
+ rows.push([ev?.title || evId, tu.used, tu.unused]);
+ totalUsed += tu.used; totalUnused += tu.unused;
});
- return downloadCsv(`ticket_usage_${new Date().toISOString().slice(0,10)}`, rows);
+ return {
+ title: 'Ticket Usage Report', subtitle, kind: 'table', orientation: 'portrait',
+ chart: { title: 'Used vs. unused, across all selected events', data: [{ label: "Used", value: totalUsed }, { label: "Unused", value: totalUnused }] },
+ table: { columns: ["Event","Used","Unused"], rows }
+ };
}
if (report === "revenue") {
const df = payFrom ? new Date(payFrom).getTime() : null;
const dt = payTo ? new Date(payTo).getTime() : null;
- const rows: any[] = [];
+ const rows: (string|number)[][] = [];
+ const byMethodTotal: Record = {};
Object.keys(paymentsByEvent).forEach(evId => {
const ev = filteredEvents.find(e => e.id === evId);
const list = (paymentsByEvent[evId] || []).filter((p: any) => {
+ if (isDonationLeg(p)) return false; // already counted once, as the source donation
const t = new Date(p.createdAt).getTime();
return !(df && t < df) && !(dt && t > dt);
});
const byMethod: Record = {};
let total = 0;
- list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
- if (list.length === 0) rows.push({ Event: ev?.title || evId, Method: '-', Amount: 0, Total: 0 });
- Object.keys(byMethod).forEach(m => rows.push({ Event: ev?.title || evId, Method: m, Amount: byMethod[m], Total: total }));
+ list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); byMethodTotal[m] = (byMethodTotal[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
+ if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
+ Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
});
- return downloadCsv(`revenue_${new Date().toISOString().slice(0,10)}`, rows);
+ return {
+ title: 'Revenue Summary', subtitle, kind: 'table', orientation: 'portrait',
+ chart: { title: 'By method, across all selected events', data: Object.keys(byMethodTotal).sort().map(m => ({ label: m, value: byMethodTotal[m], displayValue: `R ${byMethodTotal[m].toFixed(2)}` })) },
+ table: { columns: ["Event","Method","Amount","Event Total"], rows }
+ };
}
if (report === "revenueDetailed") {
- return downloadCsv(`revenue_detailed_${new Date().toISOString().slice(0,10)}`, revDetRows.map((r: any) => ({
- Event: r.eventTitle,
- Name: r.userName,
- Email: r.userEmail || "",
- Status: r.status || "",
- TotalPaid: r.totalPaid,
- Outstanding: r.outstanding,
- RegistrationId: r.registrationId
- })));
+ const rows: (string|number)[][] = (revDetRows as any[]).map(r => [
+ r.eventTitle, r.userName, r.userEmail || "", r.status || "",
+ Number((r.totalPaid || 0).toFixed(2)), Number((r.outstanding || 0).toFixed(2)), r.registrationId || "",
+ ]);
+ return {
+ title: 'Revenue Detailed', subtitle, kind: 'table', orientation: 'landscape',
+ table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }
+ };
}
if (report === "regStatus") {
- const rows: any[] = [];
+ const rows: (string|number)[][] = [];
+ const agg: Record = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
Object.keys(registrationsByEvent).forEach(evId => {
const ev = filteredEvents.find(e => e.id === evId);
const regs = registrationsByEvent[evId] || [];
- const counts: Record = {};
- const statuses = ["pending","partial_paid","paid","cancelled"];
- statuses.forEach(s => counts[s] = 0);
- regs.forEach((r: any) => {
- if (!statusIncludeCancelled && r.status === 'cancelled') return;
- counts[r.status] = (counts[r.status] || 0) + 1;
- });
- rows.push({ Event: ev?.title || evId, Pending: counts["pending"] || 0, Partial: counts["partial_paid"] || 0, Paid: counts["paid"] || 0, Cancelled: counts["cancelled"] || 0 });
+ const counts: Record = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
+ regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + countForStatus(r); agg[r.status] = (agg[r.status] || 0) + countForStatus(r); });
+ rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]);
});
- return downloadCsv(`registration_status_${new Date().toISOString().slice(0,10)}`, rows);
+ const unit = statusCountMode === 'tickets' ? 'tickets' : 'registrations';
+ return {
+ title: 'Registration Status Breakdown', subtitle, kind: 'table',
+ chart: { title: `Across all selected events, by ${unit}`, data: [
+ { label: "Pending", value: agg.pending || 0 }, { label: "Partial", value: agg.partial_paid || 0 },
+ { label: "Paid", value: agg.paid || 0 }, { label: "Cancelled", value: agg.cancelled || 0 },
+ ] },
+ table: { columns: ["Event", statusCountMode === 'tickets' ? "Pending (tickets)" : "Pending", statusCountMode === 'tickets' ? "Partial (tickets)" : "Partial", statusCountMode === 'tickets' ? "Paid (tickets)" : "Paid", statusCountMode === 'tickets' ? "Cancelled (tickets)" : "Cancelled"], rows }
+ };
}
if (report === "donations") {
- const rows: any[] = [];
+ const usedFor = (evId: string, donationId: string) =>
+ (paymentsByEvent[evId] || []).filter((leg: any) => !leg.isDonation && leg.originalPaymentId === donationId)
+ .reduce((s: number, leg: any) => s + (leg.amount || 0), 0);
+ const rows: (string|number)[][] = [];
+ let grandTotal = 0, grandUsed = 0;
Object.keys(paymentsByEvent).forEach(evId => {
const ev = filteredEvents.find(e => e.id === evId);
- (paymentsByEvent[evId] || []).filter((p: any) => p.isDonation).forEach((p: any) => {
- const u = p.user || {};
- rows.push({ Event: ev?.title || evId, Donor: u.name || u.email || p.userId || '', Email: u.email || '', Amount: p.amount, Method: getPaymentMethod(p), Date: new Date(p.createdAt).toLocaleString() });
- });
+ const evPayments = paymentsByEvent[evId] || [];
+ const dons = evPayments.filter((p: any) => p.isDonation);
+ const total = dons.reduce((s: number, p: any) => s + (p.amount || 0), 0);
+ const used = dons.reduce((s: number, p: any) => s + usedFor(evId, p.id), 0);
+ const unused = Math.max(total - used, 0);
+ grandTotal += total; grandUsed += used;
+ rows.push([ev?.title || evId, Number(total.toFixed(2)), Number(used.toFixed(2)), Number(unused.toFixed(2)), dons.length]);
});
- return downloadCsv(`donations_${new Date().toISOString().slice(0,10)}`, rows);
+ const grandUnused = Math.max(grandTotal - grandUsed, 0);
+ return {
+ title: 'Donations Breakdown', subtitle, kind: 'table', orientation: 'portrait',
+ stats: [
+ { label: 'Total donated', value: `R ${grandTotal.toFixed(2)}`, tone: 'rose' },
+ { label: 'Used', value: `R ${grandUsed.toFixed(2)}`, tone: 'violet' },
+ { label: 'Unused', value: `R ${grandUnused.toFixed(2)}`, tone: 'amber' },
+ ],
+ chart: { title: 'Used vs. unused, across all selected events', data: [{ label: "Used", value: grandUsed, displayValue: `R ${grandUsed.toFixed(2)}` }, { label: "Unused", value: grandUnused, displayValue: `R ${grandUnused.toFixed(2)}` }] },
+ table: { columns: ["Event", "Donations (R)", "Used (R)", "Unused (R)", "Count"], rows }
+ };
}
if (report === "cashup") {
- const cols = ["Event", "Section", "Detail", "Income", "CostsFromMethod", "ExpectedCash", "Actual", "Variance"];
- const rows: any[] = [];
+ const rows: (string | number)[][] = [];
+ const incomeByMethod: Record = {};
Object.keys(financialsByEvent).forEach(evId => {
const f = financialsByEvent[evId];
const ev = filteredEvents.find(e => e.id === evId);
@@ -802,368 +895,188 @@ export default function ReportsV2() {
const title = ev?.title || evId;
METHOD_KEYS.forEach(m => {
const r = f.reconciled?.byMethod?.[m];
- rows.push({ Event: title, Section: "Method", Detail: METHOD_LABEL[m], Income: f.paymentsByMethod?.[m] || 0, CostsFromMethod: f.costsByMethod?.[m] || 0, ExpectedCash: f.expectedCashByMethod?.[m] || 0, Actual: r?.actual ?? "", Variance: r?.variance ?? "" });
+ incomeByMethod[m] = (incomeByMethod[m] || 0) + (f.paymentsByMethod?.[m] || 0);
+ rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
if (m === "cash") {
- (r?.denominations || []).forEach((d: any) => rows.push({ Event: title, Section: "Denomination", Detail: denomLabel(d.value) + " × " + d.count, Income: "", CostsFromMethod: "", ExpectedCash: "", Actual: d.value * d.count, Variance: "" }));
+ (r?.denominations || []).forEach((d: any) => rows.push([title, ` ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
}
});
- if ((f.untaggedCostsTotal || 0) > 0) {
- rows.push({ Event: title, Section: "Untagged costs", Detail: "Not tied to a specific method", Income: "", CostsFromMethod: f.untaggedCostsTotal, ExpectedCash: "", Actual: "", Variance: "" });
- }
- rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Income: "", CostsFromMethod: "", ExpectedCash: "", Actual: f.unallocatedDonationsTotal || 0, Variance: "" });
+ if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
+ rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
});
- return downloadCsv(`cashup_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
+ return {
+ title: 'Cashup Report', subtitle, kind: 'table', orientation: 'landscape',
+ chart: { title: 'Income by method, across all selected events', data: METHOD_KEYS.map(m => ({ label: METHOD_LABEL[m], value: incomeByMethod[m] || 0, displayValue: `R ${(incomeByMethod[m] || 0).toFixed(2)}` })) },
+ table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows }
+ };
}
if (report === "financeReport") {
- const cols = ["Event", "Section", "Detail", "Amount"];
- const rows: any[] = [];
+ const rows: (string | number)[][] = [];
+ let sold = 0, paidByAll = 0, donationsProfit = 0, costsTotal = 0, netProfitTotal = 0;
+ const paidByMethod: Record = {};
Object.keys(financialsByEvent).forEach(evId => {
const f = financialsByEvent[evId];
const ev = filteredEvents.find(e => e.id === evId);
if (!f) return;
const title = ev?.title || evId;
- (f.salesByOption || []).forEach((s: any) => rows.push({ Event: title, Section: "Sales", Detail: `${s.name} (${s.quantitySold} sold)`, Amount: s.revenue }));
- rows.push({ Event: title, Section: "Sales", Detail: "Donations", Amount: f.totalDonations || 0 });
- METHOD_KEYS.forEach(m => rows.push({ Event: title, Section: "Paid by", Detail: METHOD_LABEL[m], Amount: f.paymentsByMethod?.[m] || 0 }));
+ sold += (f.salesByOption || []).reduce((s: number, o: any) => s + (o.revenue || 0), 0);
+ paidByAll += METHOD_KEYS.reduce((s, m) => s + (f.paymentsByMethod?.[m] || 0), 0);
+ METHOD_KEYS.forEach(m => { paidByMethod[m] = (paidByMethod[m] || 0) + (f.paymentsByMethod?.[m] || 0); });
+ donationsProfit += f.unallocatedDonationsTotal || 0;
+ costsTotal += f.totalCosts || 0;
+ netProfitTotal += f.netProfit || 0;
+ // "Sales" is ticket-price revenue for orders that reached 'paid' status — whether that
+ // order was funded directly or via an assigned donation, its full price is already
+ // counted here once. A separate "Donations" line for the full donation total would
+ // double-count the assigned portion; only the still-unassigned remainder is money not
+ // otherwise reflected in Sales, and that's already shown below under "Donations counted
+ // as profit" — no need to repeat it here.
+ rows.push([title, "Sales", "What was sold", ""]);
+ (f.salesByOption || []).forEach((s: any) => rows.push([title, "", `${s.name} (${s.quantitySold} sold)`, Number(s.revenue.toFixed(2))]));
+ rows.push([title, "Paid by", "", ""]);
+ METHOD_KEYS.forEach(m => rows.push([title, "", METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2))]));
+ rows.push([title, "Cashup comparison", "", ""]);
METHOD_KEYS.forEach(m => {
const r = f.reconciled?.byMethod?.[m];
- rows.push({ Event: title, Section: "Cashup comparison", Detail: `${METHOD_LABEL[m]} — expected`, Amount: f.expectedCashByMethod?.[m] || 0 });
- rows.push({ Event: title, Section: "Cashup comparison", Detail: `${METHOD_LABEL[m]} — actual`, Amount: r?.actual ?? "" });
- rows.push({ Event: title, Section: "Cashup comparison", Detail: `${METHOD_LABEL[m]} — variance`, Amount: r?.variance ?? "" });
+ rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / variance`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.variance != null ? money2(r.variance) : "—"}`]);
});
- (f.costs || []).forEach((c: any) => rows.push({ Event: title, Section: "Costs", Detail: `${c.label}${c.paidFromMethod ? ` (paid via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Amount: -(c.total ?? c.amount) }));
- rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Amount: f.unallocatedDonationsTotal || 0 });
- rows.push({ Event: title, Section: "Net profit", Detail: "", Amount: f.netProfit || 0 });
+ rows.push([title, "Costs", "", ""]);
+ (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
+ rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
+ rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
});
- return downloadCsv(`finance_report_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
+ return {
+ title: 'Finance Report', subtitle, kind: 'table', orientation: 'landscape',
+ stats: [
+ { label: 'What was sold', value: `R ${sold.toFixed(2)}`, tone: 'green' },
+ { label: 'Paid by (all methods)', value: `R ${paidByAll.toFixed(2)}`, tone: 'blue' },
+ { label: 'Donations counted as profit', value: `R ${donationsProfit.toFixed(2)}`, tone: 'rose' },
+ { label: 'Total costs', value: `R ${costsTotal.toFixed(2)}`, tone: 'amber' },
+ { label: 'Net profit', value: `R ${netProfitTotal.toFixed(2)}`, tone: 'violet' },
+ ],
+ chart: { title: 'Paid by, across all selected events', data: METHOD_KEYS.map(m => ({ label: METHOD_LABEL[m], value: paidByMethod[m] || 0, displayValue: `R ${(paidByMethod[m] || 0).toFixed(2)}` })) },
+ table: { columns: ["Event", "Section", "Detail", "Amount"], rows }
+ };
}
if (report === "profitReport") {
- const rows = Object.keys(financialsByEvent).map(evId => {
+ const evIds = Object.keys(financialsByEvent);
+ const totals = evIds.reduce((acc, evId) => {
+ const f = financialsByEvent[evId];
+ acc.revenue += f?.effectiveTotalRevenue || 0;
+ acc.costs += f?.totalCosts || 0;
+ acc.profit += f?.netProfit || 0;
+ return acc;
+ }, { revenue: 0, costs: 0, profit: 0 });
+ const rows: (string | number)[][] = evIds.map(evId => {
const f = financialsByEvent[evId];
const ev = filteredEvents.find(e => e.id === evId);
- return { Event: ev?.title || evId, Revenue: f?.effectiveTotalRevenue || 0, Costs: f?.totalCosts || 0, NetProfit: f?.netProfit || 0 };
+ return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
});
- return downloadCsv(`profit_report_${new Date().toISOString().slice(0,10)}`, rows);
+ return {
+ title: 'Profit Report', subtitle, kind: 'table', orientation: 'portrait',
+ stats: [
+ { label: 'Revenue', value: `R ${totals.revenue.toFixed(2)}`, tone: 'green' },
+ { label: 'Costs', value: `R ${totals.costs.toFixed(2)}`, tone: 'amber' },
+ { label: 'Net profit', value: `R ${totals.profit.toFixed(2)}`, tone: 'violet' },
+ ],
+ chart: evIds.length > 1 ? { title: 'Net profit by event', data: evIds.map(evId => ({ label: filteredEvents.find(e => e.id === evId)?.title || evId, value: financialsByEvent[evId]?.netProfit || 0, displayValue: `R ${(financialsByEvent[evId]?.netProfit || 0).toFixed(2)}` })) } : undefined,
+ table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows }
+ };
}
if (report === "cashupAudit") {
- const cols = ["Event", "Action", "PerformedBy", "Date", "Method", "Expected", "Actual", "Variance", "DeltaVsPreviousClose", "DonationsCountedAsProfit", "Notes"];
- const rows: any[] = [];
+ const rows: (string | number)[][] = [];
auditRows.forEach((r: any) => {
- const base = { Event: r.event?.title || r.eventId, Action: actionLabel(r.action), PerformedBy: r.performedBy?.name || "", Date: new Date(r.createdAt).toLocaleString() };
+ const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
if (r.action === "reopened") {
- rows.push({ ...base, Method: "", Expected: "", Actual: "", Variance: "", DeltaVsPreviousClose: "", DonationsCountedAsProfit: "", Notes: r.notes || "" });
+ rows.push([...base, "", "", "", "", "", r.notes || ""]);
} else {
- (r.lines || []).forEach((l: any) => rows.push({
- ...base, Method: METHOD_LABEL[l.method] || l.method, Expected: l.expectedAmount, Actual: l.actualAmount ?? "", Variance: l.variance ?? "",
- DeltaVsPreviousClose: r._deltaVsPrevious?.[l.method] ?? "", DonationsCountedAsProfit: r.unallocatedDonationsTotal || 0, Notes: l.notes || r.notes || ""
- }));
+ (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
+ if (!r.lines || r.lines.length === 0) rows.push([...base, "", "", "", "", "", `Donations counted as profit: ${money2(r.unallocatedDonationsTotal)}`]);
}
});
- return downloadCsv(`cashup_audit_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
+ return {
+ title: 'Cashup Audit Trail', subtitle, kind: 'table', orientation: 'landscape',
+ table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows }
+ };
}
if (report === "masterOrders") {
- const rows = masterRows.map(r => ({
- Event: r.eventTitle,
- Name: r.name,
- Email: r.email || "",
-
- ...masterOptions.reduce((acc, opt) => {
- acc[opt.name] = r[opt.name] ?? 0;
- return acc;
- }, {} as any),
-
- OrderTotal: r.orderTotal,
- Paid: r.totalPaid,
- Outstanding: r.outstanding,
- Donations: r.donations
- }));
-
- // 👇 TOTAL ROW
- rows.push({
- Event: "TOTAL",
- Name: "",
- Email: "",
-
- ...masterOptions.reduce((acc, opt) => {
- acc[opt.name] = masterTotals?.[opt.name] ?? 0;
- return acc;
- }, {} as any),
-
- OrderTotal: masterTotals?.orderTotal ?? 0,
- Paid: masterTotals?.totalPaid ?? 0,
- Outstanding: masterTotals?.outstanding ?? 0,
- Donations: masterTotals?.donations ?? 0,
- });
-
- // 👇 REVENUE PER TICKET ROW 🔥
- rows.push({
- Event: "Revenue per Ticket",
- Name: "",
- Email: "",
-
- ...masterOptions.reduce((acc, opt) => {
- acc[opt.name] = masterTotals?.[`${opt.name}_revenue`] ?? 0;
- return acc;
- }, {} as any),
-
- OrderTotal: "",
- Paid: "",
- Outstanding: "",
- Donations: ""
- });
-
- return downloadCsv(
- `master_orders_${new Date().toISOString().slice(0,10)}`,
- rows
- );
+ const bodyRows: (string | number)[][] = masterRows.map(r => [
+ r.eventTitle, r.name, r.email || "",
+ ...masterOptions.map(opt => r[opt.name] ?? 0),
+ Number(r.orderTotal.toFixed(2)), Number(r.totalPaid.toFixed(2)), Number((r.paidViaDonation || 0).toFixed(2)), Number(r.outstanding.toFixed(2)),
+ ]);
+ bodyRows.push([
+ "TOTAL", "", "",
+ ...masterOptions.map(opt => masterTotals?.[opt.name] ?? 0),
+ Number((masterTotals?.orderTotal ?? 0).toFixed(2)), Number((masterTotals?.totalPaid ?? 0).toFixed(2)), Number((masterTotals?.paidViaDonation ?? 0).toFixed(2)), Number((masterTotals?.outstanding ?? 0).toFixed(2)),
+ ]);
+ bodyRows.push([
+ "Revenue per Ticket", "", "",
+ ...masterOptions.map(opt => `R ${(masterTotals?.[`${opt.name}_revenue`] ?? 0).toFixed(2)}`),
+ "", "", "", "",
+ ]);
+ bodyRows.push([
+ "Unassigned donations", "", "",
+ ...masterOptions.map(() => ""),
+ "", "", "", Number((masterTotals?.unassignedDonations ?? 0).toFixed(2)),
+ ]);
+ return {
+ title: "Master Orders Breakdown", subtitle, kind: "table", orientation: "landscape",
+ stats: [
+ { label: 'Order Total', value: `R ${(masterTotals?.orderTotal ?? 0).toFixed(2)}`, tone: 'green' },
+ { label: 'Paid', value: `R ${(masterTotals?.totalPaid ?? 0).toFixed(2)}`, tone: 'blue' },
+ { label: 'Paid via donations', value: `R ${(masterTotals?.paidViaDonation ?? 0).toFixed(2)}`, tone: 'violet' },
+ { label: 'Outstanding', value: `R ${(masterTotals?.outstanding ?? 0).toFixed(2)}`, tone: 'amber' },
+ { label: 'Unassigned donations', value: `R ${(masterTotals?.unassignedDonations ?? 0).toFixed(2)}`, tone: 'rose' },
+ ],
+ note: `"Paid" is only what each person actually paid themselves — money that reached their order via an assigned donation shows separately under "Paid via donation" and is attributed to the donor below, not the registrant. "Unassigned donations" is real money already received that hasn't been applied to any order yet.`,
+ table: {
+ columns: ["Event", "Name", "Email", ...masterOptions.map(o => o.name), "Order Total", "Paid", "Paid via donation", "Outstanding"],
+ rows: bodyRows
+ },
+ extraTables: donationsMadeRows.length > 0 ? [{
+ title: "Donations made",
+ columns: ["Event", "Donor", "Email", "Donated", "Used", "Unused"],
+ rows: donationsMadeRows.map(d => [d.eventTitle, d.donor, d.email || "", Number(d.amount.toFixed(2)), Number(d.used.toFixed(2)), Number(d.unused.toFixed(2))])
+ }] : undefined,
+ };
}
+ return null;
+ };
+
+ const doExportExcel = async () => {
+ if (!token) { alert('Please login to export Excel'); return; }
+ try {
+ const payload = buildReportPayload();
+ if (!payload) return;
+ await downloadReportExcel(API_BASE, token, payload);
+ } catch (e: any) {
+ alert(e?.message || 'Failed to generate Excel file');
+ }
+ };
+
+ const REPORT_LABEL: Record = {
+ payments: "Payments Report",
+ attendees: "Attendees Report",
+ regTypes: "Registration Types Report",
+ usage: "Ticket Usage Report",
+ revenue: "Revenue Summary",
+ revenueDetailed: "Revenue Detailed Report",
+ regStatus: "Registration Status Breakdown",
+ masterOrders: "Master Orders Report",
+ donations: "Donations Breakdown",
+ cashup: "Cashup Report",
+ financeReport: "Finance Report",
+ profitReport: "Profit Report",
+ cashupAudit: "Cashup Audit Trail",
};
const doPrintPdf = async () => {
if (!token) { alert('Please login to export PDF'); return; }
try {
- if (report === "payments") {
- await downloadReportPdf(API_BASE, token, {
- title: 'Payments Report',
- kind: 'table',
- orientation: 'portrait',
- table: {
- columns: ["Event","User","Email","Amount","Method","Donation","Date"],
- rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", new Date(r.createdAt).toLocaleString()])
- }
- });
- return;
- }
- if (report === "attendees") {
- // Build layered sections: each option -> list of strings (user line)
- const sections = attendeesLayer.options.map(opt => ({
- title: opt.optionName,
- items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`)
- }));
- await downloadReportPdf(API_BASE, token, {
- title: 'Attendees Report',
- kind: 'layered',
- orientation: 'portrait',
- layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections }
- });
- return;
- }
- if (report === "regTypes") {
- await downloadReportPdf(API_BASE, token, {
- title: 'Registration Types Report',
- kind: 'table',
- orientation: 'portrait',
- table: {
- columns: ["Event","Type","Quantity"],
- rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)])
- }
- });
- return;
- }
- if (report === "usage") {
- const rows: (string|number)[][] = [];
- Object.keys(ticketUsage).forEach(evId => {
- const ev = filteredEvents.find(e => e.id === evId);
- const tu = ticketUsage[evId];
- rows.push([ev?.title || evId, tu.used, tu.unused]);
- });
- await downloadReportPdf(API_BASE, token, {
- title: 'Ticket Usage Report',
- kind: 'table',
- orientation: 'portrait',
- table: { columns: ["Event","Used","Unused"], rows }
- });
- return;
- }
- if (report === "revenue") {
- const df = payFrom ? new Date(payFrom).getTime() : null;
- const dt = payTo ? new Date(payTo).getTime() : null;
- const rows: (string|number)[][] = [];
- Object.keys(paymentsByEvent).forEach(evId => {
- const ev = filteredEvents.find(e => e.id === evId);
- const list = (paymentsByEvent[evId] || []).filter((p: any) => {
- const t = new Date(p.createdAt).getTime();
- return !(df && t < df) && !(dt && t > dt);
- });
- const byMethod: Record = {};
- let total = 0;
- list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
- if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
- Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
- });
- await downloadReportPdf(API_BASE, token, {
- title: 'Revenue Summary',
- kind: 'table',
- orientation: 'portrait',
- table: { columns: ["Event","Method","Amount","Event Total"], rows }
- });
- return;
- }
- if (report === "revenueDetailed") {
- const rows: (string|number)[][] = (revDetRows as any[]).map(r => [
- r.eventTitle,
- r.userName,
- r.userEmail || "",
- r.status || "",
- Number((r.totalPaid || 0).toFixed(2)),
- Number((r.outstanding || 0).toFixed(2)),
- r.registrationId || "",
- ]);
- await downloadReportPdf(API_BASE, token, {
- title: 'Revenue Detailed',
- kind: 'table',
- orientation: 'landscape',
- table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }
- });
- return;
- }
- if (report === "regStatus") {
- const rows: (string|number)[][] = [];
- Object.keys(registrationsByEvent).forEach(evId => {
- const ev = filteredEvents.find(e => e.id === evId);
- const regs = registrationsByEvent[evId] || [];
- const counts: Record = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 };
- regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; });
- rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]);
- });
- await downloadReportPdf(API_BASE, token, {
- title: 'Registration Status Breakdown',
- kind: 'table',
- table: { columns: ["Event","Pending","Partial","Paid","Cancelled"], rows }
- });
- return;
- }
- if (report === "cashup") {
- const rows: (string | number)[][] = [];
- Object.keys(financialsByEvent).forEach(evId => {
- const f = financialsByEvent[evId];
- const ev = filteredEvents.find(e => e.id === evId);
- if (!f) return;
- const title = ev?.title || evId;
- METHOD_KEYS.forEach(m => {
- const r = f.reconciled?.byMethod?.[m];
- rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
- if (m === "cash") {
- (r?.denominations || []).forEach((d: any) => rows.push([title, ` ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
- }
- });
- if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
- rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
- });
- await downloadReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows } });
- return;
- }
- if (report === "financeReport") {
- const rows: (string | number)[][] = [];
- Object.keys(financialsByEvent).forEach(evId => {
- const f = financialsByEvent[evId];
- const ev = filteredEvents.find(e => e.id === evId);
- if (!f) return;
- const title = ev?.title || evId;
- rows.push([title, "Sales", "What was sold", ""]);
- (f.salesByOption || []).forEach((s: any) => rows.push([title, "", `${s.name} (${s.quantitySold} sold)`, Number(s.revenue.toFixed(2))]));
- rows.push([title, "", "Donations", Number((f.totalDonations || 0).toFixed(2))]);
- rows.push([title, "Paid by", "", ""]);
- METHOD_KEYS.forEach(m => rows.push([title, "", METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2))]));
- rows.push([title, "Cashup comparison", "", ""]);
- METHOD_KEYS.forEach(m => {
- const r = f.reconciled?.byMethod?.[m];
- rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / variance`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.variance != null ? money2(r.variance) : "—"}`]);
- });
- rows.push([title, "Costs", "", ""]);
- (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
- rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
- rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
- });
- await downloadReportPdf(API_BASE, token, { title: 'Finance Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Section", "Detail", "Amount"], rows } });
- return;
- }
- if (report === "profitReport") {
- const rows: (string | number)[][] = Object.keys(financialsByEvent).map(evId => {
- const f = financialsByEvent[evId];
- const ev = filteredEvents.find(e => e.id === evId);
- return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
- });
- await downloadReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows } });
- return;
- }
- if (report === "cashupAudit") {
- const rows: (string | number)[][] = [];
- auditRows.forEach((r: any) => {
- const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
- if (r.action === "reopened") {
- rows.push([...base, "", "", "", "", "", r.notes || ""]);
- } else {
- (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
- if (!r.lines || r.lines.length === 0) rows.push([...base, "", "", "", "", "", `Donations counted as profit: ${money2(r.unallocatedDonationsTotal)}`]);
- }
- });
- await downloadReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows } });
- return;
- }
- if (report === "masterOrders") {
- const bodyRows: (string | number)[][] = masterRows.map(r => [
- r.eventTitle,
- r.name,
- r.email || "",
-
- ...masterOptions.map(opt => r[opt.name] ?? 0),
-
- Number(r.orderTotal.toFixed(2)),
- Number(r.totalPaid.toFixed(2)),
- Number(r.outstanding.toFixed(2))
- ]);
-
- // 👇 TOTAL ROW
- bodyRows.push([
- "TOTAL",
- "",
- "",
-
- ...masterOptions.map(opt => masterTotals?.[opt.name] ?? 0),
-
- Number((masterTotals?.orderTotal ?? 0).toFixed(2)),
- Number((masterTotals?.totalPaid ?? 0).toFixed(2)),
- Number((masterTotals?.outstanding ?? 0).toFixed(2))
- ]);
-
- // 👇 REVENUE PER TICKET ROW 🔥
- bodyRows.push([
- "Revenue per Ticket",
- "",
- "",
-
- ...masterOptions.map(opt =>
- `R ${(masterTotals?.[`${opt.name}_revenue`] ?? 0).toFixed(2)}`
- ),
-
- "",
- "",
- ""
- ]);
-
- await downloadReportPdf(API_BASE, token, {
- title: "Master Orders Breakdown",
- kind: "table",
- orientation: "landscape",
- table: {
- columns: [
- "Event",
- "Name",
- "Email",
-
- ...masterOptions.map(o => o.name),
-
- "Order Total",
- "Paid",
- "Outstanding"
- ],
- rows: bodyRows
- }
- });
-
- return;
- }
+ const payload = buildReportPayload();
+ if (!payload) return;
+ await viewReportPdf(API_BASE, token, payload);
} catch (e: any) {
alert(e?.message || 'Failed to generate PDF');
}
@@ -1171,117 +1084,28 @@ export default function ReportsV2() {
const doEmail = async () => {
if (!token) { alert('Please login to email PDF'); return; }
- const subject = {
- payments: "Payments Report",
- attendees: "Attendees Report",
- regTypes: "Registration Types Report",
- usage: "Ticket Usage Report",
- revenue: "Revenue Summary",
- revenueDetailed: "Revenue Detailed Report",
- regStatus: "Registration Status Breakdown",
- masterOrders: "Master Orders Report",
- donations: "Donations Breakdown",
- cashup: "Cashup Report",
- financeReport: "Finance Report",
- profitReport: "Profit Report",
- cashupAudit: "Cashup Audit Trail",
- }[report];
- const body = "Report generated on " + new Date().toLocaleString();
try {
- if (report === 'payments') {
- await emailReportPdf(API_BASE, token, {
- title: 'Payments Report', kind: 'table', orientation: 'portrait',
- table: { columns: ["Event","User","Email","Amount","Method","Donation","Date"], rows: paymentRows.map(r => [r.eventTitle, r.userName, r.userEmail || "", `R ${Number(r.amount).toFixed(2)}`, r.method, r.isDonation ? "Yes" : "No", new Date(r.createdAt).toLocaleString()]) },
- subject, body
- });
- } else if (report === 'attendees') {
- const sections = attendeesLayer.options.map(opt => ({ title: opt.optionName, items: opt.users.map((u: any) => `${u.name}${u.email ? ` (${u.email})` : ''} — ${u.status}${typeof u.qty==='number' ? ` • Qty: ${u.qty}` : ''}`) }));
- await emailReportPdf(API_BASE, token, { title: 'Attendees Report', kind: 'layered', orientation: 'portrait', layered: { header: `Event: ${attendeesLayer.eventTitle}`, sections }, subject, body });
- } else if (report === 'regTypes') {
- await emailReportPdf(API_BASE, token, { title: 'Registration Types Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Type","Quantity"], rows: regTypeRows.map(r => [r.eventTitle, r.type, String(r.qty)]) }, subject, body });
- } else if (report === 'usage') {
- const rows: (string|number)[][] = [];
- Object.keys(ticketUsage).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const tu = ticketUsage[evId]; rows.push([ev?.title || evId, tu.used, tu.unused]); });
- await emailReportPdf(API_BASE, token, { title: 'Ticket Usage Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Used","Unused"], rows }, subject, body });
- } else if (report === 'revenue') {
- const df = payFrom ? new Date(payFrom).getTime() : null;
- const dt = payTo ? new Date(payTo).getTime() : null;
- const rows: (string|number)[][] = [];
- Object.keys(paymentsByEvent).forEach(evId => {
- const ev = filteredEvents.find(e => e.id === evId);
- const list = (paymentsByEvent[evId] || []).filter((p: any) => { const t = new Date(p.createdAt).getTime(); return !(df && t < df) && !(dt && t > dt); });
- const byMethod: Record = {}; let total = 0;
- list.forEach((p: any) => { const m = getPaymentMethod(p); byMethod[m] = (byMethod[m] || 0) + (p.amount || 0); total += (p.amount || 0); });
- if (Object.keys(byMethod).length === 0) rows.push([ev?.title || evId, '-', 0, 0]);
- Object.keys(byMethod).forEach(m => rows.push([ev?.title || evId, m, Number(byMethod[m].toFixed(2)), Number(total.toFixed(2))]));
- });
- await emailReportPdf(API_BASE, token, { title: 'Revenue Summary', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Method","Amount","Event Total"], rows }, subject, body });
- } else if (report === 'revenueDetailed') {
- const rows: (string|number)[][] = (revDetRows as any[]).map(r => [ r.eventTitle, r.userName, r.userEmail || "", r.status || "", Number((r.totalPaid || 0).toFixed(2)), Number((r.outstanding || 0).toFixed(2)), r.registrationId || "" ]);
- await emailReportPdf(API_BASE, token, { title: 'Revenue Detailed', kind: 'table', orientation: 'landscape', table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }, subject, body });
- } else if (report === 'regStatus') {
- const rows: (string|number)[][] = [];
- Object.keys(registrationsByEvent).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const regs = registrationsByEvent[evId] || []; const counts: Record = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 }; regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; }); rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]); });
- await emailReportPdf(API_BASE, token, { title: 'Registration Status Breakdown', kind: 'table', table: { columns: ["Event","Pending","Partial","Paid","Cancelled"], rows }, subject, body });
- } else if (report === 'cashup') {
- const rows: (string | number)[][] = [];
- Object.keys(financialsByEvent).forEach(evId => {
- const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId); if (!f) return;
- const title = ev?.title || evId;
- METHOD_KEYS.forEach(m => {
- const r = f.reconciled?.byMethod?.[m];
- rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
- if (m === "cash") (r?.denominations || []).forEach((d: any) => rows.push([title, ` ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
- });
- if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
- rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
- });
- await emailReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows }, subject, body });
- } else if (report === 'financeReport') {
- const rows: (string | number)[][] = [];
- Object.keys(financialsByEvent).forEach(evId => {
- const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId); if (!f) return;
- const title = ev?.title || evId;
- rows.push([title, "Sales", "What was sold", ""]);
- (f.salesByOption || []).forEach((s: any) => rows.push([title, "", `${s.name} (${s.quantitySold} sold)`, Number(s.revenue.toFixed(2))]));
- rows.push([title, "", "Donations", Number((f.totalDonations || 0).toFixed(2))]);
- rows.push([title, "Paid by", "", ""]);
- METHOD_KEYS.forEach(m => rows.push([title, "", METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2))]));
- rows.push([title, "Cashup comparison", "", ""]);
- METHOD_KEYS.forEach(m => {
- const r = f.reconciled?.byMethod?.[m];
- rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / variance`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.variance != null ? money2(r.variance) : "—"}`]);
- });
- rows.push([title, "Costs", "", ""]);
- (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
- rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
- rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
- });
- await emailReportPdf(API_BASE, token, { title: 'Finance Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Section", "Detail", "Amount"], rows }, subject, body });
- } else if (report === 'profitReport') {
- const rows: (string | number)[][] = Object.keys(financialsByEvent).map(evId => {
- const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId);
- return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
- });
- await emailReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows }, subject, body });
- } else if (report === 'cashupAudit') {
- const rows: (string | number)[][] = [];
- auditRows.forEach((r: any) => {
- const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
- if (r.action === "reopened") {
- rows.push([...base, "", "", "", "", "", r.notes || ""]);
- } else {
- (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
- }
- });
- await emailReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows }, subject, body });
- }
+ const payload = buildReportPayload();
+ if (!payload) return;
+ await emailReportPdf(API_BASE, token, { ...payload, subject: REPORT_LABEL[report], body: "Report generated on " + new Date().toLocaleString() });
alert('Email sent with PDF attachment');
} catch (e: any) {
alert(e?.message || 'Failed to email PDF');
}
};
+ const doWhatsApp = async () => {
+ if (!token) { alert('Please login to send via WhatsApp'); return; }
+ try {
+ const payload = buildReportPayload();
+ if (!payload) return;
+ await whatsappReportPdf(API_BASE, token, { ...payload, caption: REPORT_LABEL[report] });
+ alert('Report sent to your WhatsApp');
+ } catch (e: any) {
+ alert(e?.message || 'Failed to send via WhatsApp');
+ }
+ };
+
// Rendering helpers
function htmlTable(headers: string[], rows: (string | number)[][]) {
const thead = `${headers.map(h => `${escapeHtml(h)} `).join("")} `;
@@ -1316,6 +1140,50 @@ export default function ReportsV2() {
return s.replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"','\'':'''}[c] as string));
}
+ // Report-specific filters shown inside the popup — whatever each report had beyond the
+ // universal Events/Date range, which now live in the sidebar (ReportsShell) instead. `null`
+ // when a report has none, so the modal chrome shows its own fallback note.
+ const reportSpecificFilters = report === "attendees" ? (
+
+
+ Event
+ setAttEventId(e.target.value)}>
+ {selectedEventIds.map(id => {
+ const ev = filteredEvents.find(e => e.id === id);
+ return {ev?.title || id} ;
+ })}
+
+
+
+
+
+ ) : report === "regStatus" ? (
+
+
+
+
+ Count by:
+ setStatusCountMode(e.target.value as 'registrations' | 'tickets')}>
+ Registrations
+ Ticket quantity
+
+
+
+ ) : null;
+
+ const reportActions = ready && (
+ <>
+
@@ -1324,185 +1192,37 @@ export default function ReportsV2() {
)}
{error &&
{error}
}
- {/* Step 1: select report */}
-
-
Select a report
-
- {REPORTS.map(r => (
-
-
- ))}
-
-
+
{ setReport(r); setReady(false); }}
+ onViewReport={() => { setPopupOpen(true); onView(); }}
+ busy={busy}
+ onOpenGuide={() => setGuideOpen(true)}
+ onBack={onBack}
+ />
- {/* Step 2: filters per report */}
-
-
Filters
-
-
-
- {isAdmin && (
-
-
- )}
-
-
-
- {report === "payments" && (
-
-
- From
-
-
- To
-
-
- Events
- ({ value: ev.id, label: ev.title }))} value={payEvents} onChange={setPayEvents} />
-
-
- )}
- {report === "attendees" && (
-
-
- Event
- setAttEventId(e.target.value)}>
- {filteredEvents.map(ev => ({ev.title} ))}
-
-
-
-
-
- )}
- {report === "regTypes" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={regTypeEvents} onChange={setRegTypeEvents} />
-
- )}
- {report === "usage" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={usageEvents} onChange={setUsageEvents} />
-
- )}
- {report === "revenue" && (
-
-
- From
-
-
- To
-
-
- Events
- ({ value: ev.id, label: ev.title }))} value={revEvents} onChange={setRevEvents} />
-
-
- )}
- {report === "revenueDetailed" && (
-
-
- From
-
-
- To
-
-
- Events
- ({ value: ev.id, label: ev.title }))} value={revDetEvents} onChange={setRevDetEvents} />
-
-
- )}
- {report === "regStatus" && (
-
-
- Events
- ({ value: ev.id, label: ev.title }))} value={statusEvents} onChange={setStatusEvents} />
-
-
-
-
- )}
- {report === "masterOrders" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={masterEvents} onChange={setMasterEvents} />
-
- )}
- {report === "donations" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={donationEvents} onChange={setDonationEvents} />
-
- )}
- {report === "cashup" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={cashupEvents} onChange={setCashupEvents} />
-
- )}
- {report === "financeReport" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={financeEvents} onChange={setFinanceEvents} />
-
- )}
- {report === "profitReport" && (
-
- Events
- ({ value: ev.id, label: ev.title }))} value={profitEvents} onChange={setProfitEvents} />
-
- )}
- {report === "cashupAudit" && (
-
-
- From
-
-
- To
-
-
- Events (optional — leave empty for all)
- ({ value: ev.id, label: ev.title }))} value={auditEvents} onChange={setAuditEvents} />
-
-
- )}
-
- {busy ? 'Loading…' : 'View report'}
-
-
-
-
Results
-
- Export CSV
- Save as PDF
- Email
-
-
+ {guideOpen &&
}
+ {popupOpen && (
+
setPopupOpen(false)}
+ filters={reportSpecificFilters}
+ actions={reportActions}
+ onRefresh={onView}
+ busy={busy}
+ >
+ {!ready && Loading…
}
+ {ready && (
+ <>
{report === "payments" && (
{paymentRows.length === 0 ? (
@@ -1542,7 +1262,7 @@ export default function ReportsV2() {