Fix financial double-counting, rebuild cashup accountability, and redesign the Reports page

Financial correctness (donation-leg model):
- Donations are no longer mutated when assigned to a registration; assignment now
  creates an immutable "leg" record referencing the original donation instead.
- Fixed several places where money was double-counted once a donation was partially
  or fully assigned (Payments, Revenue summary, Cashup reconciliation, Finance
  report, Profit report, Master Orders, Revenue Detailed).
- Payments now record who recorded them (recordedBy), separate from who they're for.

Cashup:
- Per-user cash denomination counting (optional, any time) replaces the single
  event-wide manual entry; the event's cash actual is the live sum of these counts.
- New "Payment accountability by staff member" breakdown across all methods, and a
  read-only "Report" tab that opens automatically once an event is closed.

Reports page redesign:
- New shell: sidebar of universal filters (events, date range, past/inactive/closed
  toggles), searchable/categorized report grid, and a popup viewer with
  Print/Email/Excel/WhatsApp actions plus an in-app Reporting Guide.
- Visual pass: colored stat tiles and bar charts on most reports, matching mockups.
- PDF exports (download/Print/Email/WhatsApp) now share a branded design mirroring
  the web report — colored header, stat tiles, bar chart, highlighted totals.
- Excel export now produces a styled .xlsx (via exceljs) instead of a plain CSV.
- Master Orders' "Donations made" table is now included in every export channel.

Bug fixes discovered while testing exports:
- Report emails now go through the shared, DB-configurable mail utility instead of
  a one-off transporter that ignored Site Settings SMTP config.
- WhatsApp report sends now surface the actual WAWP API error and auto-recover a
  disconnected session, instead of a bare axios status-code message.

Also: Admin-editable notification preference, richer Admin Registrations dashboard,
{{payment.link}} placeholder for Email/WhatsApp Attendees, and background
email/WhatsApp attendee sending.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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<HTMLDivElement>(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 (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => 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"
+      >
+        <span className="truncate text-left">{summary}</span>
+        <ChevronDown className={"w-4 h-4 text-gray-400 shrink-0 transition-transform " + (open ? "rotate-180" : "")} />
+      </button>
+      {open && (
+        <div className="absolute z-20 mt-1 w-full min-w-[240px] bg-white border rounded-lg shadow-lg max-h-64 overflow-auto p-1">
+          <div className="flex items-center justify-between px-2 py-1.5 text-xs text-gray-500 border-b mb-1">
+            <button type="button" className="hover:underline" onClick={() => onChange(options.map(o => o.value))}>Select all</button>
+            <button type="button" className="hover:underline" onClick={() => onChange([])}>Clear</button>
+          </div>
+          {options.map(opt => (
+            <label key={opt.value} className="flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-gray-50 cursor-pointer">
+              <input type="checkbox" checked={value.includes(opt.value)} onChange={() => toggle(opt.value)} />
+              <span className="truncate">{opt.label}</span>
+            </label>
+          ))}
+          {options.length === 0 && <div className="px-2 py-1.5 text-xs text-gray-400">No events available.</div>}
+        </div>
+      )}
+    </div>
+  );
+}