Full site redesign, help system, and dashboard stats fixes

Multi-phase visual facelift (design tokens, dashboards, sidebar/navbar
shell, per-page help guides, and a layout/content pass across every
remaining page) plus backend fixes to the dashboard KPI stats:

- Admin/Supervisor dashboard KPIs (revenue, donations, registrations,
  tickets sold) now use a rolling trailing-month window (today back one
  calendar month, e.g. 9 May - 8 June if today is 8 June) instead of
  calendar month-to-date, which under-counted for most of the month.
  The comparison window shifts the same way, so like is still compared
  with like.
- Reports deep-links from those stat tiles now match the same window
  (range=trailing_month, replacing range=this_month).
- Design tokens (brand-* Tailwind scale + shadcn CSS variables), a
  site-wide contextual help button, fixed dashboard sidebar/navbar,
  Admin/Supervisor/Staff/User dashboard rebuilds backed by a new
  GET /api/stats/overview endpoint, a dedicated Contact page, Site
  Settings restyle with WhatsApp config folded in, and an Account
  activity feed backed by a new SecurityEvent model.
- Every remaining page (home, events, registration flow, auth, legal,
  payment results, and every Admin/Supervisor/Staff/User tool page)
  restyled onto the same design tokens, several with real layout
  upgrades (home hero, events list/detail, donate page, auth pages).
- 20+ new dedicated help guides so the whole site has page-specific
  help content instead of falling back to a generic guide.
- Assorted fixes surfaced along the way: donation-leg double-counting
  in payment stats, donations not counting toward revenue, refund
  netting in per-method report breakdowns, and donation
  over-allocation after a refund.

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

frontend/src/app/events/[id]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from "next/navigation";
 import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import ClientActions from "@/app/events/[id]/ClientActions";
+import { Calendar, Ticket, Paperclip, Sparkles } from "lucide-react";
 
 export const revalidate = 60;
 
@@ -49,6 +50,44 @@ function lowStockThreshold(stockLimit: number): number {
   return Math.round(stockLimit * pct);
 }
 
+function RegisterCta({ event }: { event: Event }) {
+  const now = new Date();
+  const end = new Date(event.endDate);
+  const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
+  const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
+  const notYetOpen = goLive ? now < goLive : false;
+  const closed = (deadline ? now >= deadline : false) || now >= end;
+  const limitedOpts = (event.eventOptions || []).filter(o => (o.stockLimit ?? 0) > 0);
+  const eventSoldOut = limitedOpts.length > 0 && limitedOpts.every(o => o.availableCount !== undefined && o.availableCount <= 0);
+
+  if (notYetOpen) {
+    return (
+      <button disabled className="w-full bg-gray-200 text-gray-600 px-4 py-2.5 rounded-lg cursor-not-allowed font-medium" title="Registration not yet open">
+        Opens {goLive?.toLocaleString()}
+      </button>
+    );
+  }
+  if (closed) {
+    return (
+      <button disabled className="w-full bg-gray-200 text-gray-600 px-4 py-2.5 rounded-lg cursor-not-allowed font-medium" title="Registration closed">
+        Registration closed
+      </button>
+    );
+  }
+  if (eventSoldOut) {
+    return (
+      <button disabled className="w-full bg-red-50 text-red-700 border border-red-200 px-4 py-2.5 rounded-lg cursor-not-allowed font-medium">
+        Sold Out
+      </button>
+    );
+  }
+  return (
+    <a href={`/register/${event.id}`} className="block w-full text-center bg-brand-600 text-white px-4 py-2.5 rounded-lg hover:bg-brand-700 font-medium transition-colors">
+      Register
+    </a>
+  );
+}
+
 export default async function EventDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   let event: Event;
