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/components/layout/Navbar.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import Image from "next/image";
+import { usePathname } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { useSiteSettings } from "@/contexts/SiteSettingsContext";
 import { BottomNav } from "./BottomNav";
@@ -18,10 +19,20 @@ type NavLink = {
 export const Navbar = () => {
     const { user, loading: authLoading, logout } = useAuth();
     const { settings, loading: settingsLoading } = useSiteSettings();
+    const pathname = usePathname();
+    // Admin-configurable — applied ONLY to the org name text below via inline
+    // style. No other element in the navbar (or anywhere else) should read
+    // this; everything else uses the fixed brand-* palette.
     const displayName  = settings.org_name  || appName;
     const displayColor = settings.accent_color || brandColor;
     const logoSrc      = settings.logo_url ? resolveToApiOrigin(settings.logo_url) : null;
 
+    const isActive = (href: string) => {
+        if (href.includes("#")) return false;
+        if (href === "/") return pathname === "/";
+        return pathname?.startsWith(href) ?? false;
+    };
+
     const handleLogout = () => {
         logout();
         window.location.href = "/";
@@ -30,7 +41,7 @@ export const Navbar = () => {
     const navLinks: NavLink[] = [
         { href: "/", label: "Home" },
         { href: "/events", label: "Events" },
-        { href: "/#contact", label: "Contact" },
+        { href: "/contact", label: "Contact" },
     ];
 
     const authLinks: NavLink[] = user
@@ -78,7 +89,12 @@ export const Navbar = () => {
                             <Link
                                 key={link.href}
                                 href={link.href}
-                                className="text-sm text-gray-700 hover:text-blue-600"
+                                className={
+                                    "text-sm pb-0.5 border-b-2 transition-colors " +
+                                    (isActive(link.href)
+                                        ? "text-brand-600 border-brand-600 font-medium"
+                                        : "text-gray-700 border-transparent hover:text-brand-600")
+                                }
                             >
                                 {link.label}
                             </Link>
@@ -92,7 +108,7 @@ export const Navbar = () => {
                                 <button
                                     key={link.label}
                                     onClick={link.onClick}
-                                    className="text-sm text-gray-700 hover:text-blue-600"
+                                    className="text-sm text-gray-700 hover:text-brand-600"
                                 >
                                     {link.label}
                                 </button>
@@ -100,7 +116,12 @@ export const Navbar = () => {
                                 <Link
                                     key={link.href}
                                     href={link.href}
-                                    className="text-sm text-gray-700 hover:text-blue-600"
+                                    className={
+                                        "text-sm pb-0.5 border-b-2 transition-colors " +
+                                        (isActive(link.href)
+                                            ? "text-brand-600 border-brand-600 font-medium"
+                                            : "text-gray-700 border-transparent hover:text-brand-600")
+                                    }
                                 >
                                     {link.label}
                                 </Link>