@@ -64,138 +103,159 @@ export default async function EventDetailPage({ params }: { params: Promise<{ id
   return (
     <div className="min-h-screen flex flex-col">
       <Navbar />
-      <main className="flex-1 py-10 px-4 max-w-3xl mx-auto w-full">
-        <div className="space-y-4">
-          <h1 className="text-3xl font-bold">{event.title}</h1>
-          <p className="text-sm text-gray-500">{formatDateTimeRange(event.startDate, event.endDate)}</p>
-          <ClientActions event={event} />
-          {event.picture && (
-            <ApiImage src={event.picture} alt={event.title} className="w-full aspect-video object-cover rounded" />
-          )}
-          <p className="text-gray-700 whitespace-pre-line">{event.description}</p>
-          {event.attachments && event.attachments.length > 0 && (
+      <main className="flex-1 py-8 px-4 max-w-6xl mx-auto w-full">
+        <div className="grid lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-6">
+            {event.picture ? (
+              <ApiImage src={event.picture} alt={event.title} className="w-full aspect-video object-cover rounded-xl" />
+            ) : (
+              <div className="w-full aspect-video rounded-xl bg-brand-50 flex items-center justify-center">
+                <Calendar className="w-12 h-12 text-brand-200" />
+              </div>
+            )}
+
             <div>
-              <h2 className="text-xl font-semibold mt-6">Downloads</h2>
-              <ul className="list-disc pl-5 text-gray-700">
-                {event.attachments.map((att) => (
-                  <li key={att.id}>
-                    <a className="text-blue-600 hover:underline" href={att.url} target="_blank" rel="noopener noreferrer">
-                      {att.originalName}
-                    </a>
-                  </li>
-                ))}
-              </ul>
+              <h1 className="text-3xl font-bold text-gray-900">{event.title}</h1>
+              <p className="text-sm text-gray-500 flex items-center gap-1.5 mt-2">
+                <Calendar className="w-4 h-4 shrink-0" />
+                {formatDateTimeRange(event.startDate, event.endDate)}
+              </p>
+              <div className="mt-3">
+                <ClientActions event={event} />
+              </div>
             </div>
-          )}
-          <h2 className="text-xl font-semibold mt-6">Tickets</h2>
-          <div className="space-y-2">
-            {(event.eventOptions || []).map((opt) => {
-              const hasVariants = Array.isArray(opt.variants) && opt.variants.length > 0;
-              const soldOut = (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= 0;
-              const nearlyOut = !soldOut && (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= lowStockThreshold(opt.stockLimit ?? 0);
 
-              if (hasVariants) {
-                const prices = opt.variants!.map((v) => v.price !== null && v.price !== undefined ? v.price : opt.price);
-                const minPrice = Math.min(...prices);
-                const maxPrice = Math.max(...prices);
-                const priceLabel = minPrice === 0 && maxPrice === 0 ? "Free" : minPrice === maxPrice ? `R${minPrice.toFixed(2)}` : minPrice === 0 ? `Free – R${maxPrice.toFixed(2)}` : `From R${minPrice.toFixed(2)}`;
-                return (
-                  <div key={opt.id} className="border rounded-lg overflow-hidden">
-                    <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
-                      <span className="font-medium text-sm">{opt.name}</span>
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm text-gray-600">{priceLabel}</span>
-                        {soldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
-                        {nearlyOut && !soldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{opt.availableCount} remaining</span>}
-                      </div>
-                    </div>
-                    <ul className="divide-y">
-                      {opt.variants!.slice().sort((a, b) => (a as any).order - (b as any).order).map((v) => {
-                        const vPrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
-                        const vSoldOut = (v.stockLimit ?? 0) > 0 && v.availableCount !== undefined && v.availableCount <= 0;
-                        const vNearlyOut = !vSoldOut && (v.stockLimit ?? 0) > 0 && v.availableCount !== undefined && v.availableCount <= lowStockThreshold(v.stockLimit ?? 0);
-                        return (
-                          <li key={v.id} className="flex items-center justify-between px-3 py-2 text-sm text-gray-700">
-                            <span>{v.name}</span>
-                            <div className="flex items-center gap-2">
-                              <span>{vPrice === 0 ? "Free" : `R${vPrice.toFixed(2)}`}</span>
-                              {vSoldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
-                              {vNearlyOut && !vSoldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{v.availableCount} remaining</span>}
-                            </div>
-                          </li>
-                        );
-                      })}
-                    </ul>
-                  </div>
-                );
-              }
+            <p className="text-gray-700 whitespace-pre-line">{event.description}</p>
 
-              // Early bird pricing display
-              const now = new Date();
-              const activeTiers = (opt.earlyBirdTiers || [])
-                .filter((t) => now < new Date(t.deadline))
-                .sort((a, b) => a.price - b.price);
-              const displayPrice = activeTiers.length > 0 ? activeTiers[0].price : opt.price;
-
-              return (
-                <div key={opt.id} className="flex items-center justify-between border rounded-lg px-3 py-2 text-sm text-gray-700">
-                  <span className="font-medium">{opt.name}</span>
-                  <div className="flex items-center gap-2">
-                    {activeTiers.length > 0 ? (
-                      <>
-                        <span className="text-indigo-700 font-medium">R{displayPrice.toFixed(2)}</span>
-                        <span className="text-xs text-gray-400 line-through">R{opt.price.toFixed(2)}</span>
-                        <span className="text-xs text-indigo-600">Early bird</span>
-                      </>
-                    ) : (
-                      <span>{displayPrice === 0 ? "Free" : `R${displayPrice.toFixed(2)}`}</span>
-                    )}
-                    {soldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
-                    {nearlyOut && !soldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{opt.availableCount} remaining</span>}
-                  </div>
+            {event.attachments && event.attachments.length > 0 && (
+              <div className="border rounded-xl p-5 bg-white shadow-sm">
+                <div className="flex items-center gap-2 mb-3">
+                  <Paperclip className="w-4 h-4 text-gray-500" />
+                  <h2 className="text-base font-semibold text-gray-900">Downloads</h2>
                 </div>
-              );
-            })}
+                <ul className="space-y-1.5">
+                  {event.attachments.map((att) => (
+                    <li key={att.id}>
+                      <a className="text-brand-600 hover:underline text-sm" href={att.url} target="_blank" rel="noopener noreferrer">
+                        {att.originalName}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {/* Tickets are shown in the sticky card on desktop; repeat here for mobile below the fold */}
+            <div className="border rounded-xl p-5 bg-white shadow-sm lg:hidden">
+              <div className="flex items-center gap-2 mb-3">
+                <Ticket className="w-4 h-4 text-gray-500" />
+                <h2 className="text-base font-semibold text-gray-900">Tickets</h2>
+              </div>
+              <TicketList event={event} />
+              <div className="mt-4">
+                <RegisterCta event={event} />
+              </div>
+            </div>
+          </div>
+
+          <div className="hidden lg:block">
+            <div className="border rounded-xl p-5 bg-white shadow-sm sticky top-20">
+              <div className="flex items-center gap-2 mb-3">
+                <Ticket className="w-4 h-4 text-gray-500" />
+                <h2 className="text-base font-semibold text-gray-900">Tickets</h2>
+              </div>
+              <TicketList event={event} />
+              <div className="mt-4">
+                <RegisterCta event={event} />
+              </div>
+            </div>
           </div>
-          {(() => {
-            const now = new Date();
-            const end = new Date(event.endDate);
-            const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
-            const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
-            const notYetOpen = goLive ? now < goLive : false;
-            const closed = (deadline ? now >= deadline : false) || now >= end;
-            const limitedOpts = (event.eventOptions || []).filter(o => (o.stockLimit ?? 0) > 0);
-            const eventSoldOut = limitedOpts.length > 0 && limitedOpts.every(o => o.availableCount !== undefined && o.availableCount <= 0);
-            if (notYetOpen) {
-              return (
-                <button disabled className="inline-block bg-gray-300 text-gray-600 px-4 py-2 rounded cursor-not-allowed" title="Registration not yet open">
-                  Opens {goLive?.toLocaleString()}
-                </button>
-              );
-            }
-            if (closed) {
-              return (
-                <button disabled className="inline-block bg-gray-300 text-gray-600 px-4 py-2 rounded cursor-not-allowed" title="Registration closed">
-                  Registration closed
-                </button>
-              );
-            }
-            if (eventSoldOut) {
-              return (
-                <button disabled className="inline-block bg-red-50 text-red-700 border border-red-200 px-4 py-2 rounded cursor-not-allowed">
-                  Sold Out
-                </button>
-              );
-            }
-            return (
-              <a href={`/register/${event.id}`} className="inline-block bg-blue-600 text-white px-4 py-2 rounded">
-                Register
-              </a>
-            );
-          })()}
         </div>
       </main>
       <Footer />
     </div>
   );
 }
+
+function TicketList({ event }: { event: Event }) {
+  const options = event.eventOptions || [];
+  if (options.length === 0) {
+    return (
+      <div className="text-center py-6">
+        <Sparkles className="w-6 h-6 text-gray-300 mx-auto mb-1.5" />
+        <p className="text-sm text-gray-400">Free entry — no tickets required.</p>
+      </div>
+    );
+  }
+  return (
+    <div className="space-y-2">
+      {options.map((opt) => {
+        const hasVariants = Array.isArray(opt.variants) && opt.variants.length > 0;
+        const soldOut = (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= 0;
+        const nearlyOut = !soldOut && (opt.stockLimit ?? 0) > 0 && opt.availableCount !== undefined && opt.availableCount <= lowStockThreshold(opt.stockLimit ?? 0);
+
+        if (hasVariants) {
+          const prices = opt.variants!.map((v) => v.price !== null && v.price !== undefined ? v.price : opt.price);
+          const minPrice = Math.min(...prices);
+          const maxPrice = Math.max(...prices);
+          const priceLabel = minPrice === 0 && maxPrice === 0 ? "Free" : minPrice === maxPrice ? `R${minPrice.toFixed(2)}` : minPrice === 0 ? `Free – R${maxPrice.toFixed(2)}` : `From R${minPrice.toFixed(2)}`;
+          return (
+            <div key={opt.id} className="border rounded-lg overflow-hidden">
+              <div className="flex items-center justify-between px-3 py-2 bg-gray-50 border-b">
+                <span className="font-medium text-sm">{opt.name}</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-gray-600">{priceLabel}</span>
+                  {soldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
+                  {nearlyOut && !soldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{opt.availableCount} remaining</span>}
+                </div>
+              </div>
+              <ul className="divide-y">
+                {opt.variants!.slice().sort((a, b) => (a as any).order - (b as any).order).map((v) => {
+                  const vPrice = v.price !== null && v.price !== undefined ? v.price : opt.price;
+                  const vSoldOut = (v.stockLimit ?? 0) > 0 && v.availableCount !== undefined && v.availableCount <= 0;
+                  const vNearlyOut = !vSoldOut && (v.stockLimit ?? 0) > 0 && v.availableCount !== undefined && v.availableCount <= lowStockThreshold(v.stockLimit ?? 0);
+                  return (
+                    <li key={v.id} className="flex items-center justify-between px-3 py-2 text-sm text-gray-700">
+                      <span>{v.name}</span>
+                      <div className="flex items-center gap-2">
+                        <span>{vPrice === 0 ? "Free" : `R${vPrice.toFixed(2)}`}</span>
+                        {vSoldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
+                        {vNearlyOut && !vSoldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{v.availableCount} remaining</span>}
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          );
+        }
+
+        // Early bird pricing display
+        const now = new Date();
+        const activeTiers = (opt.earlyBirdTiers || [])
+          .filter((t) => now < new Date(t.deadline))
+          .sort((a, b) => a.price - b.price);
+        const displayPrice = activeTiers.length > 0 ? activeTiers[0].price : opt.price;
+
+        return (
+          <div key={opt.id} className="flex items-center justify-between border rounded-lg px-3 py-2 text-sm text-gray-700">
+            <span className="font-medium">{opt.name}</span>
+            <div className="flex items-center gap-2">
+              {activeTiers.length > 0 ? (
+                <>
+                  <span className="text-brand-700 font-medium">R{displayPrice.toFixed(2)}</span>
+                  <span className="text-xs text-gray-400 line-through">R{opt.price.toFixed(2)}</span>
+                  <span className="text-xs text-brand-600">Early bird</span>
+                </>
+              ) : (
+                <span>{displayPrice === 0 ? "Free" : `R${displayPrice.toFixed(2)}`}</span>
+              )}
+              {soldOut && <span className="text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded px-1.5 py-0.5">Sold out</span>}
+              {nearlyOut && !soldOut && <span className="text-xs font-medium text-orange-600 bg-orange-50 border border-orange-200 rounded px-1.5 py-0.5">{opt.availableCount} remaining</span>}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}